Resources for the 'Game On!' Creative Computing Club.
During this workshop, you will create a game using MakeCode Arcade.
This page recaps what we discussed as a group.
To skip to the examples and ideas, click here.
Go to the MakeCode Arcade editor, and click New Project.
You should see a screen like the picture below, with the emulator on the left, the menu in the middle, and your code on the right.
You create your program by dragging-and-dropping blocks from the menu onto the coding area, and slotting them together - similar to Scratch.
For the rest of these instructions, we will walk through creating the pancake collecting game shown above.
Click on the Scene menu to find blocks related to the background of your game.
Choose the set background image to [] block, and drag it into your on start block.
Click on the grey box in this block to design your background, or choose from the gallery.
Choose the set mySprite to sprite [] of kind Player block, and drag it into your on start block, underneath the background block.
Click on the grey box in this block to design your sprite, then rename it by clicking on the red mySprite box - what is your character called?
You should now see on your emulator your background, and your chosen sprite in the middle of the screen.
Now is a good time to save your game so you don't lose it!
To start the game with your sprite in a different place, open the Sprite menu again, and find the set mySprite position to x 0 y 0 block.
Place this block underneath your current code, still inside the on start loop.
Because we renamed our sprite, change mySprite to the name of your sprite (later in the game you will have multiple sprites to choose from!).
Your sprite has now moved up to the top left corner of the emulator! This is because the position is set to x=0, y=0, which are the coordinates of the top left.
Change the position by choosing new coordinates, by clicking on the x or y option on the block - choose the best place for your sprite to start the game!
Remember to save your game!
Click on the Controller menu to find blocks related to movement.
Choose the move mySprite with buttons block, and add it to your code.
Remember to choose your sprite's name, so the game knows which one to move!
Try controlling your sprite using the joystick on the emulator. You can also control it using either the arrow keys or WASD on your keyboard.
You probably noticed that your sprite can disappear off the side of the screen!
Look in the Sprite menu for the set mySprite stay in screen block and add it to your code. Update the name, and turn it on!
Remember to save your game!
We currently have a cool background, and our scientist character who we can move around the screen. Next, we add her pancake making machine!
The same as you did for your first sprite, use the set mySprite to sprite [] of kind Player block, to create the pancake machine.
Rename it to something else, such as Machine, and design your sprite or choose one from the gallery.
The last part of that block says that the sprite is a Player - this isn't true for the machine!
Click the box to see the list of options, then choose Add a new kind as none of the options fit! For example, say that it is a Device or Object.
Where do you want the machine to be at the start of your game? Find the set mySprite position to x 0 y 0, remembering to choose the correct sprite, and position it in a good location.
Your code so far should look something like the picture below - you have create two sprites and set them up for the start of the game.
Now is a good time to save your game so you don't lose it!
We are going to start a new loop now - a block of code that other things can slot inside - to decide what happens when the two sprites overlap.
Open the Sprites menu, and scroll down until you find the on sprite of kind Player overlaps with otherSprite of kind Player block, and add it to your main coding window.
We don't care what happens when a Player overlaps with a Player, because we only have one Player! So change the second option to Device (or whatever you classified your machine as).
Also in the Sprite menu, find the mySprite start spray effect block as slot it into the overlap block you just created.
The next step is very important!
The overlap block works by saying what happens when any Player overlaps with any Device, so if we name which sprite starts the effect, our code will not work as expected later on in the game, when we have more sprites.
To make sure that the effect happens to the specific Device that the Player overlaps (touches), drag the red otherSprite oval from the overlap block, and drop it into the effect block, on top of the mySprite option. See the picture below.
Make sure that this works by moving your character onto the machine, the machine should start a spray effect!
At the moment, the spray effect will not stop... click the plus button on the effect block to set how long the effect continues for.
Which effect do you want to use? The code below shows the hearts effect running for 500ms.
Remember to save your game!
Time to add the pancakes!
We want to machine to fling pancakes on a regular basis. Open the Game menu and pull out the on game update every 500ms loop - you can change the number of miliseconds to make the pancakes appear more or less often.
Moving sprites are projectiles, and you can find the block you need in the Sprite menu - set projectile to projectile [] from mySprite with vx 50 vy 50.
There is a lot happening in this block, so lets take things one step at a time.
Rename the projectile to Pancake, so you know what is being created.
Click in the grey box to design your pancake - how big or small you make the picture will determine how easy they are to collect!
Change from mySprite to from Machine - this chooses where the pancakes start.
vx and vy are the velocity - speed in a direction. vx shows how fast it moves left/right across the screen, and vy show fast up/down. If you keep the numbers equal, it will move diagonally!
Before changing the velocity, look at how the pancakes are moving - which direction do they go?
Now is a good time to save your game so you don't lose it!
It's not much of a game if you know where the projectiles are going to move every time, so let's make it random!
Look in the Math menu for the pick random from 0 to 10 block, and drop it into the number slot of vx. What do you need your minimum and maximum to be, based on how the pancakes moved in your experiments?
Repeat the above step for vy, and check that everything works.
Finally, think about what you want your game to be, and decide whether pancakes are Food, Enemy or something else.
Find the set mySprite kind to Player block in the Sprite menu, and reclassify your pancakes to make it easier to use them in your game later.
Remember to save your game!
Final step in making a working game, is catching the pancakes and adding up the score.
We want another overlap block for this - this time checking when the Player overlaps with Food or Enemy, or whatever you classified your pancakes as.
Into this loop drop a destroy mySprite block from the Sprites menu, and remember to update it to destroy otherSprite, so that the specific pancake you get to is the one that is destroyed.
Click the plus button to add an effect that happens when the sprite is destroyed, and for how long.
Finally, the score! Look in the Info menu for change score by 1.
Remember to save your game!
You can download a working copy of the game so far, to explore and edit, by opening this file and clicking 'Edit Code'.
To open it, drag-and-drop it into the MakeCode Arcade editor.
Use the steps above to help you edit the game to make it your own - change the background and sprites, and try changing the speed and direction of the pancakes as well!
Get creative and add different features to your game - what theme do you want to use?
The links below will help you with a couple of our ideas!
Remember to save your game whenever you make changes!