Making a game
Building a cutscene intro
An intro that films the game's own running scene, then lands on the title.
An intro is the cutscene plugin filming the game's own entry scene: its real kinds, run by their own rules, the camera cutting and sweeping between them, then letting go onto the title with the scene still running behind it.
Where it plays
- Play it in the entry scene, the title, before its menu. A separate intro scene that moves the seat on to the title puts another scene behind the menu, started over, and the cut shows it.
- Keep the title a plain seat (Scene flow). The cast are rows the game drives itself, never a seat's
playerrow. - Add to the title's
pluginsrender3d and the look plugins its set uses, withcutsceneafter render3d and beforeui. Give itworld.cutsceneand catalogue the cue file. A title with its ownworld.loaderlists only what its set draws.
| Part | Home |
|---|---|
The cutscene row | An actors entry with the prefab {}, listed before every cast row. |
| The cast | actors entries of the game's own kinds, each with a name. |
| The start | One row of a kind of the game's own, such as curtain. |
| The cue file | assets/intro.json, a json entry with preload, written by a script. |
| The script | assets/intro.ts beside it. |
| The menu, the 3D name and the camera after | The title kind's <kind>.client.ts and its definition. |
The cast
- Give each cast kind what cutscene asks of one: a
name,directread in itstick, and the actadvance(dt). - A kind that drives itself, a CPU racer or a bot, goes on by its own rule while
directis set, so the camera films the real thing. It throws, naming the verb, when handed awalk,face,playorgesture. - Cast every row that moves in the shots, not only the ones a shot names. A skip steps the cast and nothing else, so a row left out stands still while the rest leap ahead.
Starting it
- Leave
autoout of the cue file: the page that just arrived is still fetching its models, and the intro would play to an empty set. - The
curtain's look sends its open actreadyonce, on the first frame every model and texture of the catalogue has landed or failed. Its rule does the same after its definition'swaitseconds. Either one, once, calls the cutscene'sstartand starts the action, a race's flag say, in the same step. - The curtain's look covers its panel in black until the cutscene runs, and sends
skipon the first key or click while it runs.
Starting both in one step keeps the cue clock and the action's clock together, so every car or ship is where the cue file was written for it.
Writing the cue file from the run
When the action is a pure function of the seed and the numbers, assets/intro.ts writes the shots from the game's own run: node --experimental-strip-types games/<game>/assets/intro.ts.
- Boot the manager as the server does, step once, and send the curtain
readyas a page would. - Write a first file with the cast and no cues, and after every write call the loader's
written(url, content), or the next boot reads the old file. - Record every cast row each step: place, heading, speed and progress.
- Lay the shots on what the recording shows, alternating wide and high with close and low (
frame: "body"). The first shot hasover: 0; the last follows one cast member with an offset in the world's axes. - Write the file and check every frame of every shot with the cutscene's
pose: the subject on screen inside the bars, within a distance, nothing between it and the camera, and the camera inside nothing of the set as it is drawn, walls, banks and buildings included. Throw on the first frame that fails.
The title after the intro
- Draw the menu only once the
cutscenerow isdone, brought up on the page's clock by anappearin the title's definition. - Claim render3d's camera and carry the last shot on with the cutscene's
view, turned slowly about the upright on the page's clock. - Draw a 3D name or 3D menu words in render3d's
overlay, with an environment map the look builds, since the overlay has none. Each menu word stays a ui button with clear fills and its hit area set each frame to the word's box fromrender3d.project. - Make the words one glb from one Blender script that reads them off the title's definition, built by the game's bake.
Checking it
- In the title's
<title>.sim.test.ts: the cutscene waits forready;readystarts it and the action in one step; every frame of every shot passes the check; at the enddirectis null and the action runs on; a skip ends it at once; and the curtain starts it alone afterwait. - A page test of anything on the title skips the intro first, as a player would.
- Play it from the game's
index.html, as in Starting a game, and watch every shot.