Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
part of the launch of my latest Unity 3D book, I've published some snippets from the book on some interesting subjects. The first of these is in the area Animation Curves.
In the run up to the launch of my first published title (a book this time) I’ve done some short snippets from some of the many exciting things you will learn within its pages.
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 fine 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!
The book was an interesting challenge for me and is written with the same flair I use within my blog, I have always felt it’s better to educate and show you, not only how to do things but also why you should do it one way over another, plus if there are any alternatives, I’ll point them out. As a reader you should be informed about your choices (and then make your own mind up 
).
Through its pages you will build an RPG game framework which you can then extend and make your own, the aim is to give you enough hints, tips and help to build your own finished game.
Here’s what you should expect from the title:
A run through the new improvements in Unity 4.3 or 2D game development (and everything else in case you missed it)
A deep dive in to the new Sprite system and the Animation improvements (the first of my chapters that got so big it had to be split in twain)
Working with 2D camera’s, scenes and sprite layering plus some advanced coding techniques which lead up to building your own RPG conversation system.
We cover building a map and exploration system with the eventual conclusion of running in to some nasty goblins who have a really mean steak
If shopping is your thing, you’ve come to the right place, can I interest you in this lovely lv 1 sword. Learn to build a shopping system and then head back out in to the fray
In the second chapter that also got two big for its boots and had to be severed right down the middle we cover turn based battle systems, including some was to use mecanim that you may have never considered before (State battle machines and AI anyone?)
With the game framework done we look at finishing your title and looking at the editor to see how we can extend it to help build our game for us (editor scripting, yummy), rounding up with an in depth report on enabling in-app purchasing the right way
Finally, we round up with a look at extending and deploying to platforms, cram packed with help on serialisation (saving and loading), making code only run on specific platforms or the editor and masses of hints and tips on marketing
My only regret with this book is that it couldn’t be bigger
As with everything I do, if there’s more you want to know on any subject within the book, drop me a line or comment on my blog and I’ll be more than happy to write even more on the subject.
Right, the first snippet from the book is about:
masteringunity2d_03_14
(Animation dope sheet Curve view)
Now for those of you who have dabbled, Animation curves are primarily use 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.
We start with a property in which ever script you need to access curves from, first create a new script, say called AnimationPath and replace its contents with the following:
1 2 3 4 5 | usingUnityEngine; publicclassAnimationPath : MonoBehaviour { publicAnimationCurve 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.
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
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.
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:
1 2 3 4 5 6 7 8 | usingUnityEngine; publicclassAnimationPath : MonoBehaviour { publicAnimationCurve myTransitionPath; Vector3 StartLocation; Vector3 TargetLocation; floattimer = 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):
1 2 3 4 5 6 | voidAwake () { 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | voidUpdate () { 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(newVector3(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:
1 | 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 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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | usingUnityEngine; publicclassCirclingSphere : MonoBehaviour { publicAnimationCurve sinPath; publicAnimationCurve coSinPath; floattimer = 0; voidAwake () { if(sinPath.keys.Length < 1 || coSinPath.keys.Length < 1) { Debug.LogWarning("Transition Paths not configured"); } } voidUpdate () { timer += Time.deltaTime; varpos = 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
I do hope you like this little snippet, just one of (hopefully) many little break out sections from the book. These snippets do have a lot more detail as I have more space to work with (it is really surprising how restricting 500+ pages gives you 
) but everything you need to know is covered in each section.
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!.
Read more about:
Featured BlogsYou May Also Like
.png?width=300&auto=webp&quality=80&disable=upscale)
