Click here to Skip to main content
15,868,016 members
Articles / Game Development

Mastering Unity 2D Game Development–Animation Curves

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
27 Jul 2014CPOL5 min read 12K   4  
Mastering Unity 2D game development - animation curves

The sample project and code for this snippet can be found here: AnimationCurves.zip

*Edit – seems only 5 minutes since I posted this article and already we find other useful frameworks to assist with using AnimationCurves on their own. This handy little project enables some interesting Editor enhancements to allow copying, pasting and even the extraction of animation steps from a curve. Here’s a nice article that explains it all, fantastic effort!


Animation Curves

masteringunity2d_03_14

(Animation dope sheet Curve view)

Now for those of you who have dabbled, Animation curves are primarily used by the new Animation system, they give you a fine level of control over how editor properties should change over time, either gradually, sharply or according to some style of bezier curve. The curve editor in the animation sheet is very powerful (and keeps getting updated each release!). It basically allows you to:

  • Set an animation over a defined length of time
  • Define key points in time where the animation property will change
  • Organise how the animation will transition through the animation keys, smooth, sharp, uniform, etc.
  • Set events to fire at specific times

There are more but these are the key points. All well and good but did you know you can use this awesome system OUTSIDE of the animation system.

At its core, all the Animation Curve system does is to change a value up or down over time according to a pre-set pattern, this is also referred to as tweening in some circles. So what if you could just make your own curves separate to an animation to control say:

  • A fading cycle – fading in and out of a scene or a menu
  • Controlling how fast or slow a character travels along a map
  • An enemy path in a shoot-em-up

There are many places a tweening system (like LeanTween, HoTween and iTween on the asset store) do for your games.

Note, obviously a single curve isn’t going to completely replace advanced tweening systems like those mentioned above, it’s all a case by case basis, how difficult does your system need to be for each thing you do. No one size fits all!

So, how would you implement this? Actually, very, very easily.

The Script / Editor Property

We start with a property in whichever script you need to access curves from, first create a new script, say called AnimationPath and replace its contents with the following:

C#
using UnityEngine;
public class AnimationPath : MonoBehaviour {     public AnimationCurve myTransitionPath;
}

This gives us a base framework for our curve and some properties to control where an object starts and where it will end up plus a timer.

Curve Property Inspector

If you now save this, and in Unity create a new scene, add a GameObject like a sphere and add this script to it, you will see the following in the editor inspector:

image

The Curve Editor

We have a curve (all on its lonesome without an animation system to call home), clicking on the curve inspector property for the My Transition Path value, will then give you the standalone curve editor:

image

A bit boring as we haven’t configured it yet, if you click on one of the presets at the bottom of the window, we can begin crafting our own curve, or just use the preset itself:

image

From here, you can do most of the tasks that you can do in the Animation Dope sheet curve editor (except add events). You can also save your curve (if you create a pretty tricky one you want to reuse) by clicking on the cog con in the bottom left.

image

Lots of options to choose from but enough about the curve itself, we want to actually use this to do something. Returning to our script, let’s enable the behaviour that when the user clicks or taps on the screen, it moves the object it’s attached to, but doing so according to how we have configured our curve, slow, fast, or in a weird and wobbly motion.

Back to the Script

So with a simple enhancement to the script earlier, we can add some additional properties to track a transition from one point to another with a timer to track the delta:

C#
using UnityEngine;
public class AnimationPath : MonoBehaviour 
{
     public AnimationCurve myTransitionPath;
     Vector3 StartLocation;
     Vector3 TargetLocation;
     float timer = 0;
}

We then add a simple Awake function, to check (remind you) if the Animation curve has been configured and warn you if it hasn’t (always a good practice):

C#
void Awake () 
{
    if (myTransitionPath.keys.Length < 1) 
    {
         Debug.LogWarning("Transition Path not configured");
    }
}

And finally, an update method to check input and transition the GameObject it is attached to from its current location to a point on the screen. In this method, we need to:

  • Check if there has been a touch or click input
  • Convert that touch/click to world coordinates (and zero out the Z value for 2D in this case)
  • Set the start location as the current GameObjects position and the target to the converted touch/click point
  • Finally, Lerp the GameObject from the start to the target based on the current time taken through the transition against the position on the curve

The resulting Update function looks like this:

C#
void Update () 
{
         Vector2 playerInputPosition = Vector2.zero;
         if (Input.GetMouseButtonUp (0)) {
             playerInputPosition = Input.mousePosition;
         }
         if (Input.touchCount > 0) {
             playerInputPosition = Input.GetTouch(0).position;
                }
         if (playerInputPosition != Vector2.zero) {
             timer = 0;
             StartLocation = transform.position;
             TargetLocation = Camera.main.ScreenToWorldPoint
                  (new Vector3(playerInputPosition.x,playerInputPosition.y,0));
                    TargetLocation.z = 0;
         }
         if (TargetLocation != Vector3.zero && 
              TargetLocation != transform.position && TargetLocation != StartLocation)
         {
             transform.position = Vector3.Lerp(StartLocation, TargetLocation, 
                                  myTransitionPath.Evaluate(timer));
             timer += Time.deltaTime;
         }
}

The line to take notice of is the following line:

C#
transform.position = Vector3.Lerp
                     (StartLocation, TargetLocation, myTransitionPath.Evaluate(timer));

Where we use the Evaluate function of our configured curve to denote the amount of movement the GameObject should move (in this case) for the current frame. This results in the following motion: (please be gentle, this is my first animated GIF, got to be in with all the cool kids these days):

AnimationCurves

So as you can see, depending on how far the sphere has to travel, the power curve is quick to begin and slow to stop but steady in-between. By just altering the curve, we can alter the behaviour without changing any code.

Extra Credit

Why stop there, how about using two curves to create a path, just for fun I created sine and cosine curves and applied them to the sphere’s transform as follows:

Sin Curve:

image

Cosine Curve:

image

Script:

C#
using UnityEngine;
public class CirclingSphere : MonoBehaviour {
    public AnimationCurve sinPath;
    public AnimationCurve coSinPath;
    float timer = 0;
    void Awake () {
        if (sinPath.keys.Length < 1 || coSinPath.keys.Length < 1) {
            Debug.LogWarning("Transition Paths not configured");
        }
    }
    void Update () {
        timer += Time.deltaTime;
        var pos = transform.position;
        pos.x = sinPath.Evaluate (timer);
        pos.y = coSinPath.Evaluate (timer);
        transform.position = pos;
        if (timer > 2) { timer = 0;}
    }
}

Resulting in the following animation:

AnimationCurvesCircle

Granted the above example would be a lot simpler to do in code, it’s just a more detailed example.

Just a little extra fun but you get the idea, there are numerous possibilities for when you want to configure a curve to animate or lerp a value within a range.

Doesn’t have to be smooth, you could end up with something like this:

masteringunity2d_06_09

And goodness knows what that could do with that. Open-mouthed smile


We Hope You Enjoyed the Show

I do hope you like this little snippet.

The sample project and code for this snippet can be found here: AnimationCurves.zip

Be sure to check out the AnimationCurves editor extensions here and the write-up about the extensions here! Fantastic effort, community!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect ZenithMoon Studios
United Kingdom United Kingdom
Long-time game developer / IT maniac.
By day I architect, design, build and deliver enriching Mixed Reality solutions to clients, bringing the work of AR/VR to light in new and interesting ways, by night I Masquerade as the Master Chief of ZenithMoon Studios, my own game development studio.

At heart, I am a community developer breaking down lots of fun and curious technologies and bringing them to the masses.

I'm also a contributor to several open-source projects, most notably, the Reality Toolkit and all the services provided by the Reality Collective, The Unity-UI-Extensions project, as well as in the past the AdRotator advertising rotator project for Windows and Windows Phone.

Currently, I spend my time fulfilling contracts in the Mixed Reality space (primarily for an XR experience firm called Ethar), writing books, technically reviewing tons of material and continuing my long tradition of contributing to open-source development, as well as delivering talks, but that goes without saying Big Grin | :-D

Mixed Reality MVP, Xbox Ambassador, MS GameDevelopment Ambassador & Best selling author:

[Accelerating Unity Through Automation](https://www.amazon.co.uk/Accelerating-Unity-Through-Automation-Offloading/dp/1484295072/ref=rvi_sccl_3/262-0817396-1418043)
[Mastering Unity 2D Game Development] (https://www.packtpub.com/game-development/mastering-unity-2d-game-development)
[Unity 3D UI Essentials] (https://www.packtpub.com/game-development/unity-3d-gui-essentials)

Comments and Discussions

 
-- There are no messages in this forum --