Ask your AI
Use a light blue sky gradient as the background.
View code
game.backgroundGradient = { from: "#6ec8ff", to: "#e8f7ff" };What goes behind the game
A background sets the mood before anything moves.
Painted background
A picture made for the game. When its shape differs from the screen, you choose whether it fits inside, fills the screen, or stretches.
Ask your AI
Use a painted seaside background, filling the whole screen even if its edges are cut off.
View code
const sea = game.addBackground(new BackgroundLayer("sea"));
sea.fit = "cover";Scrolling and depth
Layers that scroll at different speeds, far ones slowly and near ones fast, make a flat game feel deep.
Ask your AI
Make the background scroll to the left, with the near waves moving four times as fast as the far clouds.
View code
farClouds.x -= 60 * dt;
nearWaves.x -= 60 * 4 * dt;A camera that follows
A level can be wider than the screen. The camera follows the player, and the score stays put in the corner instead of scrolling away with the world.
Ask your AI
Make the camera follow the player through a level wider than the screen, with the score fixed in the top corner of the screen.
View code
game.scrollX = player.x - 200;
scoreText.ignoreScroll = true;Weather and atmosphere
The sky over the game can change as it is played.
Rain, snow, wind, and night
Rain that splashes, snow that settles on the ground, wind that blows leaves and pushes the player, fog, lightning, fireflies, and nightfall come from an optional ambient module.
Say which weather you want and when it should change. The agent loads the ambient module, which blends one weather into the next and keeps rain out of caves and shelters. Rain, snow, fog, and glowing dots need no pictures; falling leaves, petals, and bubbles are drawn as the game's own images.
See the ambient moduleAsk your AI
Add rain that turns into a thunderstorm when the player reaches the forest, with the wind pushing the player and no rain inside the cave.