Getting Started with Unity: Unity Animator pt.1
Tags: beginners, unity3d, gamedev
Published: 2020-02-04 19:04:53



When I first started using Unity as a game developer, it took me forever to grasp the whole scripting system and whatever situation was going on in the Inspector. I considered myself more of a 2D pen-and-pencil artist at the time, so I had to overcome a massive learning curve to get through the basic tutorials. Once I got sick of transform.positioning a flat sprite from point A to point B, I decided to take a stab at animating. 

Oh my god, it was hard. It took me a long time to figure out with the help of my professors, which is why I'd like to share my experience with others to help them get started.

In order to keep this post brief, I'll break up the work cycle into chunks by difficulty. Each chunk will lead you to a workable 



## Part 1: Getting things to animate with sprites

**Scope:** Prepare your assets and workstation to get a simple looping animation going. **There will be no coding in part 1.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qkd9yiqj9lunlz29xpmh.gif)


### <u>Step 1: Preparing your assets</u>

In this article, I'll be using **2D sprites** in a **sprite sheet** to create a few separate animations that represent different states. You can achieve the same results with a series of PNG files, but I prefer working in sprite sheets because it's easier to keep organized. If you'd like to convert your loose PNGs into a sprite sheet, there are online resources like [Free Spritesheet Packer](https://www.codeandweb.com/free-sprite-sheet-packer) to generate sprite sheets.

Once your file(s) is in the Assets folder, click on your file(s) and look at the Inspector. We only care about the following settings:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u90z8rlto4lf3l0wpmmu.png)

**Texture Type:** Make sure it's Sprite (2D and UI)

**Sprite Mode:** Single for those using loose PNGs and Multiple for those with sprite sheets

**Filter Mode:** For those working with pixel art, set your pixel mode to Point (no filter). This will ensure you get those crispy edges that other art styles would rather avoid. 

With that done, hit apply!

For those using sprite sheets, you'll need to take an extra step and slice those bad boys up. Don't worry, it takes 3 seconds to do and only involves clicking buttons. 

### <u>Step 1.5: Preparing your spritesheet</u>

Once you've applied your changes, click **Sprite Editor** in the **Inspector**. It will bring up a window with your sprite sheet. Assuming you've created your files properly and each frame is separated by blank space, you can simply hit the **Slice** **drop-down menu** on the top left corner and use the **automatic slicer** to get those bad boys cut. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vq050jsik6ajnbnnmwwd.png)

If your sprites have a lot of irregular blank spaces but is otherwise laid out evenly, you can hit the drop-down menu and slice by **cell count** or **grid size**, depending on how much mental math you want to do.

If your sprites still don't meet my criteria, delete that sprite sheet and make a new one. 

After you hit slice, you should see a blue rectangle outlining each sprite. Cool! Hit **apply**!

### <u>Step 2: Making the animation</u>

This is the easiest step, but can potentially trip up new Unity users later on. If you're working with loose PNGs, select all your PNGs. If you're working with sprite sheets, click the **little arrow** next to your sliced sprite sheet to reveal all your freshly sliced sprites and select them normally. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e876vq2jv4vll9vd6hfk.png)

Then, you click those bad boys and drag them into the **Scene window**. You'll then be prompted to save your animation. I like to save them in an Animations folder, but you can just pop that bad boy anywhere if you don't care. 

Now you'll have a nice new **GameObject** with a **Sprite Renderer** and **Animator** attached to it. Hit play and watch your bad boy go!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6dcb5975yb6zdtz53tvi.gif)

If you go into your **Assets folder**, you'll notice that Unity has actually generated two items, an **Animation** and an **Animator**. There is a major difference between the file types. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f6gt6ovkxbckfj8wx3ze.png)

The **Animation** is simply the animation file that contains the series of PNGs you've just imported. Delete that and you'll need to repeat Step 2 to get the animation back. 

The **Animator** is the puppeteer that helps your animations play during runtime. It keeps track of all your animations for the **GameObject** that it's attached to and can help you switch between animations depending on the state. It is a state machine and is incredibly powerful. However, you only need one **Animator** per **GameObject** for this tutorial, so if you create new animations using my method, you can delete all the other Animators that end up getting created.

### <u>Step 3: Adjusting the animation (intro to the Animator and Animation windows)</u>

Uh oh, is your animation going way faster than you thought? No worries, we'll get right to fixing that! 

First, select the **GameObject** with the **Animator** attached to it.

If your animation is already timed well, your animation may only be a little too fast or slow for your liking. In order to fix that, go to **Window > Animation > Animator**. That will bring up an **Animator** window with a **green**, **blue**, and **orange** box.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ze1mrgq2murh2s029rl5.png)

Select the **orange** box, which represents the active animation, and refer to the **Inspector**. Change the **speed** to something like 0.5 and see how the animation looks. Adjust to whatever suits your project.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wii9ej9xu2czk6pluf53.png)

If your animation is very short, the above technique may not work well for you. When Unity creates an animation, it automatically spreads each animation out by one frame. Since my animation is only two frames long, it'll loop between the two sprites at a constant speed. Not very pretty. To fix that, I need to adjust the **Animation** itself.

With your **GameObject** selected, go to **Window > Animation > Animation**. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/upuc6m8zwaekw2j0za4n.png)

This will bring up the **Animation window** that looks like a typical animation timeline. You'll find your sprites spread out in **keyframes** on the timeline, as marked by a diamond shape. I want my animation to stay longer in the upright position and squish quickly, so I will move the squish keyframe out to frame 6. This way, my standing sprite will play for 6 frames and squish only for one. 

Hit play and see how your animation looks! If you only adjusted your **Animation**, you may still want to change the playback speed using the **Animator**. Simply follow the instructions above and adjust everything to your liking. 

###<u>Bonus Round: Pivot</u>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xxf3z8g3itzkwfu6sp7w.gif)

Uh oh, my dumpling looks like it's crimping. That's because its animation is anchored to the center of its body, rather than its feet. No worries, easy fix!

This time, navigate to the sprite sheet document and open it in the slicer window. You'll notice that when you click on a sprite, a blue bounding box with a blue circle in the center will appear. Simply drag the blue circle to where your character's feet appendage is touching the ground. Repeat for each sprite.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rtoleh293rko03pp55jv.png)

What we're doing here is moving the pivot point to where we want our animation to be anchored. When using sprites with different heights, it will make sure that the anchor will always remain in place so that your character will look like it's standing on the ground.

Protip: you may want to remember the XY coordinate of the pivot point and enter it into the popup for consistency! 

### <u>Step 4: Success!</u>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qkd9yiqj9lunlz29xpmh.gif)


Hurray! You've just created your first animation in Unity! Now you can start making much more dynamic games without writing a single line of code. Mastering this skill is a huge bonus to your toolbelt, especially if you're interested in being a solo dev. 

If you want your character to play more than a single idle animation, keep an eye out for **Part 2 of my Unity Animator tutorial series**! I'll be covering state-based animations, which will require a little bit of coding. If you have any questions or suggestions, leave a comment below or email me at hi@maryli.co! 



### Thanks for reading!