Animation, transitions and overlays
The timeline
Open the timeline with Alt T. An animation belongs to a screen and has tracks of keyframes for a layer’s x, y, scale, rotation and opacity. Values add to the layout: x and y move the layer, scale and opacity multiply, rotation adds.
Turn on record, move a layer, and the timeline writes the keyframe for you.
- Autoplay plays it when the screen opens (The Last Hunt’s menu Intro).
- Loop repeats it (the breathing “Press any button”).
- Or start it from a button’s Play action, or from game code:
ui.play("Hit").
Easing
Each key’s ease shapes the segment after it: linear, in, out, inOut, back, elastic, step. The curves are the same functions in TypeScript and GDScript, so motion matches on both sides.
Screen transitions
A screen can say how it appears when you go to it:
"transition": { "type": "fade", "duration": 0.3 }| Type | Effect |
|---|---|
fade |
The old screen fades out while the new one fades in |
slide |
Both move in a direction; the new screen enters from the opposite edge |
scale |
The new screen grows from 92% to 100% while fading in |
A goto or push action can override it, and so can code: ui.goto("12 Pause", { transition: { type: "none" } }). The old screen stays mounted but takes no input until the new one has arrived. On the web, transitions are skipped for people who ask their system for reduced motion.
Overlays
push opens a screen over the current one: a pause menu over the HUD. Screens below keep their state, follow data and keep animating, but take no input until they’re on top again. Focus moves into the overlay and comes back to the button that opened it. pop closes the top screen. The overlay’s own background is what dims the screen below, so give it a semi-transparent fill.
ui.push("12 Pause")
ui.pop()