This code along has finished! ⌚
You can watch it back by playing the video!
The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!
1 - Create a new Arcade project
Go to the Arcade MakeCode website and create a new project.
2 - Add a sprite
When we add a sprite to an Arcade project, we add it by putting it into a variable. We normally use variables to store numbers and text but we can also put more complicated things in them like sprites!
Add the following code to your project.
let mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Player)
This creates a variable called 'mySprite' and stores a sprite of kind Player in the variable. There are different types of sprites such as:
- Player - for sprites that are your character in the game.
- Projectile - for bullets, rockets or anything you want to fire!
- Food - for health packs, potions etc.
- Enemy - for enemy sprites that you play against or attack you.
- or you can even create your own kind of sprite!
Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.
3 - Choose a sprite from the gallery
You can paint and design your own sprite or you can choose one from the gallery.
let mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
4 - Move your sprite
In Arcade we have a total of eight buttons (4 directions, A, B, MENU and RESET) and we can program each of these.
Arcade also comes with useful blocks that let's us program somethings quickly. Add the following new code block to your project to program your sprite to move with the up, down, left and right buttons.
let mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
After you add the block try moving the sprite using the direction buttons in the simulator.
5 - Draw the tile map
In Arcade we can create tile maps that our players can move around and through.
Add the following new code block and then go into the editor to draw a simple map that just has a border all the way around the edge.
let mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level3`)
Once you have drawn your map, use the direction buttons to move your sprite again, you will notice that your sprite can move over the tiles you have drawn. This is because we have not drawn any walls yet.
6 - Draw the walls
A wall in Arcade is a tile that you cannot move through. We draw the walls separately using the editor.
Open the editor again but this time choose the 'Draw Walls' tool. Then draw walls over the tiles that you drew in the previous step.
Now when you try and move your sprite over the tiles it won't be able to as they are walls.
7 - Camera follow sprite
At the moment when you move down your sprite will move off the screen. This is because the tile map is bigger than the screen.
Add the following new code block to make the camera follow your sprite as you move around the tile map.
let mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level3`)
scene.cameraFollowSprite(mySprite)
Now when you move around the map the camera will follow your sprite.
8 - Add some projectiles
Now let's add some skill into the game. We're going to make a projectile fire across the map every 2 seconds. You will need to dodge them otherwise you'll lose a life if they hit you.
Add the following code to your project.
game.onUpdateInterval(2000, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, 50, 50)
})
Open the editor and paint your own design for the projectile.
9 - Set their direction and speed
A projectile is a motion sprite that moves from the location it’s created at. It moves with speeds (velocities vx and vy) that you set in both the horizontal and vertical directions.
The side of the screen that the projectile starts from depends on the direction of the velocity values it’s given. The vx and vy velocities have either positive or negative values which determine the direction. The projectile starts from a side of the screen based on the velocity direction shown in the following table.
| Side | vx | vy |
|---|---|---|
| upper left | positive | positive |
| lower left | positive | negative |
| upper right | negative | positive |
| lower right | negative | negative |
After you have designed your projectile, add some (pick random) blocks into the vx and vy boxes as follows. This will randomise the speed and direction the projectiles come from.
game.onUpdateInterval(2000, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . 5 5 5 5 5 5 5 . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 f f 5 5 5 5 5 5 f f . .
. . 5 5 5 f f 5 5 5 5 5 f 5 5 .
. . 5 5 5 5 f f 5 5 5 f f 5 5 5
. . 5 5 5 5 5 f 5 5 5 f 5 5 5 5
. . 5 5 5 5 5 5 5 5 5 5 5 5 5 5
. . 5 5 f 5 5 5 5 5 5 5 f 5 5 .
. . 5 5 5 f 5 5 5 5 5 f f 5 5 .
. . 5 5 5 5 f f f f f f 5 5 . .
. . 5 5 5 5 5 5 5 5 5 5 5 . . .
. . . . 5 5 5 5 5 5 5 5 . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, randint(-50, 50), randint(-50, 50))
})
10 - Detect overlap
Now let's add some code to detect when a projectile hits your sprite (an overlap) and when it does play a sound and do an effect.
Add the following code to your project.
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
music.powerDown.play()
mySprite.startEffect(effects.spray, 500)
})
let mySprite: Sprite = null
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level3`)
scene.cameraFollowSprite(mySprite)
mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
11 - Lose a life
At the moment we haven't set any lives for our game so add the following new code to:
- start off with 3 lives.
- lose a life when you hit a projectile.
- destroy that projectile.
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
music.powerDown.play()
mySprite.startEffect(effects.spray, 500)
info.changeLifeBy(-1)
otherSprite.destroy()
})
let projectile: Sprite = null
let mySprite: Sprite = null
info.setLife(3)
mySprite = sprites.create(img`
. . . . . . f f f f . . . . . .
. . . . f f f 2 2 f f f . . . .
. . . f f f 2 2 2 2 f f f . . .
. . f f f e e e e e e f f f . .
. . f f e 2 2 2 2 2 2 e e f . .
. . f e 2 f f f f f f 2 e f . .
. . f f f f e e e e f f f f . .
. f f e f b f 4 4 f b f e f f .
. f e e 4 1 f d d f 1 4 e e f .
. . f e e d d d d d d e e f . .
. . . f e e 4 4 4 4 e e f . . .
. . e 4 f 2 2 2 2 2 2 f 4 e . .
. . 4 d f 2 2 2 2 2 2 f d 4 . .
. . 4 4 f 4 4 5 5 4 4 f 4 4 . .
. . . . . f f f f f f . . . . .
. . . . . f f . . f f . . . . .
`, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level3`)
scene.cameraFollowSprite(mySprite)
game.onUpdateInterval(2000, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . 5 5 5 5 5 5 5 . . . .
. . . 5 5 5 5 5 5 5 5 5 5 . . .
. . 5 5 f f 5 5 5 5 5 5 f f . .
. . 5 5 5 f f 5 5 5 5 5 f 5 5 .
. . 5 5 5 5 f f 5 5 5 f f 5 5 5
. . 5 5 5 5 5 f 5 5 5 f 5 5 5 5
. . 5 5 5 5 5 5 5 5 5 5 5 5 5 5
. . 5 5 f 5 5 5 5 5 5 5 f 5 5 .
. . 5 5 5 f 5 5 5 5 5 f f 5 5 .
. . 5 5 5 5 f f f f f f 5 5 . .
. . 5 5 5 5 5 5 5 5 5 5 5 . . .
. . . . 5 5 5 5 5 5 5 5 . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, randint(-50, 50), randint(-50, 50))
})
12 - Send the code to your handheld
That's it you've created your first game in Arcade, have fun playing it and try adding something new into the game.
If you do have an Arcade handheld computer download the code onto it so you can play it on the go!
Give your project a name and send it to your Arcade game console (i.e. BrainPad Arcade) by following these steps:
- Type "your project name" into the Project Name box.
- Connect your game console to your computer using the USB cable.
- Click the 'Download' button (a file called 'arcade-project-name.uf2' will be downloaded to your computer).
- Open the folder on your computer where the file downloaded to.
- Right click on the file.
- Click Send To.
- Click Arcade (or whatever your game console is listed as).
Join our club 😃
Create your profile, earn points & badges and learn how to code!
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.