Skip to content
Documentation
On this page

Keyframes and easing

A key is a value on one frame of one track, plus the easing it is reached with. Everything in a level that moves, changes colour or switches on and off is a list of keys

The basic ideas - How the editor works. Every field of the keyframe inspector - Object properties

What can be animated

Every track has its own keys, independent of the others:

OwnerTracks
any objectposition, rotation, scale, size, anchors, pivot
shapecolour, UV
textcolour, font size, Fillment (how much of the text is written), Appearing (how much of it is hidden behind the mask)
cameraposition, rotation, zoom, pivot, shake
levelbackground, theme, screen limit, each of the 12 post-processing effects
playersize, speed, visibility, control, collision

A shape's colour key can also be a gradient over the object's rect. Its Gradient field picks the layout: Solid (one colour), Vertical (bottom to top), Horizontal (left to right) or Four Corners (a colour in each corner)

A font size key is either one number, a fixed size in world units, or a band with Auto Size on. The text is drawn at the band's Max and shrinks toward its Min until it fits its rect

An object's keys are counted from the start of its span. So moving the object in time carries its whole animation along

Position is set relative to the parent. A key stores the value itself, not an increment over the previous key

The player's visibility, control and collision are either on or off. Those keys have no easing: there is nothing to blend

The first key on an empty player track changes nothing on screen: visibility, control and collision start on, size and speed start at the player's usual values. With control off, or the player hidden, the player cannot be steered: the cursor disappears and a press is not picked up. A hidden player is still hit: only collision decides that

Text: fill and appearing

Two text tracks hide characters in different ways. Both take a share from 0 to 1 and count the characters of the text

Fillment is the share of the text that is written: 0 - nothing, 1 - all of it. A character that is not written is not drawn at all, so the line gets shorter. An empty track writes the whole text. Each key sets the direction:

  • Forward (the default) - from the first character, like a typewriter
  • Backward - from the last character
  • From Center - grows out of the middle
  • To Center - grows in from both ends and meets in the middle

Appearing is the share of the characters hidden behind the mask: 0 - all shown, 1 - all masked. A hidden character keeps its place and is drawn as a mask character, X by default. The mask is the text object's Appearing Mask field, and with several characters in it each hidden character takes one of them. An empty track hides nothing. Each key sets the mode:

  • Random (the default) - scattered, but the same scatter on every run. A character hidden at 0.3 is still hidden at 0.6, so the text resolves instead of flickering
  • Forward - the hidden characters are at the end, the text appears from its start
  • Backward - the hidden characters are at the start

To type a line in, animate Fillment from 0 to 1. To decode it out of noise, animate Appearing from 1 to 0

Advice

  • Key only what moves. A track with no keys takes the default value
  • For a change exactly on a beat, use Constant, for example a theme switch on the drop
  • Rotation does not wrap: a key at 0 degrees and a key at 720 spin the object twice. In radians, as the file and the AI assistant write it, that is 0 and 12.566

Between two keys

Before the first key and after the last one the value holds still. Between two keys the game takes the share of time that has passed, runs it through the easing and blends the two values

The share is counted in time, not in drawn frames. So the curve is the same at 30 and at 144 fps

The easing belongs to the later key of the pair. A key's easing sets the stretch that arrives at this key from the previous one. So the easing of the first key on a track never shows. A new key gets Linear

The Easing field opens the Select Ease window, where every easing is drawn as its own curve. You can select several keys, even on different tracks, and change them in one undo step

29 easings

Linear is a straight line. Constant holds the previous value and jumps on the key

The other 27 are nine families of three: In, Out and InOut. For example, InSine, OutSine, InOutSine

FamilyShape
Sinethe softest curve
Quad, Cubic, Quart, Quintpowers 2, 3, 4 and 5
Expoexponential
Circa quarter of a circle
Backgoes past the range and comes back
Elasticoscillates around the value

In starts slowly and finishes fast. Out starts fast and settles. InOut is slow at both ends. From Sine to Expo each family is sharper than the one before

Caution

Back and Elastic leave the range: Out overshoots the target, In backs up past the start. The collider moves with the object. So a projectile told to stop at the edge of a safe zone enters it for a few frames

Random values

A value in a key does not have to be a single number:

  • a number: Value, Rnd Min-Max, Rnd Min-Max, Step
  • a vector (position, scale and the like): Value, Rnd in Rect, Rnd in Rect, Step, Rnd in Circle, Rnd A to B, Rnd A to B, Step
  • a colour: Value, Theme, Rnd Min-Max, Rnd A to B

Rnd in Rect picks each axis separately. Rnd A to B picks one number for all axes, so the point lands on the line between A and B. The forms with a step round the result down to a multiple of the step. A step of 0 turns the grid off, and the value behaves like the form without a step. After that the key is blended like any other

The same seed gives the same level. The random number is computed from the seed, the key's frame, the layer, the object's start frame, the track and the channel. More - Determinism

Next: Rhythm and structure, Themes