(Unity) HOWTO : Do Animations (2D Sprite multi-image) Animations with uScript

If you followed the “HOWTO : Add 2D Characters to a Scene” tutorial, you probably have a 2D character in your game, like this–

This character has only one image that represents her– a standing idle pose. What if we have more images representing different poses, and wish to animate the character?

Kinda like this!

This could be…

  • A series of running poses.
  • A series of idle poses (breathing, or tapping one’s foot).
  • A series of cheerful greeting poses.
  • etc.

In order to animate our character, we will first need to understand why it looks the way it does.

The SpriteRenderer Component

Recall from our previous uScript tutorial that “Components” allow a gameobject to do or be different things. You may find out what components a gameobject has by clicking on it, then looking at the inspector view on the right–

If we click on one of our 2D game objects, we’ll see a new type of component–

The SpriteRenderer!

This component allows a gameobject to…RENDER a SPRITE (a sprite is what game developers call a 2D image).

Look closely among the SpriteRenderer’s properties (there are quite a few!) and you’ll see a “Color” property. Changing this allows us to give our sprite a unique tint–

There is another useful property that SpriteRenderer has– its “Sprite” property. We can use this property to change what image the SpriteRenderer renders–

If we wanted to create an animation, we could do so by rapidly, repeatedly changing this “Sprite” property among a few different images. If we want our game to execute this Sprite-Changing logic, we’ll need to use uScript!

The uScript Solution

If you stop and think about it, the logic we want is very simple. In fact, it’s familiar to the square-movement you created for your previous uScript assignment–

  1. When the game Starts…
    1. Wait for a quarter-second
    2. Change the SpriteRenderer’s sprite property to the first image.
    3. Wait for a quarter-second
    4. Change the SpriteRenderer’s sprite property to the second image.
    5. Loop by going to step “a” above.

This logic will create a loop that causes the sprite to change between two images every 0.25 seconds! In other words, we’ll get this–

We can add this logic to our game using uScript. In particular, the following graph will work. Look at it closely, following the lines from node to node. Can you see how it works?

While you have seen the “Graph Events” node and the “Delay” node in your previous work, you have not see the “Set Sprite” node yet, nor have you seen the “Sprite” variable or the “SpriteRenderer.Sprite” node.

The Sprite variables can hold a sprite for us (AKA, our images). We can create a Sprite variable by searching for it (we won’t find it in the right-click variable menu)–

Once we’ve created a new sprite variable, remember to give it a name and make it public so that we can “fill it” with our image under the component–

(Remember that you need to save your graph and add the component to your gameobject before it will show up like this).

In order to change the “Sprite” property of our SpriteRenderer component, we need to access it somehow. This can be done using this node–

You may find this node by searching for “SpriteRenderer” in your toolbox, finding its “Properties” menu…

…And then finding the “Sprite” property.

Things to Think About–

  • The graph above supports any two images, and allows us to control the interval between them. What if you needed 3 images? How would you change the graph to support 3?
  • What if you wanted the animation to stop? How could you accomplish that? (How about a public boolean (true/false) variable?)

Updated: