Hi there! In this blog post we’re looking at the “Animation Curve Library”.
Let’s first look at what Animation Curves are, why the new Curve Library is useful, and how to make use of them in Sequences and with GML.
Note: You can check the top-right corner of your GameMaker Studio 2 IDE to make sure that your version is 2.3.2 or newer, but if it isn’t, you can restart the IDE and download the update when you get the prompt. You can also download the latest version from this link: https://gms.yoyogames.com/ReleaseNotes.html
Animation Curves
Animation Curves were introduced in GameMaker Studio 2.3.0 and allow you to create curves that can be used for smooth animation within Sequences and in GML for any purpose. You can simply create a new Animation Curve and use its editor to set up points on the curve:
For more information on the Animation Curve Editor, please see the manual, and now let’s look at what’s new in the 2.3.2 update.
Animation Curve Library
The Animation Curve Library was created to save you from having to recreate basic curves and to allow a faster workflow for creating smooth and juicy animations. The “Curve Presets” section in the library window contains pre-built curves that can easily be applied to your channel:
As you can see in the GIF, you need the Curve Type to be set to “Bezier” for any presets to be usable, and you can then click on any one of the listed presets to apply it to your curve.
You can also right-click on a selection in your curve, which will open the Animation Curve Library window there and allow you to apply presets between the selected points (this will only open if the Curve Type is set to “Bezier”).
Easing Modes: Which One To Use?
There are three “easing modes” that you can choose from, which control the flow of the applied preset. “Ease In” starts with a slow curve that speeds up near the end, “Ease Out” is the opposite and “Ease In-Out” is a mix of the two.
You will mostly find yourself using the “Ease Out” option, as it starts with fast movement but slows down near its end, resulting in animation that is both snappy and smooth. “Ease In” can be used for animations that need weight, such as a punch that starts with slow movement but ends at its full speed. “Ease In-Out” will give a similar result but with a slow down near its end as well.
In the GIF below you can see some rotation being applied to a sprite using the “Expo” curve preset, in all three easing modes:
As you can see, “Ease Out” is smooth in the end, “Ease In” is smooth in the beginning, and “Ease In-Out” is smooth at both times.
Of course, after you have applied a preset to your curve, you can keep editing it and making your own changes until you get the result that you’re looking for!
There is more to this new Animation Curve Library window, so make sure to read its manual entry.
Animation Curve Library in Sequences
Animation Curves are best used in conjunction with Sequences, as demonstrated on this manual page.
Once you have converted a parameter track to a curve (or assigned a Shared Curve to it), you can go into Curve Mode in the Dope Sheet and access the Animation Curve Library there:
In the following GIF you can see how the Animation Curve Library makes it easier and quicker to improve any animation:
Where applying the “Elastic” preset to our parameter curve took only a few clicks, it significantly improved our animation!
Do note that your curve needs to have a slope for a preset to have any effect (as can be seen in the GIF above), since applying a preset to a flat curve will not show any results.
Tip: Reading Curves in GML
You can also use Animation Curves with GML, by using animcurve_get_channel() to retrieve a curve’s channel and animcurve_channel_evaluate() to read the vertical value at any horizontal point in that channel. You can create a “time” variable to use as the horizontal position and increment it every frame to get an animating value (make sure to keep it between 0 and 1). The value returned by the function can be used for anything -- the sky's the limit here, which means that Animation Curves can easily be incorporated into any part of your codebase!
Bonus: Use Cases for Curve Presets
Let’s look at a couple examples of Curve Presets being used for various in-game elements.
Floating Coin
This coin has three points on its Y position curve -- in the beginning, middle and end. The “Cubic” curve preset is applied as Ease In-Out, using the “Between” apply mode, which applies the preset to each pair of points resulting in a smooth transition between them and a nice looping coin animation.
This button animates from a scale of 0.4 to its default scale of 1, with the “Elastic” curve preset applied as Ease Out, resulting in smooth and snappy animation which can be played whenever the button is pressed.
Click here to download the project containing the above examples created in Sequences, and as a bonus they've also been implemented in GML -- so you can read the code and see how curves can be used at runtime!
Summary
Despite being a small window, the Animation Curve Library opens the door to a quicker workflow of making beautiful and polished games. They can easily be used in Sequence animations and any visual or non-visual implementations via GML, allowing you to be as creative as you can!
Let us know what you think of this feature on Twitter @YoYoGames, and you can also use the #GameMakerStudio2 hashtag when sharing your creations with the world.
Happy GameMaking!
For more on GameMaker Studio 2.3.2, see: Slick Interfaces with 9-Slice
