Tutorials · Animation and Cutscenes · Chapter 1

Frames

20 minutes Uses: AnimatedSprite, Sprite

By the end

art/knight.png and art/knight.anim: the knight’s seven strips packed on one sheet, and nine clips cut from it: idle, run, rise, fall, land, slash, hurt, crouch and slide
Each clip’s speed and whether it ends or loops, a length for the two frames that last longer, and a pivot on every frame
The knight as an Animated Sprite on his own node, Clip idle, drawn at each frame’s own size
Any clip played by typing its name into Clip in Play

On this page

Open the starter
One sheet from seven pictures
The knight draws the sheet
Cut the strips into clips
Where he stands in each frame
Each frame at its own size
Play a clip by name
The knight, and his clips
Check it works

Reference

Open the starter

Animation and Cutscenes does not start from an empty folder. It starts from the Puppet Theatre with its hall built, its footlights and lanterns lit, and the knight standing in it in one pose, so that everything you add from here is something that moves.

Download animation-and-cutscenes.zip, the starter (the overview says what is in it), and unzip it somewhere outside your other projects. You get one folder, animation-and-cutscenes.
Open Rengy. In the launcher, choose Open project… and pick the animation-and-cutscenes folder.
The editor opens the project’s startup scene, scenes/theatre.ron. In the Hierarchy, select knight. On the toolbar, click Look through, so that the Viewport shows the hall as the game’s camera sees it.
Press F5. Walk with A and D, or the arrow keys, and jump with Space. Press F5 again to stop.

The editor on the starter, looking through the game camera: the Hierarchy lists the theatre and its nodes down to the knight, who is selected, and his camera; the Viewport shows the hall with a red scalloped valance across the top, a tall vined window in the middle of the back wall, five brass footlights along the boards and the knight standing at the left; the Inspector shows his Node and Character Body rows

The hall as the starter runs it: the red valance across the top, the vined window in the middle, a lantern hanging on the brick on either side, five footlights along the boards, and the knight standing on the boards at the left in one pose

He walks at 220 units a second and faces the way he walks, whatever he is doing. He jumps about 100 units high, which is high enough to land on the pillar stubs at the two ends of the hall, and he stops at a wall you cannot see at each end. He does all of that in one pose: there is nothing to animate him yet, and this chapter gives it to him.

The camera shows 640 by 360 world units, drawn at twice their size in a 1280 by 720 window. Every position on these pages is in those units, with 0, 0 at the top left and y growing downward. The hall is 1280 wide, two screens, and the camera follows the knight and stops at its ends. The boards he stands on are at y 288.

The art folder holds what the show is drawn from: the hall’s tiles and wall, the knight’s idle strip, and the pictures drawn for this tutorial, among them the curtain, the footlights, the lantern, the lever, the trapdoor and the marionette’s limbs. Later chapters take each one up. The knight’s knight-slide.png, four frames of a crouching slide, is one of them, and this chapter uses it.

One sheet from seven pictures

The knight’s art is seven strips, each a row of frames: his idle, run, jump, attack, crouch and hurt from Gothicvania, and the slide that came with the starter. An Animated Sprite plays clips of one picture, and the seven strips are drawn at six different frame sizes, so they cannot be one grid. Make Animation… packs pictures onto one sheet and writes the animation that holds them. The Sprite sheet tab then cuts the sheet into the clips.

Download Gothicvania Patreon’s Collection if you have not, and copy the five pictures below into the project’s art folder. The editor shows them in Assets as soon as they are there.
In Assets, open art, right-click gothic-hero-idle.png, and choose Make Animation…. The window opens with gothic-hero-idle.png ticked, Name gothic-hero-idle, Frames a second 12 and Loop ticked.
Tick the other six: gothic-hero-attack.png, gothic-hero-crouch.png, gothic-hero-hurt.png, gothic-hero-jump.png, gothic-hero-run.png and knight-slide.png. They play in name order, which here is the order they are listed in.
Set Name to knight, leave Frames a second and Loop as they are, and press Create. It writes art/knight.png, a sheet of the seven strips side by side, 4096 by 128, and art/knight.anim, one clip called knight that plays them.

The Make Animation window over the editor, listing seven pictures from art, gothic-hero-attack.png down to knight-slide.png, every one ticked, with Name still the picture’s own, gothic-hero-idle, Frames a second 12 and Loop ticked, and the Create and Cancel buttons under them; behind it the Viewport looks through the game camera at the hall

The knight clip is the seven strips as seven whole frames, which nothing will play: it is how the sheet was made. Leave it where it is. Make Animation… makes and never updates, so pressed again on the same name it refuses, and a clip that still holds the seven strips is how the sheet can be packed again.

Each strip sits at its own place on the sheet, tallest first, and the Sprite sheet tab needs to know where. The table says where, in the sheet’s own pixels: the same numbers are in the knight clip, whose seven frames, in the order of the pictures’ names, are the seven strips, each with its Region.

Strip	Frame of `knight`	Region x	Width	Height	One cell	Cells
`gothic-hero-attack`	0	`1101`	`576`	`48`	`96`, `48`	`6`
`gothic-hero-crouch`	1	`1833`	`144`	`48`	`48`, `48`	`3`
`gothic-hero-hurt`	2	`1979`	`144`	`48`	`48`, `48`	`3`
`gothic-hero-idle`	3	`1679`	`152`	`48`	`38`, `48`	`4`
`gothic-hero-jump`	4	`0`	`305`	`77`	`61`, `77`	`5`
`gothic-hero-run`	5	`307`	`792`	`48`	`66`, `48`	`12`
`knight-slide`	6	`2125`	`512`	`32`	`128`, `32`	`4`

The knight draws the sheet

The knight is a Sprite that draws one frame of the idle strip, by a name, stand. It becomes a Sprite that draws the new sheet, with an Animated Sprite beside it that says which clip of the sheet to draw.

Select knight. In the Sprite, drag art/knight.png from Assets onto Texture, and clear Atlas Region, which says stand: click its box, delete the word and press Enter.
Click Add component and choose AnimatedSpriteComponent.
Drag art/knight.anim from Assets onto the Animated Sprite’s Animations. Leave Clip at idle, Speed at 1 and Playing ticked, as they come. Leave Frame Size unticked for now.
Keep the knight selected, so the Animation tab at the bottom of the window shows knight.anim, and press Ctrl+S.

Animations: The Animated Sprite’s Animations: the .anim file it plays, which holds the clips and names the sheet they are cut from. Here art/knight.anim. Empty, the node plays nothing and the Animation tab says so.
Clip: The Animated Sprite’s Clip: the name of the clip it plays, idle here, which is what a new Animated Sprite starts with. A name the animation does not have draws the whole sheet at once, so until the next section cuts the clips the knight is the whole sheet squeezed into a 38 by 48 box. That is expected.
Speed: The Animated Sprite’s Speed: how fast the clip plays, as a multiple of its own rate. 1 plays it as cut, 0.5 at half rate, 2 twice as quick, and a negative number plays it backwards. It suits anything from 0.25 to 2. Here it stays 1.
Playing: The Animated Sprite’s Playing: whether the clip moves on. Unticked, the sprite holds the frame it is on. Ticked, here and in every sprite the show animates.

The Sprite’s Size stays 38 by 48, its Anchor 0.5, 1 and its Sort Layer 5, as the starter had them. They matter again at Frame Size, below.

Cut the strips into clips

The Sprite sheet tab cuts a picture into a grid of cells and turns cells into frames. The sheet is not one grid: each strip has its own cell size and starts at its own distance from the left, which is the Region x of the table above. So the sheet is cut nine times, one clip each, setting the grid to the strip first.

The Animation tab on the knight: the clips knight, idle, run, rise, fall, land, slash, hurt, crouch and slide as tabs with their frame counts, knight lit and Loop on at 12 fps; the first of its seven frames chosen, with Region x 1101, y 0, w 576 and h 48, and the sheet’s whole strip of pictures along the bottom with that first strip outlined — The `knight` clip’s first frame is the attack strip: **Region** x `1101`, `576` wide, `48` tall. The other tabs are the clips this section adds.

With knight still selected, double-click art/knight.png in Assets. The Sprite sheet tab opens on it. The sheet is drawn small: scroll over it to zoom in until a cell is wide enough to drag across.
Idle. Under Grid, set Cell to 38 and 48, and Margin to 1679 and 0. The grid is drawn over the sheet, and its first column is the idle strip’s first frame. Drag across the first four cells of the top row, from cell 0, 0 to cell 3, 0: the bar under the sheet shows the cell under the cursor, and Selected 4 x 1.
Under Clips, press From selection. A clip appears in the list. Name it idle, set its rate to 8 fps and its loop to Loop, and press Generate 1. The Animation tab lists idle (4). Press Clear to empty the list.
Cut the other eight the same way, each with the Cell, Margin, cells, rate and loop of its row in the table below. The cells are counted from the first column of the grid you set, so rise and fall share one grid, 0 to 2 and 3 to 4, and land and crouch share another, 1 and 0 to 2.
In the Animation tab, press Save. It writes the nine clips into art/knight.anim, after the knight clip.

Clip	Cell	Margin x	Cells	Rate	Loop
`idle`	`38`, `48`	`1679`	`0` to `3`	`8` fps	Loop
`run`	`66`, `48`	`307`	`0` to `11`	`20` fps	Loop
`rise`	`61`, `77`	`0`	`0` to `2`	`12` fps	Once
`fall`	`61`, `77`	`0`	`3` to `4`	`8` fps	Once
`land`	`48`, `48`	`1833`	`1`	`8` fps	Once
`slash`	`96`, `48`	`1101`	`0` to `5`	`18` fps	Once
`hurt`	`48`, `48`	`1979`	`0` to `2`	`10` fps	Once
`crouch`	`48`, `48`	`1833`	`0` to `2`	`12` fps	Once
`slide`	`128`, `32`	`2125`	`0` to `3`	`16` fps	Once

The Sprite sheet tab open on knight.png, 4096 by 128: its Grid with 32-pixel cells and no margin, the whole sheet drawn small across the tab with the knight’s strips as a thin line of figures, the Clips section with Nothing to generate yet, and the Regions and Paint sections under it; below, the Animation tab shows the clips and the Inspector shows the knight’s Animated Sprite — The Sprite sheet tab as it opens, before the first clip’s grid is set. The picture was taken at the end of the chapter, so the Animation tab under it already lists the nine clips.

Once, Loop and Ping-pong: What a clip does at its last frame. Once plays through and holds the last frame, which suits a jump, a swing or a landing. Loop starts again at the first, which suits a breath or a stride. Ping-pong plays forward and then backward, and nothing in the knight uses it. A looping idle and run keep playing for as long as the knight does the same thing; the rest play once and wait for something to change.
fps: Frames a second: how many of its frames a clip shows in one second. A slow idle, 8, is a breath. A quick run, 20, is a stride of twelve frames in six tenths of a second, which suits a knight who crosses a screen in three seconds. Changing it later, in the Animation tab, retimes every frame of the clip at once.
Cell and Margin: The grid a strip is cut with. Cell is the size of one frame, in the sheet’s pixels; Margin is how far the grid starts from the sheet’s top left, which is where the strip you want begins. A selection is counted in cells from the grid’s own first column.

Where he stands in each frame

A frame’s pivot is the point of it that sits on the knight’s node, which is his feet. 0.5 across is the middle of the frame, and the other number says how far down the soles are, from 0 at the top to 1 at the bottom. A new frame has 0.5 and 1, the middle of its bottom edge.

Two things are wrong with that. The knight’s body is not in the middle of each strip’s cell: each strip is drawn with his cape out behind him, and a pivot at the middle of the cell would put his cape, not his body, over his node, so that he shifted sideways whenever one clip gave way to another. So each strip gets the pivot x of its own body, measured with the cape left out. And his soles are not on the bottom row in every frame: the jump strip’s cells are 77 tall, to leave room for a leap, and the knight is drawn at a different height in each. So each of the jump’s five frames also gets a pivot y at its own soles.

In the Animation tab, in its first mode, Frames, the first of the two words at its top left (chapter 3 uses the second), click the run tab. Under the transport row, a strip shows the clip’s twelve frames; click the first one. The row under Frames reads Frame 0, with dur, pivot x and y boxes.
Click the pivot x box once, so that its number is selected, type 0.624 and press Enter. Leave y at 1. Press Next frame, the third of the three buttons at the left of the transport row, and set pivot x to 0.624 again. Go on to the twelfth frame: every frame of a strip takes the same x, and each frame is its own edit.
Do the same for each of the other clips, with the pivots of the table below. idle and slide keep the 0.5, 1 they were cut with. For rise and fall the y changes frame by frame.
In the land clip, select its one frame and set dur to 0.12. In slash, select its sixth frame and set dur to 0.3. Every other frame keeps the duration its rate gave it.
Press Save in the Animation tab, and Ctrl+S.

The Animation tab on the run clip, its twelve frames in a strip across the top with the first chosen, run lit among the tabs, Loop lit and 20.0 fps; under Frames its row reads Frame 0, dur 0.050, pivot x 0.624 and y 1.00, then its Region x 307, y 0, w 66 and h 48, and the every frame box at 0.050 with 12 frames, 0.60s total — `run`’s first frame, with its pivot set: **pivot x** `0.624`, y `1`. All twelve frames take the same.

The Animation tab on the rise clip, which has three frames: the second frame chosen in the strip, and under Frames its row reading Frame 1, dur 0.08333, pivot x 0.587 and y 0.87, then its Region x 61, y 0, w 61 and h 77, and the every frame box at 0.08333; above it the clip’s tab row with rise lit, Once lit and 12 fps — `rise`’s second frame: **pivot x** `0.587`, y `0.87`. The row says **Frame 1** because it counts from `0`; the transport row above it counts from `1`, and says **Frame 2 / 3**.

The Animation tab on the slash clip, which has six frames: the sixth frame chosen, and under Frames its row reading Frame 5, dur 0.300, pivot x 0.523 and y 1.00, then its Region x 1581, y 0, w 96 and h 48, with the word mixed beside the every frame box because the frames do not all last the same time; above it slash lit, Once lit and 18 fps — `slash`’s last frame holds for **dur** `0.3`, so the blade’s follow-through stays up. **mixed** says the clip’s frames no longer last the same time.

Clip	Frames	pivot x	y	dur
`idle`	`0` to `3`	`0.5`	`1`	as cut
`run`	`0` to `11`	`0.624`	`1`	as cut
`rise`	`0`	`0.587`	`0.987`	as cut
	`1`	`0.587`	`0.87`	as cut
	`2`	`0.587`	`0.623`	as cut
`fall`	`0`	`0.587`	`0.545`	as cut
	`1`	`0.587`	`0.779`	as cut
`land`	`0`	`0.681`	`1`	`0.12`
`slash`	`0` to `5`	`0.523`	`1`	frame `5`: `0.3`
`hurt`	`0` to `2`	`0.551`	`1`	as cut
`crouch`	`0` to `2`	`0.681`	`1`	as cut
`slide`	`0` to `3`	`0.5`	`1`	as cut

dur: How long the selected frame stays up, in seconds. A clip’s rate gives every frame the same, 1 over the rate, and dur changes one. land is one frame, held 0.12, a hair quicker than its rate, so the landing is over at once; slash holds its last frame 0.3 against 0.05556 for the others. The every frame box beside it sets all of a clip’s frames to one number.
pivot x and y: Where the selected frame hangs from, as fractions of the frame: 0, 0 is its top left and 1, 1 its bottom right. x puts his body over the node and y puts his soles on it. It takes any number from 0 to 1; the editor shows two places, or three when the number has them.
Region: Where the selected frame is cut from the sheet, in the sheet’s pixels: x and y for its top left, w and h for its size. The Sprite sheet tab wrote them, and they are not edited again here.

Two of the run’s frames, Frame 5 and Frame 11, are the ones where both of his feet are in the air. They keep y 1, so his feet clear the boards for as long as they are off them. The row the soles end on in every ground frame is the bottom row of the cell, so the same number puts them on the boards when he is on them.

To check a pivot, first tick the Animated Sprite’s Frame Size, which the next section explains: without it the knight and his copies are all drawn at the Sprite’s 38 by 48, and a pivot changes nothing you can see. Then turn on Onion in the transport row. It draws a faint copy of the frames either side of the one the playhead is on, each at its own size and placed by its own pivot, over the knight in the Viewport. A pivot that is wrong shows as a ghost whose feet do not stand where his do. The two numbers beside it say how many frames before and after, and α how strong the copies are.

The knight in his rise pose, large in the Viewport inside the blue outline of his Sprite frame and the green box of his body, with fainter copies of the frames either side laid over him, each at its own size and by its own pivot: the next frame’s cape and legs lie lower; Onion is lit in the Animation tab below, with −1, +1 and α 0.80, and the row under Frames reads Frame 1, dur 0.08333, pivot x 0.587 and y 0.87 — **Onion** on `rise`’s second frame, with α raised to `0.8` so the copies show; the copies are the frames before and after, at their own size, so the frame before, which is the one he is drawn in, lies under him. This picture is of a knight whose **Clip** is `rise`, so that he is drawn in it.

Onion: Draws the frames before and after the one the playhead is on, faintly, over the node in the Viewport. It is for lining one frame up with its neighbours. The two boxes, −1 and +1, say how many frames before and after, up to four, and α, from 0.05 to 1, how strong the copies are; it starts at 0.35.

Each frame at its own size

The knight’s Sprite is 38 by 48, the size of his idle frame. His other frames are not: the run’s are 66 wide, the jump’s 61 by 77, the slash’s 96. By default an Animated Sprite fits every frame to the Sprite’s Size, which would squeeze the run into a narrow knight and shrink the jump to three fifths of its size.

Select knight. In the Animated Sprite, tick Frame Size, if the pivot check above has not already.
Press Ctrl+S.

The knight selected, its Inspector narrowed with the search box, sprite, to two components: the Animated Sprite with Animations knight.anim, Clip idle, Speed 1.00, Playing and Frame Size ticked, and under them a Swap and culling group with Culling AlwaysAnimate, Tick Mode Frame, Library none, a Resolver with Category and Label empty, and Clear Swap; then the Sprite with Texture knight.png, Size 38.0 and 48.0, Anchor 0.5 and 1.0, Color white, Flash 0.000 and Sort Layer Custom 5; the Viewport looks through the game camera at the hall — The knight’s Animated Sprite and Sprite as this chapter leaves them. The **Swap and culling** group under **Frame Size** is chapter 13’s: leave it as it comes.

Frame Size: The Animated Sprite’s Frame Size: draws each frame at the size of its own Region, and places it by its pivot, instead of fitting it to the Sprite’s Size. Ticked here. Unticked, every frame is drawn at the Sprite’s 38 by 48, from the Sprite’s Anchor, and a frame of another size is squeezed or shrunk to fit.

A close-up of the knight in the first frame of rise, with Frame Size ticked: drawn large in a running leap, his cape streaming out behind him to the left, his feet just above the boards, a footlight beside him — **Frame Size** ticked: the first frame of `rise`, drawn at its own `61` by `77`.

A close-up of the same frame of rise with Frame Size unticked: the same leap about three fifths the size, the knight small against the boards, the footlight beside him now reaching his hips — For comparison, **Frame Size** unticked: the same frame shrunk into the Sprite’s `38` by `48`.

Play a clip by name

Nothing chooses a clip but the field, so you can watch every clip by typing its name. In Play the knight is a copy of the one you built, and Stop keeps nothing: what you set in Play is gone when you stop, so the knight in your project stays on idle.

Press F5. In the Hierarchy, select knight. In the Animated Sprite, set Clip to run and press Enter. He runs on the spot, in the clip you cut. Hold D: he runs along the boards.
Set Speed to 0.5. The run slows to half, each frame up twice as long. Set it back to 1.
Untick Playing. He freezes on the frame he was in. Tick it again.
Type rise, fall, slash, hurt and crouch in turn. Each starts from its first frame and plays through, and, being Once, stops on its last. Type idle to bring him back.
Press F5 again to stop.

The knight, and his clips

The knight’s node

Node	Component	Field	Value
`knight`	Sprite	Texture	`knight.png`
		Atlas Region	empty
	Animated Sprite	Animations	`knight.anim`
		Clip	`idle`, as it comes
		Speed	`1`, as it comes
		Playing	ticked, as it comes
		Frame Size	ticked

His clips

Clip	Frames	Rate	Loop	Cut from	Pivot
`knight`	`7`	`12` fps	Loop	Make Animation	as cut
`idle`	`4`	`8` fps	Loop	`38`×`48` cells from x `1679`	`0.5`, `1`
`run`	`12`	`20` fps	Loop	`66`×`48` cells from x `307`	`0.624`, `1`
`rise`	`3`	`12` fps	Once	`61`×`77` cells from x `0`	`0.587`; `0.987`, `0.87`, `0.623`
`fall`	`2`	`8` fps	Once	`61`×`77` cells from x `183`	`0.587`; `0.545`, `0.779`
`land`	`1`, `0.12` s	`8` fps	Once	`48`×`48` cell at x `1881`	`0.681`, `1`
`slash`	`6`, the last `0.3` s	`18` fps	Once	`96`×`48` cells from x `1101`	`0.523`, `1`
`hurt`	`3`	`10` fps	Once	`48`×`48` cells from x `1979`	`0.551`, `1`
`crouch`	`3`	`12` fps	Once	`48`×`48` cells from x `1833`	`0.681`, `1`
`slide`	`4`	`16` fps	Once	`128`×`32` cells from x `2125`	`0.5`, `1`

Every other field of every node is as it comes.

Check it works

Six pictures of the knight running right, side by side, each cut from the game one tenth of a second after the last: the cape streams out behind him in every one, and he goes from a long stride with his legs apart, to his feet together under him, to a stride again, so that the six together are one turn of the run — The run, as a strip of six frames: steps `72`, `78`, `84`, `90`, `96` and `102` (1.2 s to 1.7 s), a tenth of a second apart, which is every second frame of the twelve. The knight’s **Clip** is `run`, as typing it in Play makes it, and `D` is held.