let characters: Image[] = []
characters = [
pizzaassets.P1,
pizzaassets.P2,
pizzaassets.P3,
pizzaassets.P4
]{3. Set the Scene}
Let’s decide where the action happens.
:tree: Open the
||scene:Scene||category and drag
||scene:set background image to [ ]||
into the end of the
||loops(noclick): on start||
container already in the workspace.:paint brush: Click the empty square in the background block and flip to the Gallery tab.
then choose the first background image called City.
let characters: Image[] = []
characters = [
pizzaassets.P1,
pizzaassets.P2,
pizzaassets.P3,
pizzaassets.P4
]
//@highlight
scene.setBackgroundImage(pizzaassets.City){4. Set players}
Add Player 1
- :suitcase: Open the
||pizza:Pizza||category and drag
||pizza:set game for [1] player(s) with [characters]||
into the end of the
||loops(noclick): on start||
container already in the workspace.
~hint Pizza category? 🍕
Within special tutorials, you’ll sometimes see custom categories that we don’t offer in our normal interface. These categories are Extensions.
When creating custom projects or tutorials, people can craft their own blocks that others can add into their toolbox as an extension. Since we can’t get to the Extensions gallery from a tutorial, the categories you need have been provided in the toolbox by default.
If you want to use the ||pizza:Pizza|| category in another tutorial someday, make sure to grab the share link for this finished project and you’ll be able to import the blocks from this tutorial into another project!
hint~
let characters: Image[] = []
characters = [
pizzaassets.P1,
pizzaassets.P2,
pizzaassets.P3,
pizzaassets.P4
]
scene.setBackgroundImage(pizzaassets.City)
//@highlight
pizza.setPlayersWith (characters, 1){5. Check Your Game!}
- :binoculars: Look at your project in the game window to see what your code has done.
You should see a single sprite in the game window that looks like the first image in your array.
Click on the game window and try moving your sprite using the arrow keys or joypad.
~hint What’s a sprite? 💡
In Arcade, each character or image that does something is called a SPRITE.
Sprites have properties that you can use and change – things like scale, position, and lifespan are all properties of sprites.
Our players will be sprites, too.
hint~
{6. Add more}
Add more players.
- :game: From the
||mp:Multiplayer||category, drag the
||mp:on [thisPlayer][connected]||
bundle into an empty area of the workspace.
Now, when other players join, more sprites will appear in the game window.
Test it out by clicking the player icons to the left of the game window.
📝 Note: In actual game play, each player will join in order. To simulate this, make sure to test with Player 1 first, then Player 2, then Player 3, etc.
//@highlight
mp.onControllerEvent(ControllerEvent.Connected, function (thisPlayer) {
pizza.setPlayersWith(characters, mp.getPlayerProperty(thisPlayer, mp.PlayerProperty.Number))
}){7. Add Pizza}
Let the Pizza Fly!
- :circle: Open the
||game:Game||category and drag the
||game: on game update every [500] ms||
bundle into an empty area of the workspace.
- :mouse pointer: Click the image square inside the bundle if you want to choose a different pizza slice from the Gallery.
//@highlight
game.onUpdateInterval(500, function () {
projectile = sprites.createProjectileFromSide(img`
. . . . . . b b b b . . . . . .
. . . . . . b 4 4 4 b . . . . .
. . . . . . b b 4 4 4 b . . . .
. . . . . b 4 b b b 4 4 b . . .
. . . . b d 5 5 5 4 b 4 4 b . .
. . . . b 3 2 3 5 5 4 e 4 4 b .
. . . b d 2 2 2 5 7 5 4 e 4 4 e
. . . b 5 3 2 3 5 5 5 5 e e e e
. . b d 7 5 5 5 3 2 3 5 5 e e e
. . b 5 5 5 5 5 2 2 2 5 5 d e e
. b 3 2 3 5 7 5 3 2 3 5 d d e 4
. b 2 2 2 5 5 5 5 5 5 d d e 4 .
b d 3 2 d 5 5 5 d d d 4 4 . . .
b 5 5 5 5 d d 4 4 4 4 . . . . .
4 d d d 4 4 4 . . . . . . . . .
4 4 4 4 . . . . . . . . . . . .
`, randint(-100, 100), randint(-100, 100))
}){8. Take a look}
- :binoculars: Take another look at your project.
You should see pizza flying every which way!
~hint Why is this happening? 🤷🏽♂️
Let’s take a look at the blocks you just added.
This event block triggers an action every 500 milliseconds. (That means, every half second, the code inside of this container will run.)
game.onUpdateInterval(500, function () { })
This block launches the projectile of your choosing from the side of the screen with a velocity that’s randomly assigned each time the code runs.
projectile = sprites.createProjectileFromSide(img`
. . . . . . b b b b . . . . . .
. . . . . . b 4 4 4 b . . . . .
. . . . . . b b 4 4 4 b . . . .
. . . . . b 4 b b b 4 4 b . . .
. . . . b d 5 5 5 4 b 4 4 b . .
. . . . b 3 2 3 5 5 4 e 4 4 b .
. . . b d 2 2 2 5 7 5 4 e 4 4 e
. . . b 5 3 2 3 5 5 5 5 e e e e
. . b d 7 5 5 5 3 2 3 5 5 e e e
. . b 5 5 5 5 5 2 2 2 5 5 d e e
. b 3 2 3 5 7 5 3 2 3 5 d d e 4
. b 2 2 2 5 5 5 5 5 5 d d e 4 .
b d 3 2 d 5 5 5 d d d 4 4 . . .
b 5 5 5 5 d d 4 4 4 4 . . . . .
4 d d d 4 4 4 . . . . . . . . .
4 4 4 4 . . . . . . . . . . . .
`, randint(-100, 100), randint(-100, 100))
hint~
~hint Tell me about events! 🕵🏿♂️
EVENTS are things that might or might not happen while the code is running. A player might press a button, a timer might run out, or one sprite might overlap with another.
Each of those things is an event that you can assign a special action to in Arcade.
hint~
~hint What are projectiles? 🕵️
In MakeCode Arcade, PROJECTILES are sprites that move on their own, often in large quantities.
Projectiles have extra properties that normal sprites don’t have. For example, they destroy themselves once they leave the screen so the user’s computer doesn’t get overwhelmed.
hint~
~hint What is velocity? 🕵🏻♀️
VELOCITY is the speed that something is moving in a certain direction.
In MakeCode, we have velocity in two directions, vx and vy.
The field vx is for the velocity going side to side.
Velocity in the x (horizontal) direction
- A vx greater than 0 will send something moving right.
- A vx less than 0 will send something moving left.
- A vx of 0 will not change its position.
The field vy is for the velocity going up and down.
Velocity in the y (vertical) direction
- A vy greater than 0 will send something moving down.
- A vy less than 0 will send something moving up.
- A vy of 0 will not change its position.
hint~
{9. Add points}
Add points when a player overlaps with a projectile.
- :paper plane: Open the
||sprites:Sprites||category and drag the
||sprites:on [sprite] of kind [Player] overlaps...||
bundle into an empty area of the workspace.
~hint What does this bundle do? 🤷🏽♂️
Let’s take a look at the blocks you just added.
This event block triggers an action every time one of your Player sprites overlaps one of the projectile sprites. (Whenever a character overlaps the pizza.)
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) { })
This block deletes the pizza sprite (otherSprite) which was overlapped. It also
adds a special disintigrate effect to the image while it’s happening.
sprites.destroy(otherSprite, effects.disintegrate, 100)
This block adds one point to the score of the Player that overlapped the pizza.
mp.changePlayerStateBy(mp.getPlayerBySprite(sprite), MultiplayerState.score, 1)hint~
//@highlight
sprites.onOverlap(SpriteKind.Player, SpriteKind.Projectile, function (sprite, otherSprite) {
sprites.destroy(otherSprite, effects.disintegrate, 100)
mp.changePlayerStateBy(mp.getPlayerBySprite(sprite), MultiplayerState.score, 1)
}){10. Test!}
- :binoculars: Test your project!
Use the multiplayer icons to test your game with each player.
Each character should get a point when they overlap pizza.
{11. First to 20 Wins!}
First to 20 wins!
- :users: Open the
||mp:Multiplayer||category and drag the
||mp:on score [20] for [thisPlayer]||
bundle into an empty area of the workspace.
~hint What does this bundle do? 🤷🏽♂️
Let’s take a look at the blocks you just added.
This event block triggers an action when a player’s score reaches 20. (It even has the potential to tell which player reached that score, though we won’t use that feature.)
mp.onScore(20, function (thisPlayer) { })
This block signals that the game should immediatedly end in a win.
game.gameOver(true)hint~
//@highlight
mp.onScore(20, function (thisPlayer) {
game.gameOver(true)
}){12. Shake it up!}
Let’s shake things up!
Let’s make things a little more competitive by allowing sprites to bump one another out of the way.
- :paper plane: Open the
||sprites:Sprites||category and drag the
||sprites:on sprite of kind [Player] overlaps...||
bundle into an empty area of the workspace.
~hint What does this bundle do? 🤷🏽♂️
Let’s take a look at the blocks you just added.
This event block triggers an action whenever two Players (characters) overlap.
sprites.onOverlap(SpriteKind.Player, SpriteKind.Player, function (sprite, otherSprite) { })
This block checks to see if the first player is holding down their (A) button. If so, the code inside will run.
if (mp.isButtonPressed(mp.getPlayerBySprite(sprite), mp.MultiplayerButton.A)) {}
This code makes it look like the camera is shaking around by 4 pixels for half a second.
scene.cameraShake(4, 500)
This is a custom block made for this tutorial. It bumps the other sprite to the opposite side of the screen from where the first sprite is located.
pizza.bumpSprite(sprite, otherSprite)
This block takes a point away from the other sprite.
mp.changePlayerStateBy(mp.getPlayerBySprite(otherSprite), MultiplayerState.score, -1)hint~
sprites.onOverlap(SpriteKind.Player, SpriteKind.Player, function (sprite, otherSprite) {
if (mp.isButtonPressed(mp.getPlayerBySprite(sprite), mp.MultiplayerButton.A)) {
scene.cameraShake(4, 500)
pizza.bumpSprite(sprite, otherSprite)
mp.changePlayerStateBy(mp.getPlayerBySprite(otherSprite), MultiplayerState.score, -1)
}
})sprites.onOverlap(SpriteKind.Player, SpriteKind.Player, function (sprite, otherSprite) {
if (mp.isButtonPressed(mp.getPlayerBySprite(sprite), mp.MultiplayerButton.A)) {
scene.cameraShake(4, 500)
pizza.bumpSprite(sprite, otherSprite)
mp.changePlayerStateBy(mp.getPlayerBySprite(otherSprite), MultiplayerState.score, -1)
}
}){13. Test!}
- :binoculars: Test your project with two or more players.
As Player 1, try holding down the (A) button (or space bar) and running into another player. What happens?
📝 Note: At the moment, a player can only bump someone with a higher number. We’ll fix that in the next step.
{14. Again}
What if the other player is holding down their (A) button? Let’s add code that reverses the whammy.
:mouse pointer: Right click on the
||logic(noclick):if||statement and when the dropdown menu appears, select Duplicate.:mouse pointer: Grab the deactivated
||logic(noclick):if||statement and snap it in beneath the original.:mouse pointer: Swap all of the
||variables(noclick):sprite||and||variables(noclick):otherSprite||variables within the second||logic(noclick):if||statement.
