Creating a game sprite: Simple keyframe animation

13. September 2013

 

In this section we look at how to do key framed animation.  What exactly is keyframe animation?  In simple terms, you define a few (*cough* key *cough*) frames of animation ( by posing or positioning your model ) and then the computer fills in the missing animation.  It’s exceedingly handy as it greatly simplifies the animation process ( it would really suck if you had to update every single movement on every single frame! ) and it also reduces the amount of data you need to store.  Fortunately, except for a few gotchas, keyframe animation is pretty simple in Blender.

 

Let’s jump right in.

 

Welcome to the Timeline

 

First thing we want to do is bring up a Timeline window:

image

 

The timeline presents the animation in your scene over time.

image

 

As you add keyframes, they will show up on the graph in Yellow.  The currently selected frame is shown in green:

image

 

Notice how the legend or lower axis ( numbers across the bottom representing frames ) is much smaller in the second shot?  That is because you can affect the granularity using the scroll wheel on your mouse.  This is handy if you are working a lot less than the default 200 frames, or if you are creating an animation that is substantially longer.  You can also can pan left and right holding the middle mouse button and dragging.

 

Let’s start by creating about the simplest animation possible.  We want our sprite to rotate 360 degrees around the Y axis, representing a banked roll.  To do this, we will create a total of four keyframes, one every 5th frames, one at the first frame and one at the last.  We want our animation to take a total of 20 frames, so start by setting the end frame to 20.

 

Click in the end frame and enter 20.  This is a dual function button, in the you can use the left or right arrows to increment the value or click in the center to enter a value.

image

 

You will notice the light gray portion of the timeline has shrunk to only include the active animation duration from frame 1 to frame 20.

 

Setting Keyframes

 

 

Now let’s set our first frame.  We actually want to create a key at frame 1 of the jet in the position it is currently in. 

 

First we want to make sure we are at Frame 1 in the timeline.  You can accomplish this by either clicking at the 1 position in the timeline, or by typing 1 in the currently selected frame box ( beside the End frame entry in the menu bar ). 

 

Once we’ve moved to position 1 on the timeline, we want to create a keyframe for our jet model.  To do so, go into 3D View, in Object mode, and select the Jet model.  Now hit i.  This will bring up the Insert Keyframe Menu:

image

 

You need to tell it what information you want to keyframe on.  In this case, it is only the rotation that we are changing, so we select Rotation.  If you were instead translating the model you would select Location.  Of course, if you were translating, rotating and scaling as part of your animation you would select LocRotScale.  Again, in this case we just want Rotation.

 

Now advance to frame 5 in the timeline.  You will notice in the 3D view, as you advance frames in the timeline, it will be represented in the 3D View in a label at the bottom left corner of the window:

image

 

… yeah, I really should have renamed it to something other than Cube at this point eh?

 

Anyways, once you are at Frame 5, in the 3D view bring up the properties panel, and set the Y rotation to 90 degrees:

image

 

When performing rotations for animation, it is very important you set them here, as if you rotate by hand it will often set it to –90 when you in fact meant 270!  This is only applicable for rotations, for translation and scaling, feel free to use whatever method you want.  Oddly enough, this behaviour varies from version to version.  On my Mac if I perform 3x 90 degree rotations, the Y value gets set to 270 ( what we want ), while on my Windows install, it gets set to –90 ( which we certainly dont want ).  So, better safe than sorry!

 

Now that we have updated the position, Press i and set a rotation key.  Keep in mind, you need to perform the rotation BEFORE you set the key.  Also, if you make a change later, you need to set another key.  So if you say… changed Rotation to 89, the change would not take effect unless you set a new rotation key!  Dont worry, keys will simply overwrite the old one.

 

Notice how the rotation field background is now yellow?

image

 

This shows you that this value has a keyframe controlling it.  If you go to any frame in between ( such as frame 3 ) you will see that it is shown in green:

image

 

This indicates that it is an interpolated value… or in other words, the computer calculated it based on the keyframe before and after it.

 

Now repeat this process.  Go to frame 10 in the timeline, set Y Rotation to 180, press i and select rotate.  Now advance to frame 15, rotate to 270, set a keyframe, then finally advance to frame 20, rotate to 360 then set another key.  Congratulations, your very first animation is complete!  Press the Play icon on the timeline and you should see a smooth ( if somewhat fast ) animation of your jet rotating.

 

RotateAnimation

 

Of course, there is the possibility you could make a mistake and want to get rid of a keyframe.  If that is the case, go to the frame you want to remove the keyframe from in the timeline.  Then in 3D view with the object selected chose the Object menu –> Animation->Delete Keyframes…  Then when prompted click Delete Keyframe.

image

 

If you instead want to get rid of all keyframes for the selected object, select Clear Keyframes… and once again, click the confirmation prompt.

 

Controlling animation playback rate

 

Now, the playback may be wayyyyy higher than you want it to be when you click the Play button in timeline.  This is because by default Blender is set up to play and render animations at 24 frames per second.  You can alter the playback speed, but it may not be where you expect it to be.

 

To change the playback speed, in the Properties panel select Render:

image

 

Now scroll down and locate Frame Rate and select Custom:

image

 

A new option will be made available allowing you to set the framerate to whatever you want.  Here for example it is set to 12FPS

image

 

Now when I play in timeline ( or if I rendered to a movie ), it would play at half the previous speed.

 

 

A little more control

 

Sometimes you might find that you want a bit more control over how the frames are calculated between keyframes.  Fortunately, exactly that functionality is available.  You can take fine control of your animations using the Graph Editor

image

 

The user interface is initially pretty daunting, but isn’t all that bad actually.

image

 

Basically the axis on the left shows the value ( in this case, rotation in degrees ), while the axis across the bottom illustrates the frames in the animation.  You may notice the circle on each end of the axis, they can be used to increase or decrease the range of values displayed.  Simply click and drag the circle on either end to expand or contract the axis range.  The green line represents the amount of rotation over time. 

 

Using the control handles for each point on the curve you can manipulate how the rotation will occur between key frames.  Simply right click a keyframe ( black dots ) to select it.  Then right click a handle and move the mouse to alter the curve.  Once you've positioned it like you want, left click to commit.  Right clicking again will instead cancel the change.

 

For example, the following change:

image

 

Would change the rotation, so that for the first couple frames there would be almost no rotation at all, then it would quickly rotate up to a total of 90 degrees by the next keyframe at position 5.  You simply use F-Curves to fine tune the results if required.

 

If you take a look at the Key menu, you can see you can control almost all aspects of keyframing in the Graph Editor including creating and deleting them.

image

 

Also remember, right now we are only doing a single action ( rotation ) on a single axis ( Y ).  In a more advanced animation, there would be many more lines, all colour coded with the legend on the left hand panel.

 

In video form

 

I have a feeling that was a bit difficult to follow in text only form, so I’ve recorded a video going through the exact process I just described.  There is no voice over or description beyond what was already mentioned above.  So, if you had trouble following what I just explained, watch the entire process in action.  Otherwise there is nothing else new in the video.

 

 

Next we move on to using the camera.


Click here for the Next Part

 

Art ,




Looking for a Java book recommendation for experienced developers getting up to speed

12. September 2013

 

So after finishing up my ongoing Blender tutorial series, I intend to take a closer look at LibGDX and hopefully launch a new tutorial series.  This however presented a bit of a challenge to me.  You see, although I have experience with Java, it’s pretty out of date.  Since the release of C#, I’ve done very little work in Java other than some dabbling here and there.  So my knowledge is certainly out of date.  For example, when I last seriously programmed in Java Annotations ( ie @Override ) didn’t exist and the language didn’t yet have generics.

 

Obviously I need to get up to speed with modern Java before I start writing some truly embarrassing code.  This however presented a terrible problem for me.  Most texts are either targeted towards complete beginners or are more advanced and targeted at a very specific domain or technology.  The beginners texts make me want to scratch my eyeballs out, as after a decade of working in C#, and a few years of working in Java before that, reading about what a class is, or what a private variable does is a little…  behind me.  On the other hand, the little tidbits of information I need ( about what’s new ) are buried in these descriptions. 

 

I’ve been looking for an ideal book and I haven’t found one.  Something along the lines of Effective C++ or JavaScript: The Good Parts would be absolutely ideal.  Both of those books present best practices for experienced programmers in the modern usage of each language.  Both are incredible reads and will change the way you program.  Sadly, I haven’t found a Java equivalent yet.  There are a couple books I’ve tried.

 

The first was Java: The Good Parts.  By the title, I was really expecting something like the JavaScript book I mentioned earlier.  I will say, I do recommend this book, but it really isn’t what I am looking for.  The author Jim Waldo has been at Sun ( er, Oracle ) a very long time and has a deep insight into the Java language and how it evolved.  It answers a lot of the “why the hell did they do this???” questions you might have about various language features.  That said, the target audience seems a bit confused, at times covering brutally simple tasks in detail, like it was aimed at a beginner.  Then jumping into a topic at a more advanced level.  Basically this means I have to read through a lot of stuff I already know quite well.   I don’t regret reading it though, again, it gave some pretty good insight behind the curtain of language development.

 

Then I went with Learning Java 4th Edition as it was one of the most up to date releases ( July 2013 ), was reasonably well reviewed on Amazon and Safari and seemed to be partitioned nicely into beginner and more advanced topics.  At the end of the day, I guess I am resolved to have to go through all the beginner stuff to pick up what’s changed.  Oh well I guess.

 

So, to any of you Java developers out there… are there any books along the lines of what I am looking for?  A text that focused on writing modern Java code.  That illustrate what parts of the language are cruft and what various best practices are?  A text aimed at a non-beginner?  If there is a book you recommend, I would love to hear it!.

Programming ,




Creating a game sprite: Texture mapping Part 5: External texture editing

11. September 2013

 

Now we are going to export our texture so we can edit it in an external image editor.

 

First in the image editor, make sure Mode is set to View.  ( We changed it to paint in the last section ).

 

In UV Window, Select Image-> Save As Image

image

 

Pick a filename and location and then click Save As Image:

image

 

Now we can export the UV layout to help us with the painting.

 

In 3D View, switch to edit mode and select All ( A ).

In the UV window select the UV menu, then Export UV Layout:

image

 

Once again, pick a directory and location for the saved image file.  I personally went with ReferenceImages5UVLayout.png.

 

Now load your exported texture file in your image editor of choice.  You have the option of registering a program that will be opened by Blender automatically if you prefer, then you can simply select Image->Edit Externally.  For now we will simply open it manually.

 

In this case I am going to use the GIMP as the editor.  The GIMP is a freely available 2D graphics package.

 

Here is our texture loaded in GIMP. 

image

 

Now let’s load the UV Layout.  In the GIMP select File->Open As Layers

image

 

Select the file you saved the UV layout to.  Now it should appear like so in GIMP:

image

 

Now we draw the additional texture details on our texture.  Just be certain you have the right layer selected when you edit:

 

image

 

Drawing textures is an art in and of itself that I can’t cover here.  Frankly, I am not very good at it either.  Now I add some graphical details to the image and end up with something like this:

 

Untitled 3 2 (6)

 

… yeah, I’m no artist!  Don’t worry though, in sprite sheet form it will look just fine.  Just make sure when you export the image from your image editor, the reference layer ( the wireframe ) isn’t visible.

 

Once you are done editing your texture, assuming you didn’t change the location or filename, in the UV/Image Editor window, simply select Image->Reload Image or press Alt + R.  If you did change the file name, instead select Image->Replace.  Keep in mind you also have to change the texture name in the Texture panel if you renamed it.

 

image

 

As a 3D model though, it could certainly use a bit of work.  It’s a matter of adding more details to the texture, as well as implementing normal maps to give it some depth, something we will hopefully talk about later.  You can also greatly improve rendering with various texturing modes ( specular, bump, etc ) which only will work within Blender.  ( Wont work when exported to a game engine ).  This is also something we will hopefully talk about in more detail later.  Texturing adds a hell of a lot to your models quality, so it’s certainly a skill you should take some time to develop ( unlike me! Smile )

 

image

 

 

Tips

Often you will find yourself working in the UV Window and wanting to figure out just what @#$@$#ing Polygons you are working on.  Fortunately there is an easy way to do this.  In the UV window, make sure you are in View ( as opposed to Paint ) mode.  Then click the Keep UV and edit mode mesh selection in sync icon:

image

 

Now you can select stuff in the UV window:

image

And in the 3D View, the corresponding items will be selected.

image

 

 

Another thing you might have noticed is how incredibly annoying the layout is to paint on.  The UVs are set how Blender thinks they fit best, not necisarrily how you think they should be arranged to paint on.  You can however move the UVs however you want.  Unfortunately every single time you Unwrap again, the UV layout changes you have made will be reset.

 

Say for example we want to paint our cockpit in it’s natural direction.  We could then move the cockpit UVs into a position that is more appropriate to painting ( using G(rab), R(otate) and S(cale) like normal 3D editing ).  Like I’ve done here by moving them to the right and rotating 90 degrees:

image

 

This will be a great deal easier to paint.  Unfortunately if we go to 3D View and choose Unwrap:

image

 

Well, that’s annoying!  Fortunately there is a solution.  If you want to have a custom UV layout, you need to “Pin” them in place.  Then when the model is Unwrapped again, Blender knows where to put it.

 

Select the outermost two vertices and press P to pin them in place.  The selected value will turn red(ish) when selected, like so:

image

 

Now the next time you Unwrap the texture, these UVs will be pinned in place.  Of course, you could just select and Pin all vertices in place, but you are greatly handicapping Blender’s ability to deal with UV map changes.  Keep in mind too that adding a Seam will automatically cause an Unwrap. 

 

Final tip.  Notice the ugly line across the tail of the plane?

image

What causes this?  It’s the texture seem.  Basically make sure the edges of your textures where you cut a seam have a matching seamless colouring on both sides, or you will end up with an ugly artefact like this.  A few seconds with a Blur brush would solve this problem.

 

The astute eyed may also notice that the text is mirrored on the mirrored half of the model:

image

 

This is a side effect of using the mirrored modifier.  You’ve got a few options here.  1 – apply the modifier, to form a single mesh and texture each side manually ( nah! ).  2- Switch to a symmetric number like 808  3- live with it.  I’ve chosen 3.

 

Next up we will look at animation.


Click here for the Next Part

 

Art , ,




Creating a game sprite: Texture mapping Part 4: Painting in Blender

9. September 2013

 

First, let me start by saying this step is completely optional!  Blender has integrated texture painting functionality, but if you prefer to work entirely in a 2D application like GIMP or Photoshop, that is completely your option.  That said, Blender’s painting abilities are pretty solid and are a great way to block in colours rapidly. 

 

You enter Texture Painting mode the same way you enter Object or Edit mode, in 3D view.  Just pull down the mode dropdown and select Texture Paint.

image

 

Once in Texture Paint mode, hit T to open up the Tools panel.

 

Clicking the Brush icon allows you to select between the various brushes:

image

 

While the controls right below the brush allow you to select the active color, set the brush strength, radius and blending mode ( as in colour blending ):

image

 

 

There is a ton more functionality in there, such as painting with a texture pattern, changing brush stroke styles, etc… but we will just be using the painting tools to block in our basic colours.  Most jets have a grey on grey camouflage colour and that’s what we are going to go with here. 

 

Let’s start with our base color, from the colour picker, select a light grey colour.  Then set the radius to a large value and keep strength at 1 ( full ).  Like so:

image

 

Now you should see a very large circle over the cursor in 3D View.  This represents the radius of the brush.  Left clicking will paint with the current brush:

image

 

Now, let’s look at something rather cool.  As you paint in the 3D View, it will automatically update in the UV window:

image

 

Even cooler, you can paint in the UV window and it will update in the 3D view.  To paint in 2D in the UV window, simply click the Mode dropdown at the bottom of the UV/Image Editor window and select Paint.

image

 

Now you can paint in the UV window!  Keep in mind though, colour and brush selections are still done from the Tools panel of the 3D view.

 

Now I am just going to paint the entire Jet in our light grey colour.  Keep in mind you will have to rotate and zoom the camera around to get in every nook and cranny while painting.  Fortunately you can easily see from the UV windows if you missed a spot.  You of course could just paint in the 2D layer, but then you don’t get nice crisp edges in the texture map.

 

Here is the fully painted jet:

image

 

Next I simply vary the grey-ness of the brush and randomly layer colours to get a gray on gray camo pattern.  I then pick a slightly darker gray and colour in the cockpit area.

 

image

 

That’s it for painting in Blender.  Next up we will finish the details of our texture in an external 2D graphics package.


Click here for the Next Part

 

Art , ,




Creating a game sprite: Texture mapping Part 3: Applying a texture

6. September 2013

 

This one is short and sweet.  Until this point, we haven't actually applied a texture to our model, we’ve instead been using a reference grid image.  We can re-use the same image file as our texture.

First in the Properties window, we click the Textures tab:

image

 

Next we create a new texture, simply click New

image

 

Now we drop down the Type dialog and select Image or Movie:

image

 

Now click the Browse Image button:

image

 

Now select our reference image:

image

 

Now scroll down to the mapping section and select Coordinates, then pick UV

image

 

Pull down Map and select our UVMap:

image

 

Your texture is now applied.  If you render (F12), you should see:

image


Click here for the Next Part

 

Art ,