Scene transitions

Move between the title, the level, and the game-over screen with a transition instead of a jump cut.

Try each example, then copy the words under it and paste them to your AI. You can also send your AI the link to an example.

Soft changes

Calm transitions that suit menus and the start of a level.

Fade

The old scene fades to a color, then the new one fades in.

Tap the example to change scene.

700ms
Ask your AI

Fade to black between the title screen and the game.

View code 
game.transitionTo(levelScene, { type: "fade", color: "#000000", durationMs: 700 });

Slide

The new scene pushes the old one off the screen, like turning a page.

Tap the example to change scene.

700ms
Ask your AI

Slide to the next level from right to left.

View code 
game.transitionTo(nextLevel, { type: "slide", direction: "right-to-left", durationMs: 700 });

Wipe

A straight edge sweeps across and uncovers the new scene.

Tap the example to change scene.

700ms
Ask your AI

Change to the results screen with a wipe from left to right.

View code 
game.transitionTo(resultsScene, { type: "wipe", direction: "left-to-right", durationMs: 700 });

Dramatic changes

Transitions with character, for winning, losing, or entering a new world.

Iris

A circle closes on one point and opens on the new scene, the classic cartoon ending.

Tap the example to change scene.

700ms
Ask your AI

When the level ends, close a circle on the player and open it on the next level.

View code 
game.transitionTo(nextLevel, { type: "iris", centerX: player.x, centerY: player.y, durationMs: 700 });

Pixelate

The scene breaks into bigger and bigger blocks, then sharpens into the new one.

Tap the example to change scene.

32px
700ms
Ask your AI

Pixelate the screen when the player enters a new world.

View code 
game.transitionTo(newWorld, { type: "pixelate", pixelSize: 32, durationMs: 700 });

Flash

A bright flash hides the cut, like a camera or an explosion.

Tap the example to change scene.

700ms
Ask your AI

Flash the screen white when the player loses and show the game-over screen.

View code 
game.transitionTo(gameOverScene, { type: "flash", color: "#ffffff", durationMs: 700 });

Games with many levels

How a long game keeps its first wait short.

Load each level when it is reached

A game with many levels can download each level's pictures when the player gets there, instead of all of them before the game starts.

This is worth it only when a game has many levels and each one has lots of pictures of its own: the game starts sooner, and a level nobody reaches is never downloaded. While the next level loads, the current screen pauses and dims under a small ring that fills up, and then the transition plays. A game with a few scenes should load everything at the start, which is what your AI does when you do not ask.

Ask your AI

The game has many levels, each with its own backgrounds and enemies; load each level's pictures only when the player reaches it.