Image of the finished unity 2d tutorial

This tutorial will help you create an animated gold coin like the one you see above.

I recently updated to the latest version of Unity3D. As most Unity 2D game devs might already know, version 4.3 of Unity 3D brought a lot of features specifically designed for 2D game development.

I’ve just finished Aqua Pearl Blast and Cherry Triple Jump, two games that I made with prior versions of Unity 3D. While getting to know the new 2D-stuff for my next game, I thought I’d write short and (hopefully) easy to understand Unity 2D tutorials about some of the new 2D features and how I use them in my upcoming projects.

In this first tut you’ll learn how to create a simple pixel art coin with sprite animation. 

 


1. Creating the Coin

First we’ll start by painting three states of the pixelart coin that give the effect of it rotating around its own axis. Use the graphics software of your choice. When you’re done, you can simply save the three images in one PNG-file; the images will be sliced into individual sprites within Unity – one of the new Unity 2D features for which in the past I had to use plugins like the awesome 2D Toolkit from the Unity Asset Store (I’m still using it in some cases, but more on that in another blog post).

Just move the PNG-file to the Unity-project’s asset folder and we’re done with this part.

 

photoshop_coin_image

Very simplified three states of a coin-rotate-animation created in Photoshop.


2. “To Unity and Beyond!”

When you open the Unity project and select the coin-PNG now, you’ll see that there is a new Texture Type called “Sprite”. This is the one we’re going to use to import our coin animation PNG. Because we saved those three states in one file, we’ll use the “multiple” in the Sprite Mode setting. This gives us the option to open the new Sprite Editor in which we can slice the PNG into three individual sprites.

unity2d_import_settings

Set the Sprite Mode to “multiple” and slice the sprite in the Sprite Editor.

After hitting the “Apply”-button in the Sprite Editor, we should now see that our coin-Sprite is parenting three sub-sprites. We’re going to use those for the creation of the Unity 2D animation.

unity3d_coin_sprite

Slice the main coin sprite into three individual parts and they can now be found as children of the coin-sprite.


3. Building the Animation

For this last step we’re going to use the Unity animation window, so if you haven’t opened it yet, simply go to Window/Animation and we’re ready to start. Let’s start by adding an Empty GameObject to the scene and just have it selected. In the Project Inspector we’ll now select the three individual coin-sprites and drag and drop them onto the animation window. This will automatically open the popup window in which we’re asked to save a new animation. Just call it ‘coinAnim.anim’ and save it wherever you like.

 

unity2d_coin_animation_window

Drag and drop the coin-sprites onto the animation window and adjust the animation speed by changing the Samples-value.

After creating that new animation file, we’ll see the three coin-sprites in the animation window’s timeline as well as an Animator Component having been added to the empty coin GameObject. Because the animation will play with a default speed of 60 samples per second which is way too fast, we’ll have to adjust that speed to a lower rate like 10-12 images per second.

As the final step we add the same sprites to the timeline, this time in the opposite order to get that rotating effect. Just play around with the Sample rates and the time spacing until you feel happy with the result. We now created a GameObject with a looping animation on it, ready to for example be turned into a prefab and used wherever we like inside our game.

 

Finished loopable coin animation.

The finished, loopable coin animation.


That’s it! I hope you found this short tutorial helpful, feel free to comment if you have any questions or suggestions for the next Unity 2D tutorials!