03 · the rooms
The rooms·
Five rooms open from make. The back pill at the top of each goes back to make. In art and sound, the lime button at the foot goes to the next thing that still needs art or a sound, then says Back to make.
Art·
Art opens on a card for each thing in your game that can wear a picture: the player, the things to collect, the hazards, the tiles, the background. A card with no art yet is a plain square in your game. Click a card to open that thing's page; art at the top comes back to the cards.
On a thing's page, four ways to give it a picture:
| way | what you do |
|---|---|
| Library | pick by kind: All, Characters, Items, Hazards, Tiles, Mine, and By students when classmates have shared drawings. To find one by word, press Find in the top bar, or /. |
| Draw it | Piskel, the same pixel editor code.org uses. Start a new drawing at 16, 24, 32, 48 or 64 px (a tile also gets 30). Edit in Piskel under the grid opens the picture it is wearing. It saves as you draw, and the game changes as you do. Full screen gives the drawing the whole window; Undo and Redo go one stroke at a time. Save PNG keeps a copy on your computer. |
| Upload | a PNG, GIF, JPG or WebP up to 512 KB, or drop it on the thing's card. It is cut to its edges and kept at 64 px or smaller. Choose several and each becomes a frame. Make it pixel art turns a photo (up to 15 MB) into pixel art instead: pick its size and how many colors, and Clear the background if you like. |
| Ask player two | describe it (what it is, its colors, which way it faces). Player two shows how it read your ask, then draws it at 48 × 48 in spawn's colors. Use these words puts its version in the box to change and ask again; Use for puts the drawing on the thing and opens it in Draw it to finish. Up to 10 a day. |
- Art packs, under the cards: a matching cast in one click. A pack fills the player, the items and the hazards, picks a background, and sometimes the player's moves too. Show all lists all of them.
- Moves: a character can have more than one picture, like still, walk and jump. A library character fills all its moves at once. plays at sets how many frames a second an animation plays, and loops whether it repeats. Click a frame to draw on it.
- your own animations: new animation makes one (a walk, a jump, a second look); copy makes a copy of one to change. Its name renames it in your code too; Delete keeps a copy in Earlier copies.
- The size slider makes a thing bigger or smaller, and its hitbox changes with it: smaller is easier to dodge, and harder to hit. Usual size puts it back.
- end screens adds full-screen pictures for game over and you win.
- What you draw or upload is kept in Mine, for your next game too. Deleting from Mine leaves the games already using it with their copy. You can offer a drawing from Mine to the library; once it is checked, it shows under By students with your first name.
The background is one of three, picked at the top of its page: Just a color (the background knob's color), A picture or A sprite. A picture is One screen (600 × 600) or a Long scene (2400 × 600) that scrolls with the camera and loops forever. Edit on any scene draws on your game's own copy; when drawing a long one, Move the join to the middle lets you draw across the spot where the end meets the start. An uploaded background, up to 4 MB, is cut to one screen. A sprite is any sprite, from your game's own art or the library, grown to fill the screen.
The map·
The letters of the map in your code, painted one 60 px square at a time. Runner, maze, platformer, side-scroller, adventure, race track, tower defense, digger and tower climb have one. Pick a tile and click or drag; right-click erases. No mouse? The arrow keys move, Space paints, Delete erases. A tile there can be only one of, like the start, moves when you place it again. Tiles wear the art their slot wears.
- + beside the level tabs adds a level (a copy of this one); − removes the one you are on, after asking.
- Undo and Redo go one stroke at a time. Clear empties the level but keeps the outer wall and the start.
- can it be won? tries the level with your game's own run speed, jump power and gravity, and outlines anything out of reach; This level can be won means a player can finish it. Play level plays just that level.
- what shapes the course, under the map, holds the knobs that change how it plays.
Your world (the explorer) is a map of screens. Click a gray square and it becomes a black screen with a floor; Background for this screen picks its picture, and Remove this screen turns it gray again. In the game, walking off an edge loads the screen next to it, and a gray square is a wall.
Sound·
Each slot is a moment in your game, like catch or you win: a line in your code right after the moment it names. Click a slot to give it a sound. The switch on each row turns a sound off without losing it; Remove the sound takes it away.
| way | for | what you do |
|---|---|---|
| Make one | moments | a retro sound from a shape (Square, Triangle, Saw, Smooth, Noise) and five sliders: Starts at, Slides, Lasts, Jumps up, Wobbles. The chips (coin, jump, hurt, laser, win...) are places to start. |
| Library | both | browse by shelf, or press Find. Music has its own shelves: spawn originals, classics and covers. |
| Record | moments | your microphone; drag the two handles to trim it |
| Upload | both | any sound file you have the right to use |
| Make a song | music | the Song room: write a tune in parts, with a mixer, sections and a loop, your tunes kept in My tunes, and files to download (WAV, MP3, MIDI). It can ask player two too. |
| Quick beat | music | the beat maker: click steps on a grid, up to sixteen patterns and a song order, with knobs for speed, swing, echo and key. Build a song from this beat takes it into the Song room. |
Sound packs fill every slot at once in one mood: scary, jolly, sci-fi, fighting, farm, ocean and more.
The Music row at the top loops all game; Menu music under it loops on the title screen and stops when play starts. Volume under each turns it up or down. A sound keeps its first ten seconds; music keeps up to three minutes.
Your link and your recordings
Sounds you recorded or uploaded stay silent on your shared link until the game is in the Hall of Fame. Keep your name out of anything you record.
Layout·
Lay out your screen: put pictures on your game (a tree, a lamp, a sign) and move where your sprites start. The game stops while you work. Place, in Tools, opens this room too. Three steps:
- Pick a picture from the shelf. It opens on Items.
- Drag it onto the game, and it lands where you let go. No mouse? Click a picture, then click the game.
- Drag it to move it. The × on its corner takes it off. Arrow keys move a picked one 10 at a time (with Shift, 1).
Layout has its own Undo and Redo, and every change is one step. on the game lists what you put there, each with a size slider. A decoration sits behind every sprite and touches nothing: the player walks in front of it. In a game with levels, pick a level's tab under the game first to decorate that level only; with no tab picked, it shows on every level. Each one is a line in the DECOR list in your code: which picture, where its middle is (x, y), and how big (size).
Each sprite that starts at two plain numbers, like createSprite(300, 555, 90, 24), has a dashed box: drag it, or press the arrow keys, and those two numbers change on that line. A sprite made in a loop or at a random spot has no box.
The code·
Your whole program, as Blocks or Text: the same code, and switching never changes it. Solid shows the blocks solid instead of see-through; A- and A+ change the text size; Find (Ctrl F) finds, and Ctrl H replaces. A game longer than 650 lines opens as text. Click a line number to set a breakpoint.
The checker reads your code every time it changes and gives the game a stage, the ones real game studios ship through. The stage sits on the Code button under the game everywhere in the studio, with the one move that climbs to the next:
| stage | means | the moves that climb |
|---|---|---|
| won't start | will not run as written | the first error, by name: fix it |
| prototype | runs, with no start or end screen yet | a start screen and an end |
| alpha | a whole game, with its own screens | a way to play again; remove sprites when they are done |
| beta | plays again and cleans up its sprites | split draw() into named functions; fewer loose variables; one function instead of copies; label each section with a comment |
| gold | built the way finished games are built |
Click a finding to go to its line. Ask player two to fix it hands it to player two. Every block has its own page in the reference, and How games are written shows each habit with a before and after.