2D Animation

Contents

• 2D Animation

  • Create a time-based animation in Aseprite

  • Import a sprite sheet in Unity

  • Create animated character frames in Aseprite

  • Get character working with idle animation in Unity

In this tutorial we’ll work on animating sprites.

Create a time-based animation in Aseprite

Create a folder for your animation.

Follow one of these tutorials:

Source: SadFace-RL Fire Animations

Source: SadFace-RL Water Animations

Work on using:

• Keyboard shortcuts

• Select tool

• Frames

Export a sprite sheet.

• File->Export Sprite Sheet

• Output->Output file

Import a sprite sheet in Unity

Import a sprite sheet and slice it like we did before.

• Drag the first image onto your scene.

• Click Window…Animation

• Click your object, you should see an option to create an animation and controller from it.

• Drag images onto the timeline

• Too fast.

• Drag out the frames, slow it down

Source: SadFace-RL Animation, getting started

Create animated character frames in Aseprite

Source: SadFace-RL Characters, the human male

Source: SadFace-RL Animation, the walk cycle

Get character working with idle animation in Unity

Here’s a video that covers what we are doing:

First, go ahead an import your character animations, then slice up the images.

If you want to replace a character you already have with the animated sprites, (recommended) you can replace the character’s texture by dragging the sprite image to the proper location.

Make sure your program still works ok.

Create an idle animation for your character like we did before.

Make sure that works. Now we need a clip for walking/running. Add a new clip from the Animator tab:

Show how to play clip, and change clip.

See how both clips show up in Animator.

Add a parameter, and transitions:

Update code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;


public class MyAnimatedCharacterController : MonoBehaviour
{
    public int score = 0;

    Rigidbody2D body;


    float horizontal;
    float vertical;
    float moveLimiter = 0.7f;

    public float runSpeed = 5.0f;

    public AudioSource sound;
    public AudioSource scoreIncreaseSound;
    public AudioSource scoreDecreaseSound;

    private SpriteRenderer spriteRenderer;
    private Animator animator;

    void Start()
    {
        // Get the rigid body component for the player character.
        // (required to have one)
        body = GetComponent<Rigidbody2D>();
        spriteRenderer = GetComponent<SpriteRenderer>();
        animator = GetComponent<Animator>();
    }

    void Update()
    {
        // Get our axis values
        horizontal = Input.GetAxisRaw("Horizontal"); 
        vertical = Input.GetAxisRaw("Vertical"); 
    }

    void FixedUpdate()
    {

        // If player is running diagonally, we don't want them to move extra-fast.
        if (horizontal != 0 && vertical != 0) // Check for diagonal movement
        {
            // limit movement speed diagonally, so you move at 70% speed
            horizontal *= moveLimiter;
            vertical *= moveLimiter;
        }

        if (horizontal > 0.1)
            spriteRenderer.flipX = false;
        else
            spriteRenderer.flipX = true;

        // Set player velocity
        body.velocity = new Vector2(horizontal * runSpeed, vertical * runSpeed);
        animator.SetFloat("HorizontalSpeed", Mathf.Abs(horizontal));
    }

    void OnTriggerEnter2D(Collider2D colliderEvent)
    {
        // Did we run into an object that will affect our score?
        ScoreScript scoreObject = colliderEvent.gameObject.GetComponent(typeof(ScoreScript))
                                  as ScoreScript;

        if (scoreObject != null)
        {
            // Yes, change the score
            score += scoreObject.points;

           
            // Destroy the object
            Destroy(colliderEvent.gameObject);
        }

        // Did we run into an object that will cause a scene change?
        SceneChangeScript sceneChangeObject = colliderEvent.gameObject.GetComponent(typeof(SceneChangeScript))
                                              as SceneChangeScript;
        if (sceneChangeObject != null) {
            // Yes, get our current scene index
            int currentSceneIndex = SceneManager.GetActiveScene().buildIndex;
            // Load up the scene accourding to the sceneChange value
            UnityEngine.SceneManagement.SceneManager.LoadScene(currentSceneIndex + sceneChangeObject.sceneChange);
        }
    }
    void OnGUI()
    {
        // Dispaly our score
        GUIStyle guiStyle = new GUIStyle(GUI.skin.label);
        guiStyle.fontSize = 32; //modify the font height
        GUI.Label(new Rect(10, 10, 250, 50), "Score: " + score, guiStyle);
    }
}