Art

Blender 2D Animation with Meshes

This is a follow on from the workflow discussed in the previous post: Preparing 2D Art for Animation.

This is the end result of the process described:

Sprightly Spring Deer

I’m looking to see if there are any advantages to using Blender as a 2D Animation tool using meshes over Unity’s Spline Sprite based animation system. The differences between them at the effort and usability/flexibility layer are many and subtle. Hence the investigation. The two biggest differences for me is that 1. With the Blender animation option you are animating in Blender (which I like much more than animating in Unity). But the down side is that you have to import the animations into Unity and it’s pretty hard to modify once they are there. Which also means that it’s harder to adjust them to react to other actors, objects, and scene elements once you get it into the game. 2. With the Blender approach it’s a mesh in Unity not a Sprite so you can do all the transforms that mesh’s support. You can also light it as a mesh (the default Sprite Renderer cannot be lit). Being able to use light effects on a 2D image within the game is pretty huge for making it look pretty and making effects or plot devices (think lightning on a dark and stormy night). You can get light effects on Sprites in Unity if you swap out the default shader with another shared and with the Light Weight Render Pipeline in Unity (LWRP) but not every project will suit that. There are also Unity solutions that use custom shaders or use a similar mesh and material based solution (see further below for more on that).

Comparing Unity Sprites to Blender Meshes in Unity

The images directly below are taken from the Game Screen in Unity. The one on the left is a Sprite based Spline rendering while the one on the right is the Mesh based fbx from Blender. You can see the difference in quality between the Sprite on the left and the lossy baked images of the Mesh on the right – it’s not huge and can be improved with some tweaking (Bilinear Filter mode and upping the Ansio Level to 2 helped with the anti-aliasing and working with the material Metallic and Smoothness parameters also helped).

Sprite (left) and Mesh (right)
Night Time lighting affects the Blender mesh image but not the Sprite based image.
Lighting effects can be much more complex and creatively arranged to hit separate parts of the mesh.

As stated above you can drop an image onto an object in Unity as a material but it doesn’t light as well and is prone to shadowing. Use the Cutout and not the Transparent Rendering Mode in Unity or you get this shadow on the transparency. The below image shows a material with a standard shader with an image on a Unity 2D plane mesh but there is a shaded square around the outside that marks the image boundary.

Transparency Shader

The image below is the same sprite using a material with a standard shader and a cutout rendering mode (the diffuse sprite shader worked similarly). The top one is a normal sprite renderer with the custom material replacing the default-sprite material. The bottom one is a Unity 2D Plane with the custom material applied. Both tests look better than the quality of the Blender imported model and could be layered and they react with lighting in game.

So these are the alternatives to the process I’m describing below with Blender and they are good and valid options. I guess the only reason why I would choose to use the Blender animation workflow is because I hate doing this process in Unity’s Animator window. Add Property | drill down through the object | the child | the other child | the bone | the transform | and finally the tiny little plus sign that let’s me add one manipulation point! For a Deer Kick I had 88 different animation points – that’s a LOT of stupid clicking down through an object hierarchy to add Properties (I know you can hold down shift and add more than one property at a time but you still have to manually expand them all). The other alternative is to right click and add all properties for an object and then if you are patient enough you can remove the one’s you don’t use.

I do like the record feature that adds properties dynamically but these problems and that I find the interface finicky and too small made me look at Blender.

Importing the Images to Blender and Setting up the Workspace

Moving on to working in Blender with images and Meshes the basic process is this:

  1. For every layer in the artwork of our animated character we exported a separate image file on a transparency. Each png file is imported into Blender as an empty image object (Add | Empty | Image) you could use a reference or background image but since all the parts might move I wanted to group them all under empties.
  2. A Mesh is created for each image and either shaped to the outline of the image or left as a plane and weighted correctly (more on that later).
  3. The image is baked into the UV of the mesh.
  4. The components are then parented to an Armature with automatic weights.
  5. The meshes are weight painted to correct the deforms.
  6. Now it’s ready for animation.

The image objects are all placed at the same origin (0, 0, 0) and rotated 90 degrees on the ‘x’ Axis so they are visible in the viewport from the “front” view.

All the Deer components Frankenstein’d together into a whole
The visibility of parts are toggled on and off so individual pieces can be worked on.

Making the Mesh’s

For each piece a mesh is made. I took two approaches here: 1. Model a plane mesh as closely as I could to the shape of the sprite. 1. Use a plain rectangular mesh and use weight painting to deform correctly.

To start with the modelling approach I started with an image and dragged a plane in edit mode over it as a wireframe. The origin of the plane was kept at 0, 0, 0 so all the pieces that were made had a common reference (same as all the images). Using basic mesh deform and subdivision I created a mesh that matched the image.

The foreleg Mesh

The method was a lot of work manually placing each vertex on the border of the image boundary. If the vertex is placed a little bit outside the image you get a white space on the final product and if you don’t come all the way to the edge you lose some of the black line and smooth finish (UV mapping is slightly out). Plus I found that if you have to warp the mesh too much for a sharp angle or awkward placing of the square tiling you get some minor defects along the line during animation.

Vertices placement

After about the fourth component I got a bit sick of manually moving around vertexes. So I took another approach of just using a rectangular mesh and relying on the transparency of the image to do all the work. This is much easier and faster but there were gotcha’s during adding the armature and weight painting. This rear leg below is just one big mesh subdivided into enough squares to give a decent deform without stretching or warping the black line during animation.

Venison

In Solid shading here is a comparison of the rear leg mesh and the front leg mesh.

Solid Mesh Planes

The image below is both meshes in Render mode (including the armature) and you really can’t tell the difference between them.

Rendered Meshes

The whole mesh ended up looking like this:

Armature and Weight Painting

As you can see above the armature was added and the Mesh objects were parented to it with automatic wights. Because everything is a flat plane of which some are meant to overlap the others (like the closest front leg is in front of the torso and the back leg is behind it) parenting the armature with automatic weights meant that both front, middle, and rear mesh’s would get an equal measure of weight in parts. This all had to be manually painted.

Here the Torso was weighted across three bones and only the rear was affecting the rump (any leg meshes had to be removed from these vertex groups).

Weights had to be carefully graded otherwise warping of the line would result:

The weight is too strong a transition here.
It causes artifacts like this.
This is the resulting gradient changes in weight to get a correctly deforming line.

The other problem was that random single or lone groups of vertices would be weighted to a bone and not visible until you moved it in pose mode:
A few vertices on the chest were registered to the root bone. These all have to be manually removed.

The other interesting anomaly with the large rectangular plane meshes was that the weight would sometimes cause improper warping of the mesh which bent it round itself in places and showed up as black squares.

The foot vertex group covers all these vertices.
Which you cannot tell in edit mode when you select it with “show weights”.
During transform in animation these black marks show where the mesh does not warp properly.
The mesh is a mess.
It’s because the shin bone weight doesn’t go all the way to the edge.
It looks right in edit mode.
But if you use the vertex group to select all the vertices it should look like this (all the way to the edge).

These are pretty quick things to fix really but it took a while to work out what exactly was happening. It’s was still faster than individually making all the mesh components by hand to fit the image.

Probably a better workflow would be to make reduced simpler meshes that fit closer to the image but don’t have to slavishly man handle the vertices around the borders.

The Shading

UV Mapping is totally easy here but getting the material right was a bit tricky with the transparencies and images. This is the setup I used:

The Transparent Shader in Blender

That’s about it for getting everything set up in Blender. For more info on the animation steps and getting it into Unity see my other post about this. https://www.zuluonezero.net/2021/11/16/exporting-multiple-animations-from-blender-to-unity/

Preparing 2D Art for Animation

I’ve been doing some work on the 2D side of things in preparation for another game.

This has been the general workflow.

1. Make the assets in Clip Studio.

2. Pack the sprites with Free-Tex-Packer

3. Import the art into Blender, make a mesh for each sprite and UV map it.

4. Add the Armature bones.

5. Weight Paint

6. Animate.

7. Export from Blender as an *.fbx with the animations baked.

8. Import into Unity

9. Add new Materials and import the UV images into Unity.

10. Add the *.fbx imported asset into a scene.

11. Add an Animator Component and drag the animations from the prefab into it.

12. Set up Triggers and connections for the animations.

It’s a lot of work. Especially if you make a custom mesh for each piece of art. But I did all this as I really like animating in Blender (especially now that the Pose Library is functional and part of the Asset Browser). But to tell the truth I think I got better results using the Spline system in Unity 3D with much less work. There are trade offs and I’ll go through them below after more exposition on the workflow.

In this post I’ll go through the asset creation process in Clip Studio.

Making the Asset

The 2D game has a bunch of cute animals so I dug deep into the Disney Sketchbook by Ken Shue and pulled out Bambi for inspiration.

An early Disney sketch

Using this as a rough guide I drafted a few basic shapes for a “Deer” character which looked like this:

Rough Sketch for the 2D Asset

I started using Clip Studio last year in place of the Gimp. I’ve tried all sorts of painting programs and would choose Gimp over most of them (I will not spring for a paid version of Photoshop – it’s extortion!) but Clip Studio won me over with it’s brushes. It’s not expensive by comparison and I really like how it fits into the specific things I want out of an art program. I’ll often go back to Gimp for projects that require a lot of filters and image manipulation but for straight drawing on the PC Clip Studio is a good fit for me. I like how you can make custom tools that mimic your real life counterparts for a pencil or brush and find this program better at it than most (though Adobe Sketchbook runs a close second).

To start with I create a set of layers for the Inking of the artwork. One for each moving element in the final asset.

There is a pretty simple formula for this where each limb or piece gets a layer. But you have to have a general idea of what you are going to need in the final asset and what animation is required. There is no point doing a separate component if it’s not going to move or be seen in the final product. Trouble is a lot of this work is iterative and often you find that you have to go back and change something when it doesn’t look right. There needs to be an awareness of where pieces overlap and what lines are going to be warped by the armature bending or where a line needs to be extended behind a piece that might move and reveal where it ends by another layer.

The Inking Layers
This is how the inking layers sit on top of each other that shows where lines overlap or extend.

It’s really easy to see on the body and legs but even here on the pieces surrounding the head the lines that make up the ears and hair and neck all have to move independently but still look connected.

Once I’m done with the inking stage I add more layers for color. At this point the whole file gets saved as export copy and the layers are merged into one for each piece again and numbered in the order in which they will sit on the animation cell. I keep the older copy with the separate layers for everything and all the drafts so I can go back to it if I have to change something.
This is the whole asset complete and ready for export. Each layer is exported individually as a *.png. The file size of each one is 1024 x 1024 pixels with 600 dpi and a transparent background.
The *.png files are imported into the Texture Packer to minimize the material size in the final project. Each of these elements get’s UV mapped to a mesh in Blender but more of that later in the next post.

Start to finish this took a couple of days elapsed time as there is a lot of noodling about with formats, designs and what-not.

Next up I’ll go into the Blender workflow and preparing the art for animation with complex and simple meshes.

Blender Curved Cuts

For the latest game in development called The Gap I’ve been doing lots of work in Blender. Learning new tricks and speeding up my workflow. Making a curved cut is something I had not done a lot of and in the past I’ve struggled with the knife tool or knife projects. I’ve been using this method to make curved windows and door arches.

Here is a neat way to make a curved cut in an object with considerable control and only a little bit of mucking about.

Basically we are intersecting one mesh with another and bisecting the meshes with a knife cut to make a simple train tunnel shape.

We are going to start with the default cube which has been scaled up to ten and subdivided 7 times.

A subdivided cube

Next we are going to add a Nurbs Curve as a second object. This we are going to manipulate into the shape we want and later convert it to a mesh to intersect with our cube. You could use any other object like a Bezier Curve or a Path would be very flexible. I chose a Nurbs Curve because it was reasonably simple shape.

Add a Nurbs Curve

In Edit mode manipulate the curve into the shape you want, subdividing the points if required. I find that enabling snapping is a good way to start to keep everything the same on both sides of the curve and then turning it off for fine tuning.

Snapping Enabled and Handles

Once you have the shape you want you can clean up the curve (it’s best to have everything on the same plane).

The Curve is Ready for Converting to a Mesh

Once you are happy with it it is now converted to a mesh.

Convert to Mesh

Which is then extended through our cube!

Extended Intersecting Mesh

Both Meshes are Joined (Ctrl + J). Select the one last that you want to keep the name of.

Joined Meshes into one Object

Switch to Face Select mode and then the Mesh is Intersected and cut with the knife:

Then you can simply delete the faces from the Nurbs Curve Mesh and you are left with the nice curved cut.

Select Faces on one side of the cut and Delete
Delete the Faces on the other side of the Cut

Now you can select all the faces inside your nice curve and extrude them into the cube to make a train tunnel 🙂

Face Select
Extrude into the Cube
The Completed Curved Cut

A few final notes. As I mentioned before you can do this procedure with any mesh to make cuts and hollows with intersections. It’s a bit like using the boolean modifier. It’s not great in every situation as it can make a mess of your topology if you are not neat with your cuts and you can be left with some very tiny faces or triangles. But if you line things up nicely and merge your close vector points it’s a pretty simple and handy tool in the kit.

Blender: Simple Dishes Plates and Cups

One game currently in the pipe line is called The Gap. The game is about the gap between the private internal world of personal histories and how they feed and colour perceptions of the present. Esoteric I know right. But basically it’s an exploring game in an urban setting with lots of indoor areas that need indoor props. So I’ve been doing lots of modelling and researching new methods to make life easier when using Blender (which I love).

Part of this research is reading lots and lots of books and one of them was Blender for Animation and Film-Based Production by Michelangelo Manriqu. The book is great and I’d recommend it to anyone using Blender. One method that I had not seen in any other tutorials or books was this one for making complex cone or cylinder based meshes using Bezier circles and curves. Instead of starting with the basic forms and working complex changes on their geometry this method is quick and simple to make complex (and simple) shapes really fast.

It starts like this: Open a new Scene and add a Bezier Curve and a Bezier Circle:

This is the right view (num 3) with the Bezier Curve moved over a bit on the X axis and rotated 90 degrees on the Z. (R key, −90 , Enter).

A Bezier Circle (in orange) and the black line next to it is a Bezier Curve.

Select the Bezier Circle and Click on the little green Bezier Object button from the properties tab on the right.

Open the Geometry and Bevel sections and click on the Object button. Select your Bezier Curve as the Object.

This sets your Bezier Curve as the defining object for the edges and volume of the now filled Bezier Circle.

Set the Bezier Curve as the Object

Now Select the Bezier Curve and move to Edit mode. Subdivide it as much as you want and play with the shape and angle of the curve to get your Bezier Circle to form all sorts of complex shapes.

Once you are happy with what you have you can go back to Object mode and select the Bezier Circle and go to Object -> convert to mesh (or ALT+C Mesh from Curve/Meta/Surf/Text).

Here some examples I did for this post:

Plate
Platter with Bevels
Chalice!

I think the Chalice up there shows the power of this method for creating complex small objects very quickly and the relationship between the Bezier Curve and the resultant mesh.

The Gap will not be released for some time yet – years – it’s still early days but I’m really enjoying the process and it’s nice to be doing something personal and meaningful with game development.

The Kit

This is the hardware and software that I’m currently using to make games.

My main machine is a Venom BlackBox laptop. It’s got an i5 Intel Core and 8 GB of RAM. The OS c:\ drive is flash and the d:\ storage drive is SAS. so the operating system stays fast but it also has plenty of local storage. This was my main expense and after working for years on a 3nd hand Toshiba it’s an absolute dream. They are made locally in Melbourne at a place called MLN Computers who specialize in Gaming Hardware and it’s just beautifully finished and super thin and light. Plus it’s Batman black with green backlit keys if you want them. Off mains it’s a bit of a battery hog but for what I do on it and the process heavy apps I use it does pretty well. It gives a lot of power and is very stable. The only down side is because it is very thin the fan comes on quickly and can be loud to the point of distraction sometimes.

I do a lot of music and audio work on my laptop and use a Line 6 KB37 midi keyboard and digital USB audio interface. I got this years ago and its been super awesome. It come bundled with the Line 6 Pod Farm software and a bunch of other audio apps like Reason 10 and Ableton Lite and virtual instruments from Korg (the amazing Korg Legacy Collection), and Applied Acoustics (the fully versatile AAS Player and gorgeous LoungeLizard EP-4). Sadly it’s no longer made and I have no idea what I’m going to do if it ever gives up the ghost – probably go back to Linux Audio (sadly the KB37 was incompatible with my Linux audio box if you ever get the chance to play with it I recommend Musix or Ubuntu Studio but there are heaps of other options).

For either guitar or keyboard it’s fabulously versatile and can also interface with whatever Daw I’m using.

I bought a second hand Wacom drawing tablet. When I picked it up it turned out to be an old one from one of Melbourne’s larger game companies. I took that as a good sign.

I started making games in htlm5 and all I really needed for software was a copy of Sublime Text 3, Gimp and the Tiled map editor.

I moved on to Unity3d and Visual Studio 2017 but still use Gimp as my main art making software.

I tried lots of other art packages like Spriter, Krita, Pencil,  Adobe Illustrator CS2, Adobe Photoshop CS2, and GraphicsGale.  All of them were good but I like Gimp best. It seems to have all the features that I need and I’m more comfortable with the open source nature of the project.

I tried lots of other Game Engines as well: Stencyl, Unreal Engine and Amazon Lumberyard but I think I’ll stick with Unity for a while.

For model making I use Blender. I find it easier than the other programs I’ve tried (even with all the keyboard shortcuts).  The community is awesome too.

I also really like using  MagicaVoxel for quick fun models.

I tried DAZ Studio, DesignDoll and Sculptris but I always come back to Blender.

For animation in 2D I use Plastic Animation Paper (PAP4 ) and Gimp.  I really like PAP4. It’s old but has very powerful features.  I use Blender for 3D Animation.

For making video content and editing I use the OpenShot Video Editor.

All my documentation is done with OpenOffice.

For Source Control I use GitHub and TortoiseSVN, or a local Helix Perforce service.

For an Android emulator I either use Android Studio, KOPLAYER or Leapdroid.  I think Leapdroid is my favourite.

I have a really really big list of software that I tried and never really used. Mostly because I just never got time and if I spent all my time getting new toys I wouldn’t have time to play with the ones I already have.

 

 

 

 

 

 

 

 

New GIMP Speed Drawing Cartoon

I made a new speed drawing for Trixie – check it out

These are quick sketches done for our team to use as avatars.

I’ve recently done them all using GIMP and uploaded the one of myself here: http://www.zuluonezero.net/2017/11/11/new-speed-painting-in-gimp/

I recently started reading a great comic book faces drawing book by artist Christpher Hart called Cartoon Faces. I prefer to work from books but he has a YouTube channel.  https://www.youtube.com/channel/UCrd1j_IoMQDv_MEEGKLoFJg

The music for this video was by Zulu.  It was created some time ago but fits nicely with the feel of the artwork.   It’s been uploaded to our Sound Cloud account so if you make a good Space Game let us know and we might let you use it.