Animation and Cutscenes

Animation and Cutscenes animates one small show, The Puppet Theatre: a castle hall made into a theatre, with a stage, footlights and a red curtain, a lantern on a chain, a lever and a trapdoor, and one knight who runs, jumps and slashes across its boards. You start from a starter with the hall built and the knight sliding about in one pose, and nothing animated. By the end the knight’s clips are chosen by a graph, the curtain rises, the lantern swings, a footlight flickers, his footsteps are heard and his slash hits. Scripts give him orders, tweens squash and bob things, and a crouching slide carries him as far as its frames say.

The marionette, a wooden puppet on a control cross, starts as a handful of pictures of its limbs. You rig it from them. It dances on layers, reaches for the lantern, and falls when the knight cuts its strings. A cutscene then opens the show, with its music, its camera shots and the marionette’s bow, and the whole show runs in an exported game. A last chapter builds six small cases of their own, each a recipe to take into your own game.

The tutorial is for learning every animation control to the end. Every field of the ten components that animate a show (the Animated Sprite, the State Machine, the Animation Layers, the Property Animation, the Root Motion, the Bone, the IK, the Physical Bone, the Timeline and the Camera Rig) is defined with what it does, its unit and the value the theatre gives it. The editor’s animation tabs, Sprite sheet, Animation, Graph and Cutscene, are each used where a chapter needs them.

Each part ends on a show that works at its level:

• Rengy, installed, on Windows or Linux. Getting started installs it and shows you round the editor.
• The starter, animation-and-cutscenes.zip: the hall dressed as a theatre, with its footlights, curtain, lanterns, lever and trapdoor, the knight in his one pose, the marionette’s limbs as pictures, and six more pictures the later chapters use. Unzip it somewhere outside your other projects; in the editor’s launcher, choose Open project… and pick the animation-and-cutscenes folder.
• Five free downloads, below. Each chapter says which files to copy from them, and where they go in the project.
• Nothing else. Part 1 is all clicks. From chapter 5 the show’s logic is short Rengy Script files, which the editor runs as they are, with nothing to install.

Every download is in the public domain (CC0). Three of the Gothicvania pictures, the hall’s wall and tiles and the knight’s idle strip, are already in the starter. The curtain, the valance, the footlights, the lantern, the lever, the trapdoor, the marionette’s limbs, its cross and its string, the knight’s slide, the spikes, a candle, a blue knight and a toy tank were drawn or made for this tutorial, some from the packs’ own pixels, and they are in the starter too.

You can stop after any of them: each leaves you a show that works. The chapters below are listed by part.

• Basic, chapters 1 to 4: a knight who moves well and a stage that comes alive, with no script. His clips, a graph that chooses them, keyframes on the curtain, the lantern and a footlight, and frame events you hear.
• Simple, chapters 5 to 7: a playable stage. Orders from scripts, tweens, and the root motion of a crouching slide.
• Pro, chapters 8 to 13: the whole show. A marionette rigged from its limbs that dances on layers, reaches for the lantern and falls when its strings are cut, the cutscene that opens the show, and a gallery of six small cases.

• Every control is defined. A list of terms in each chapter says what a field does, its unit, the range that suits the theatre and the value the theatre gives it.
• Timing is shown as frames. A cross-fade, an ease, a fall or a camera move cannot sit in one picture, so the chapter shows a strip of frames from one run, taken at moments it names.
• Who decides the clip. A node’s clip can be chosen by its own Clip field, by a graph, by a layer or by a cutscene. Two of them on one node is the mistake most readers make, so every chapter that changes the answer says which one owns the clip now.
• Each thing you build ends in a table of its values, so you can build it again in your own game.
• Every picture is a capture of the editor or the game, never a mock-up.

The thirteen chapters take about 6 hours at the keyboard: most take between a quarter of an hour and half an hour, the marionette’s rig and the opening a little longer, and the gallery about an hour and a half, a case at a sitting. Every chapter ends at a place you can stop, with a Check it works box that says what you should see.