Sunday, October 11, 2015

How to add a 2D Animation in Unity in 3 Steps

Once upon a time I was worried about creating animations in Unity. Well that was silly of me; animations are really easy! At least the developer part. The artists have the challenge. So let's quickly learn how to create a simple animation in Unity. This is assuming you're using Unity 5 or higher.

Step 1) Prepare Assets

Let's assume you have some amazing images ready to go. The easiest way to get started is to have each frame of your animation exported as an individual image. Have them named something that will list them numerically in an appropriate order for ease of use, like player-walk-1, player-walk-2, etc. Drag those image files from your computer to Unity, in the area labeled "1" in the above picture. Click to get a higher-res view.

Next, create a Canvas Image (GameObject > UI > Image). You can also create a Sprite with a Sprite Renderer (GameObject > 2D Object > Sprite). I like using the Canvas, but it's up to you. Select your object in the Hierarchy, then drag one of your images from the Project window (1) to the object's Source Image (2). It doesn't matter which one, this will act as a placeholder.

If you are using the canvas, click "Set Native Size" (3) to automatically adjust the object's dimensions to fit your sprite. You can then scale it to your desired scale.

Finally, the important part. With your object selected in the Hierarchy, click on the Animation tab (4). If you don't see it, click Window > Animation. NOT Animator. That's a little different.

Step 2) Create the Animation

Simply click on "Create" to get started. Save your animation somewhere sensible (I keep mine next to the image assets. Creating a separate folder for animations might be wise, too.)

Next, drag all of your images from the Project Window into the Animation window. In the top left you will see a number field labeled "Samples." This will essentially adjust your animation speed. It also adjusts what your Animation window looks like, so for this example, I've set it a low number of 4. When it's this low, you can easily see which image is being played at what time. It's simply moving from one image to the next.

Keep in mind that the Animation window cares which object is selected in the Hierarchy. If you don't see your animation, make sure you have your desired object selected.

Step 3) Edit the Animation

The animation window should look slightly familiar to anyone who has ever worked with keyframes in Flash or video editing. I only have 3 source images, but I need a fourth keyframe to make the animation look smooth. My little character's feet should move from the back - to the middle - to the front - then back to the middle before repeating. So, I click one of the diamond shaped keyframe icons (1) above the image, copy it by selecting Edit > Copy or hitting the shortcut, then Paste it on the fourth line (2). Now we've got 4 frames for our little animating dude that loop automatically. Hit the Play button to see it in action on your Game scene!

There is, of course, much more we can do with Animation and the so far unused Animator. Behind the scenes, you can see that when you click on your object, an Animator component has been added. If you select the Animator tab, you'll notice that the Animator has automatically set your new animation to play from "entry" - or whenever the scene starts with the object in it. The Animator lets you add different animations to the same object to play at different times, but for now, we're going to keep it simple.

Congratulations! You now know how to animate in Unity 2D.

No comments:

Post a Comment