Quick recap: last time we made a start on this MakeCode Arcade project — who can remember one thing a sprite is? Today we'll keep building Crafting Pixel Characters: you'll design your own pixel character and make it move with the arrow keys. Open the project you saved earlier and have your device ready — we'll predict first, then build, run and fix.
Open the lesson by linking back to the project students saved earlier — ask what a sprite is to recap. Make clear today's task is to design a character and make it move. Have everyone reopen their saved project before you move on; have a fallback ready for anyone who needs to start fresh.
Before anyone runs anything, look at what we are about to build and commit to a prediction. What will the program do when it runs? What will you see on screen first, and what will happen when you press an arrow key? Say your prediction to your partner so we can check it later.
This is the PRIMM predict beat. Before anything runs, ask students what they expect to see first and what an arrow-key press will do. Collect two or three predictions and write them on the board so you can return to them at the make-sense step. Keep it quick — no one runs code yet.
Start by creating a new project on MakeCode Arcade. You can do this by going to the MakeCode Arcade website here and clicking on 'New Project'.
Model opening a new project on the board so students see the starting screen. Key question: where does a new project begin? Watch for students who get lost between tabs or lose their earlier work — make sure they are in the right project. Support: pause after this step so slower starters catch up.
Now let's create a sprite for your character. This is the pixel art that represents your character in the game. Add the following code:
let mySprite = sprites.create(img`...`, SpriteKind.Player)
In the img`...` section, you can draw your character using the pixel editor that appears when you click it. Make your character unique to you!
Model adding the sprite on the board and clicking into the pixel editor so students see where they draw their character. Encourage genuinely unique artwork. The bug to watch for: a blank pixel editor closed too soon, so nothing visible appears — prompt them to draw a few pixels first. Note the sprite name for later, as control depends on it.
Let's make your character move! We will use the controller blocks to allow your character to move when the arrow keys are pressed. Add the following code:
controller.moveSprite(mySprite)
Now you can control your sprite using the arrow keys in the simulator.
Demonstrate adding the control on the board and run the simulator straight away to show movement. Key question: which sprite is being controlled? The common bug is the control not linking to the sprite they created — check the names match. Extension: ask early finishers to investigate changing the movement speed.
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.