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.
The last couple of weeks I’ve been drawing hands. I always feel like I need to draw better and never make the time to do it. I have always liked drawing hands but my output is often pretty sketchy (pun intended). I have a book by George Bridgeman called A Hundred Hands which is one of the few art books I have a physical copy of and I’ve tried before to draw them all at one point or another. Thing is though even though there is more than hundred hand drawings in the book they are often not clear with the detail and when you are copying them you get to the point where the information you want is missing.
The challenge I gave myself was to draw a hundred hands myself. I often see people on the internet showing off their hundred heads or hundred expressions etc. and thought it was a good thing to do. What’s funny is that in doing it I reckon those people on the internet must have drawn way more than a hundred of what they were drawing to look so good. After drawing a hundred hands, and you can see from the images above, some of them are really not looking that great. A different angle or just a bad day at the easel is all it takes to throw the drawing out.
But that said it was really good to go over all the anatomy and learn to see again the angles and shapes of the hand. After doing it I really can’t say that I’m that much better at drawing hands or drawing in general but I’m definitely better at looking at hands and seeing all the angles and components.
I often struggle with the disconnect between drawing from life and drawing templates or symbols for things that live in my head. I find drawing from life pretty easy. But drawing from memory where you are using symbols and learned shapes is very different and that’s one of the things I wanted to get better at. So often I find that drawing is a mixture of the two ways of doing it and one definitely helps the other.
Another thing I found was that it was much more fun and better for the work to be looking at a variety of sources. While I started with George I quickly moved on to every other conceivable source of hands I could think of. I used images from online, copying from life, pinterest, every anatomy source I owned, old comics and old masters.
Anyway I’ve moved on to a hundred forearms and plan to work my way around the body for a few more weeks till I get sick of it and need to go back to doing all the other stuff that I love like making games, and 3D models and music.
This is more concept art for a protagonist in the new project called The Gap. Okapi Boy – I have always loved Okapi’s. They are shy and remained hidden from the world in the deepest parts of the jungle until they were discovered in the 50’s. Beautiful Zebra like patterns on skin like a Deer. This is a deeply peaceful animal with large soulful eyes. He dreams and offers advice but you have to seek him out and finding him is not always easy or straightforward. In The Gap you get the chance to play as the Okapi for part of the story.
Okapi Boy
There used to be a great example of this rare creature in the Melbourne Museum Taxidermy collection (which I used to love but has now sadly been taken off the exhibit floor). You can take a virtual tour of the old “Wild” exhibition here.
I have a LOT more concept art to do as I want to get a very clear picture of my characters before I start modelling.
I also stared working on the programming for the game. One element I want to include in the story is a “mini-game” called Fox and Geese. It’s played on a chess board and was one of the first games I remember my dad teaching me how to play. It’s pretty straightforward and uses a chess board and pawns. Four white pawns are the Geese who can only move forward and diagonally one row at a time. The Fox is a black pawn that can move diagonally one space at a time in any direction. Moves are taken in turn and the aim of the game is for either the Fox to break the line of Geese or the Geese to “capture” the Fox so that he cannot move.
Fox And Geese
It’s early days yet with only the board set up and pawn selection scripts started but it was actually pretty fun setting up the programming that took care of the board. When you learn programming you get to do lots of arrays and nothing screams “ARRAY” like a chess board. So it’s kind of nice to use one of those basic skills that you use in all programming in such a nice simple example. You get to add a little interest to the basic array with the inclusion of alternating colours. Here is the code below:
using UnityEngine;
public class FnG_MakeBoard : MonoBehaviour
{
public GameObject boardPiece;
public Vector3[] positions;
// Start is called before the first frame update
void Start()
{
positions = new Vector3[64];
float start_x_pos = -1.75f;
float start_y_pos = -1.75f;
float rowcount = 0f;
float linecount = 0f;
for (int i = 0; i < positions.Length; i++)
{
positions[i] = new Vector3(start_x_pos, start_y_pos, 0f);
start_x_pos += 0.5f;
rowcount += 1;
if (rowcount == 8)
{
start_x_pos = -1.75f;
start_y_pos += 0.5f;
rowcount = 0f;
linecount++;
}
Instantiate(boardPiece, positions[i], Quaternion.identity);
Color32 myRed = new Color32(185, 48, 48, 255);
Color32 myGray = new Color32(106, 106, 106, 255);
if (i % 2 == 0)
{
if (linecount % 2 == 0)
{
boardPiece.GetComponent<SpriteRenderer>().color = myGray;
}
if (linecount % 2 != 0)
{
boardPiece.GetComponent<SpriteRenderer>().color = myRed;
}
}
if (i % 2 != 0)
{
if (linecount % 2 == 0)
{
boardPiece.GetComponent<SpriteRenderer>().color = myRed;
}
if (linecount % 2 != 0)
{
boardPiece.GetComponent<SpriteRenderer>().color = myGray;
}
}
}
}
This post is about preparing for a good drawing. Drawing is the fundamental skill for all (or most) forms of art. I’d like to be better at it but I really only just get by…
But still you have to prepare to do your best otherwise you are setting yourself up to fail. So this is the process or workflow that I find is the best for me. I’ll take you through the process and use a rough example drawing as we go.
A lot of these ideas come from reading Andrew Loomis and Walt Stanchfield. (I cannot recommend Gesture Drawing for Animation enough for reading about drawing rather than actually doing drawing.)
I often think of this quote (well paraphrase…) from Andrew Loomis when I start out to draw something:
“You must have a desire to give an excellent personal demonstration of ‘Ability’ coupled with a capacity for unlimited effort that hurdles the difficulties that would frustrate lukewarm enthusiasm.”
The Idea
To begin with every drawing starts out with a message or purpose or job to do. The Idea or Emotion of the Drawing. First and foremost you have to draw an idea. Every object that you put in your drawing is an elaboration of that idea. Your idea has to be an action (or verb – a “doing” word) but the vehicles of that action are the things/objects in your drawing. Those things can be a figure, ten figures, a dog, a house, a tree, a swirling galaxy, or whatever. If it’s a figure then the pose, the anatomical structure, etc. have to portray that idea. In every drawing you have to find that emotion of the idea. It’s a bit of a nebulous concept but I don’t have any other way to describe it.
For example in figure drawing the essence of the idea is all the outward manifestations of that internal emotion. Every moving part and direction portray the motive and mood of the drawing. Your character has to be responding characteristically to some real or imaginary motivation. To quote Stanchfield: “These are basic human emotions such as joy, sorrow, anger, tenderness, submission, domination, fear, surprise, distress, disgust, contempt, and shame.”
The second part to this idea is the story. What happens next. There’s no need for a whole story to be crammed into one drawing all you need is you figure doing something or reacting to something in a “characteristic” way for who they are supposed to be.
Preparation to Draw
As I said before you have to prepare to make a good drawing.
It usually doesn’t just happen if you just start drawing.
This is the best process I’ve found that does just that.
It starts with Mental Preparation or Rough Sketching. You have to answer these sorts of questions about what you want to draw: What is the idea? What is your pose? Is it the extreme of the action? Is there an action and a re-action? What is the visual depth? Is there a primary and secondary action? What is the “stage” for the action? What is the anticipation? (What is just about to happen?) Will you use caricature? What details will you include? What objects will you use? Do the objects have a texture?
Once you have worked your way through those questions try starting your first drawing.
This one simplifies your idea and starts nutting out the technical execution.
This is the first sketch for my example drawing.
What is the idea? Piano Player immersed in playing. The idea is total absorbtion in the music.
What is your pose? Sitting one leg up tapping – hands flying. I want every action to be reinforcing that one-ness with the music.
Is it the extreme of the action? Not in the first sketch I did – that right hand could be up higher with the fingers poise like an eagle about to strike. He is supposed to be immersed in the action so his head could be down further or looking at the sky. The left leg is supposed to be horizontal and then on tip toes. Maybe it should poke out more to the left so you can see that outline instead of being hidden in the foreshortening.
Is there an action and a re-action? Not really – that right arm really needs to look like its at the top of it’s upward trajectory and is about to slam down. The shoulder could be either more hunched or raised up. The other shoulder needs to be stretched out like he’s really reaching for the low note. The tapping foot needs to be up as well and just about to come down. The left foot needs to be jittering about and only just holding his balance on that stool.
What is the visual depth? In the sketch it’s quite shallow. No background and a very close middle ground.
Is there a primary and secondary action? The primary is that hand. The secondary is the repeat of that in the foot and the hunching or lifting of the body.
What is the “stage” for the action? Is this a bar in a western or a jazz club or a luxury penthouse or a garrette? I think I’ll go for a down and out garrette. A total slum of a place that he is escaping with the music. I think I will change the format from landscape to portrait to hem him in and make room for a window.
What is the anticipation? (What is just about to happen?) His right hand is just about to crash down and peal out the most amazing lick while the left hand pumps the bass notes. The jittering and stomping foot are like the rhythm section.
Will you use caricature? I don’t think so.
What details will you include? What objects will you use?
Whisky glass! Shadows! Mood lighting. Other people? I don’t think so it’s all about him. Cigarette ash. Old stool and table lamp. Add a broken window and sliced up blinds behind him with a crappy part of the city and the moon overhead.
Do the objects have a texture? Woody piano, dirty floor,
This is where I got the inspiration the second mannequin looked like he was playing the keyboard.
First Drawing
Aim for Simplification. Shapes and composition. What are the most basic shapes (try and limit it down to three or max six) use the square, the rectangle, the circle or ellipse, and triangles. Define the Scale and point of view. (Which perspective are you using? How many vanishing points?) Is there a Direction (or Flow)? (Beat or Rhythm.) Is there Tension? Is it Extreme? (Use extreme poses and balance action and reaction to create tension.) Where is the overlap? Which objects are in front or behind? What are the positive and negative shapes? What is the extreme pose? This usually means the farthermost extension of some pose just prior to a change of direction. Your drawing should show, in a flash, what is happening in the pose. Those extremes are vital to explaining the idea. I’ll paraphrase Stanchfield again: If the extreme pose is missing or diluted, the drawing will deteriorate from expressive to bland or confusing or boring. The Silhouette almost explains “Extreme,” if it is not thought of as a tracing of the outside of the figure. The extreme pose is generated by the forces at play in a gesture (the force and thrust and tension).
This is where I start playing with the basic shapes and setting up the perspective (I use Carapace for perspective guides)
In this version I try and tighten up the figure a bit more
Second Drawing
The Second Drawing is about mass and the solid and flexible parts of the subject. It’s also about expressing the tension of the idea: Model the figure/character/object roughly. Give it weight and mass. (depth and volume.) Use planes to provide solidity. What is the weight distribution? (If it’s a figure – how it balances itself due to what it is doing.) Thrust and Body Language. (It usually requires a limb to be thrust out – a hip thrust, or shoulder shrugged up, or knees apart, or arms out.) Tension and Counterpart. (Whenever one member of the body moves set up a counter move with its counterpart. Tension is captured when one elbow is working against the other or one knee against the other. Feet, hands, hips and shoulders should always be in counter position. Never draw one part of the body without drawing the counter move of its opposite at the same time …. never. Use the solid and flexible parts of the body as the basis for the angles that portray the action.
Blocking in the main shapes in the body.
Starting to look OK
Third Drawing
Sometimes I’ll do a third drawing (or incorporate it into the second). This one concentrates on the line: Define the line and silhouette. Use arcs to define movement (and follow through). Split it up by straights and curves. Straights and curves when used logically can emphasise and clarify the gesture. Straights and curves can be used for “squash” and “stretch”. Further define the direction of the drawing – make all the elements come together to define the idea.
Concentrating on the lines
Fourth Drawing
This one is all about Perspective and Anatomy. Use it. Tighten it. Get your straights and curves to follow it. Use Reference images and get it right. Draw the bones first (in perspective) or a rough skeleton. Get the perspective right now. Then do surface form. Model the muscles or flesh. Focus down on parts. Also textures – what parts have what texture or shading etc.
These are some references I usedGrey scale paintingStarting to Colour
Fifth Drawing
Draw everything again! But this time picking the best bits of all drawings. Concentrate on line quality. Concentrate on tone. Concentrate on light.
Drawing
Finally a few notes about Drawing from Life.
Everywhere you go take a sketchbook.
When you draw try to first concentrate on color.
Then switch to dark and light (tone or texture),
then to masses,
then to the three-dimensional qualities of things near and far.
Now, try to see all of those things at once.
Finally an inspirational quote from Stanchfield: “Carry a sketch book—a cheap one so you won’t worry about wasting a page. Sketch in the underground, while watching television, in pubs, at horse shows. Sports events are especially fun to sketch— boxing matches, football games, etc. Draw constantly. Interest in life will grow. Ability to solve drawing problems will be sharpened. Creative juices will surge. Healing fluids will flow throughout your body. An eagerness for life and experience and growth will crowd out all feelings of ennui and disinterest. Where are you going to get all this energy, you ask? Realize that the human body is like a dynamo, it is an energy producing machine. The more you use up its energy, the more it produces. A work-related pastime like sketching is a positive activity. Inactivity, especially in your chosen field, is a negative. Negativity is heavy, cumbersome, debilitating, unproductive and totally to be avoided. Take a positive step today. Buy a sketch book and a pen (more permanent than pencil), make a little rectangle on the page and fill it with a simple composition.”
It starts with Mental Preparation or Rough Sketching.
Carapace
This is Carapace a tool designed by Epic Games and made available for free. I find it very useful. The link on their website is broken but if you search for it it’s still around. One source you can get it is here: https://www.florianhaeckh.com/blog/carapace
I finally got the game I started in November into some semblance of how I wanted it to look. The running dog animation anyway. Still playing with different backgrounds but this one is sure “fun”.
It took a long time to get all the dog actions done drawing each one by hand and getting a lot of unsatisfactory results. The animation is all “flip-book” style with each frame a different drawing. There were between 70 to 80 pictures for the entire set.
The art was done in gimp with the help from some nice veterinarian manuals on the dog gait.
I mocked up a few transitions from an opening scene to a nice zoom down to playing position.
Then moved between a sedate walk to a running gallop and a little jump. She looks like she’s really flying now!
During this time I also had a big problem with corrupted a scene after playing in the Animator window. Big tip and future post – do not restart Unity if it crashes without taking a copy of your temp directory first. It took me about two weeks to rebuild everything but more on that later.
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.
Hi Gene Goldenberry here – resident imaginary artist and ZuluOneZero. This is how I drew and painted my profile picture in GIMP.
(BTW the audio is from our latest game NumBlocks on the Play Store and was done by our Audio Technician Baron Von Hummbolt (not a real person).
We are currently looking for BETA Testers for NumBlocks:
