How to Create 2D Animations in Unity

Updated on March 11, 2020

Animating 2D objects in Unity is a fairly simple process, though it's not entirely self-explanatory. It's a bit different from 3D animation - which, depending on your character model, can become incredibly intricate and complex - and requires a bit of setting-up before you're ready to turn static sprites into a moving character. Let's see how it's done.

Source

Prepping an Animation

In order to animate a 2D character you first need a sprite sheet. Sprite sheets are long, transparent images that contain all of the sprites you've created in a series of rows and columns. There are many programs you can use to create both sprites and sprite sheets; I personally prefer GraphicsGale, since I dabble in pixel art. Which program you use depends on your personal tastes, as well as the nature of your project.

Regardless of how you go about creating your sprite sheet - which will vary from program to program, so you'll need to go hunting for additional tutorials after this - you want to make sure that the .png your program spits out has a transparent background. Often this entails choosing a single color as a background / erasure color (such as the dark green in the sprite sheet example above) which serves as a reference point for transparent areas in the image. If that background color is showing up in your .png outside of your editing program, you haven't set your transparency properly.

Once you have your sprite sheet you can drop it into the Project view in Unity. I suggest making a folder specifically for that sprite sheet which can also contain every other file associated with the 2D character you want to animate, but that's up to you.

Source

Click on your sprite sheet once it is Unity and you'll bring up the Import Settings in the Inspector. The Import Settings determine how your sprites will look when pulled into Unity, and how you manipulate these settings will vary from game to game. Since I'm using pixel art I want the sprites to look crisp, so I set Filter Mode to Point (no filter) and Compression to None. Pixel art also tends to be very small, hence the name, so I set the Pixels Per Unit to 32 to match the typical size of a sprite art game. This creates a sizable set of sprites to drop into a scene. Hit Apply at the bottom to save your settings.

Regardless of how large you want your sprites to be, I highly recommend you set the Pixels Per Unit to the same size for every piece of art you import into Unity. If your character is 32 PPU, your backgrounds should also be 32 PPU. So should any other characters, enemies, effect animations, and so forth. Setting everything to a different PPU can look very strange if you're not careful.

Regardless of your other settings you will want to change Sprite Mode, right at the top, to Multiple. Then click the Sprite Editor button a few fields down. This will bring up the Sprite Editor window.

The Sprite Editor window allows you to manipulate individual frames and mess with a variety of settings that can produce a wide range of effects. For our purposes, however, we only need to use the Sprite Editor to splice up our sprite sheet. Currently if you pull the sprite sheet into Unity you'll get a GameObject that consists of every sprite on your sheet, and that's not what you want.

Go up to Slice at the top of the Editor. This will pull up the Slice menu, pictured above. Here you can subdivide the sprite sheet into smaller images that Unity will later interpret as separate frames for your animations. How you slice your sheet is up to you, but my preference is to set Type to Grid By Cell Size, and then enter the exact dimensions of a single frame of my sprite. Graphics programs that create character sprites typically work frame-by-frame, so it should be easy to find the dimensions of your frames by checking your graphics program. In this case I created each of my frames to be 64 x 64 pixels, so I enter the Pixel Size to be 64 and 64. This chunks the sprite sheet up into six different frames, denoted by faint white lines that appear in the picture below the menu. If these lines bisect your images at any point then you don't have the correct dimensions.

Hit Apply to save your Slice settings, then close the window and go back to the Project window. If you followed the instructions above, your sprite sheet should look like this:

Each frame can now be pulled individually into your project and used as its own GameObject.

That was a lot of prep, but you're finally ready to animate. On to the next step.

Creating an Animation

To create an Animation in Unity you first need a GameObject. Pull one of the sprites you chose out of your sprite sheet (if you're working with a character it will probably be an 'idle' animation, such as your guy just standing around on the screen) and drop it into the Scene view. Unity will add a Transform and a Sprite Renderer to your GameObject, and you can rename it to whatever you like.

Next you want both the Animator and Animation tabs. If they aren't on your Unity screen by default, you can add them by going up to Window, then scrolling down to Animation. Animations are the individual frame-by-frame sequences that make your character move; Animators are small processing units that tell GameObjects which Animations they can access, as well as allow Unity to trigger Animations from script. You need both to animate a GameObject.

Click on the Animation tab and you'll see a small notification telling you to add an Animator and an Animation Clip. We'll start with an idle pose for our character. Click on the button near this notification and you'll be prompted to create your first Animation Clip; we'll name it 'idle'. Note the .anim file type. All Animation Clips are .anims.

This will also create an Animator component on your GameObject as well as a Controller that stores all of the Animator's Animation Clips. It will appear as a .controller file in your Assets. I recommend moving all of the files you create - Animation Clips and Controller - to the same folder as your sprite sheet for ease of access. You should also create a Prefab of the GameObject you're working on, so drag the GameObject down into the folder in Project view as well.

You're now ready to create an Animation. Once you've clicked on your animatable GameObject you can access a timeline via the Animation tab. This is where you can drop your frames and test the Animation Clip. In this example 'idle' already has the frame we want to use, though if your idle animation had more frames - if he dipped up and down, for example - you would drop them onto the timeline after the initial frame. You can then adjust how quickly or how slowly the animation runs by changing the Samples number from 60 to whatever you like.

One animation done. Let's create a new one. Click on the drop down menu beside the Samples number and you'll see a full list of all the Animations stored in your GameObject's controller. Click Create New Clip and you'll be prompted to, again, create and save a new clip with a specified name. We'll name this one 'walk'.

'walk' requires two frames, in this case, so we take the last two frames on the sprite sheet for this character and drop them onto the timeline. These become keyframes, which help dictate the flow of the Animation Clip. Set Samples to something low and hit the Play button and he'll perform a sort of stumble walk. (Trust me when I say that it doesn't look all that impressive. You're not missing much.) The Animation Clip loops once it hits the first frame without a keyframe, so after taking his second step he'll loop back to the first. So long as this Animation Clip is active he'll now walk forever.

And that's that! You now have a (very basic) animated GameObject in Unity! Using your sprite sheet you can create as many Animation Clips as you like in the same way, allowing your character to attack enemies, open doors, tap their face when they're confused, or whatever else you fancy. Once you get used to the process it only takes a few minutes from completion of a sprite sheet to animating a character. You can also use C# scripts to access animations in specific instances using the following reference:

yourObject.GetComponent<Animator>().Play("yourAnimationName");

If your character gets hit by an enemy, for example, you can code your game to swap to a "damaged" animation, and your character will immediately do so upon striking an enemy, assuming they have the proper Animator attached. You can even store Animation Clips as variables so as to access specific animations without the use of a string.

Advanced Tips

There's a lot more to animating GameObjects in Unity, of course, and covering every base goes way beyond the scope of this article. Nevertheless, let's have a look at a few quick tips to get you started on making and utilizing animations above and beyond the basics:

  • You can create additional effects for your Animation Clips by manipulating Properties. Click Add Property while editing an Animation Clip and you'll see a list of options - usually Transform and Renderer / Sprite Renderer - which expand into ways to change the look, size, rotation, layer, opacity of your GameObject, among other things. You can also set each of these Properties to be different for each keyframe - for example, if you wanted to make your GameObject fade out as part of an animation, you could set its Color.a setting to 0 on the final frame of the animation, causing its opacity to gradually shift from visible to invisible by the end of the Animation Clip.
  • You can also manipulate the Properties of any child objects attached to your GameObject via Animation Clips. Children will appear in the same drop down menu as other Properties, and each can be altered in the same ways as mentioned above. Child objects for the average GameObject can include weapons, shields, items, clothes, eyes, mouths, and plenty else.
  • It is highly recommended that you do not change the Position of a parent GameObject via Properties. Position coordinates apply to Global space in Unity for parents, so if you animate your character to move upwards when performing a jumping animation they will instead move to those specific coordinates whenever you trigger the animation. That said, child objects of a parent use local coordinates, so if you move a weapon or a shield up or down during an animation they will always move relative to the Position of the parent object.
  • Animation Clips are set by default to loop indefinitely. To change this, find the Animation Clip's .anim file in your Project view and check it in the Inspector. Unclick Loop Time. This way the Animation will only play once, halting the GameObject on the appearance of the final frame.
  • Animation Clips are specific to their original GameObject. Consequently, you can't create a generic 'walk' animation and apply it to every GameObject, as it will also carry over the frame from the first Animation Clip and magically transform the new character into the old one during the duration of the Animation. There are more complex ways around this, but for the most part each animated GameObject will need its own set of Animation Clips.

© 2020 Matt Bird

Comments

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, turbofuture.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://maven.io/company/pages/privacy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)