Get Started in MakeCode Arcade
45-60 min
Ages 11+
What Will You Learn?
We will learn to create our own video game with MakeCode Arcade, we will know variables, conditions, functions, arrays and animations to use your creativity and create something fun.
Start your Code
Step 1
Enter the following link: https://makecode.com/_Ks0dmMTvMLA7 in this you will find everything you need for your video game.
At the top is the name of the project and on the right there are two buttons, press the “Edit Code”. In this new tab you are going to work, the platform is divided into three, the part on the right is the work area, the middle one is where you find the blocks, and the last one is the simulator, you will see the result of the code.
Step 2
To move the artboard in the lower right there are two buttons, one to zoom in and the other to zoom out.
Move to the first row of the code on your left, you will start with the green block “on Start”
Step 3
Select the “set Background Image to” block and take it over the green “On Start” block. When you zoom in, you see how a gray area becomes and you release it, now it is inside and you can see the result in the simulator, it is the Maker Camp image.
Step 4
Now you will use the functions, which are sections of code that you can use when you call them. You already have a “setupFrames” created, it will have most of the visuals and animations of the game. You are going to drag the “set birdFrames” block into the blue function. Now you repeat this with the “set makeyFrames” block, place it below the green block and select the “set obstacles” block, drag it below the last green block, as in the image.
You just finished a third of your code, amazing work!
"Forever" and "If" Statements
Step 5
Move on the work table and go to the second line, to the green “forever” block. Select the block “if scene = 1” and place it in the green “forever” block. Select the block “if scene> 2” and drag it under the blue block.
This will cause that when the variable “scene” changes, we change the asset, to the bottom of the game.
Step 6
Then go down on your work table, and select the block “set makey to sprite”, and take it inside the blue block “if scene = 2” that is inside the purple block “on game update”.
This activates the animations of our character and the bird, which we created in step 2.
Step 7
We go down to our work table, select the block “stop all animation on makey” and take it into the blue block, “if scene> 2”. Now select the block “change scene by 1” and put it inside the “else” which is blue.
This will make when pressing the “A” key, change our image, by the instructions, after pressing our “A” key a second time, we enter the game, in which we can jump with this key.
Add Objects in the Background
Step 8
Congratulations, you have half your video game, it’s time to test what you have programmed in the simulator.
Go to the last blue blocks of the line we are working on. Select the “set tree to projectile” block, take it inside the blue “createTree” function, now select the “set cloud to projectile” block, take it inside the “createCloud” function.
Step 9
Move on your work table to the last green block “forever”
Select the “if scene> 2” block within the “Forever” block.
Then select the block “if scene> 2” and place it inside the purple block of “On game update every 1000 ms”, select the block “if 40% chance then” you place inside the if block that you just placed. This will create our trees.
Step 10
Select the block “if scene> 2” and place it inside the purple block of “On game update every 1000 ms”.
Change the Score
Step 11
Amazing! You are almost done with your video game
Go down on your work table, the purple block “on Sprite” generates the game over, go down a little more and select the block “change score by 1”. Take it inside the blue block “on destroyed sprite of kind obstacle”.
Step 12
Now select the first block “if scene> 2”, take it to the purple block “on game update”. Finally, drag your block “if scene> 2”, take it to the purple block “” on game update every 200ms “.
Download your game
Step 13
Congratulations! You are done programming your video game.
Next to the download button, there are three points, press them, a menu will be displayed, select “Choose your hardware”, press the GameGo, press the three points again, and press the new option “Pair device”, follow the steps that appear.
Step 14
Finally press download.
Clever! Play, have fun and take your video game everywhere.
What's Next?
You can experiment by changing the colors of the obstacles or the background: on the work table there is a menu with three buttons, you are in “Blocks”, select “Assets”, in this area are all the visual elements of the game, select the object that you will change , you will see the Asset preview section and press edit. In this new space you will be able to change the color, the style or select new elements from the gallery.
When you finish, press the green button, and return to the Blocks area
Change the effect of Game Over: Go to the right of your artboard and find our game over block “on sprite of kind player overlaps othersprite of kind Obstacle”. Press the “melt” rectangle and different options will be displayed, so it’s time to experiment and test them, select the one you want and test your game.
Further Resources
Learn More!
About MoonMakers
MoonMakers — led by Camila and Diego Luna — are a community of creators passionate about knowledge. A Makerspace, an open space with different digital manufacturing machines. And a YouTube channel where we promote science, technology and the maker movement.
MoonMakers have collaborated with companies such as: Sesame Street, Make Community and in Mexico with Educational Television and Fundación Televisa, creating educational content.
We have given workshops throughout the Mexican Republic with: Talent Land, Secretary of Education in Jalisco, Conacyt, Centro Cultural España.
Materials:
- GameGo (or MakeCode Arcade compatible console)
- A micro usb cable
- A computer with internet access
- Link to the project: https://makecode.com/_Ks0dmMTvMLA7
Vocabulary:
variables: In programming, a variable is made up of a space in the storage system and a symbolic name that is associated with said space. That space contains a known or unknown amount of information.
Functions: Functions are a widely used element in programming. They package and 'isolate' from the rest of the program a piece of code that performs some specific task.
if: An if in programming is used to evaluate a conditional expression: if the condition is met (it is true), it will execute a block of code. If it is false, it is possible to execute other statements.
array: It is a type of structured data that allows storing a homogeneous set of data, that is, all of them of the same type and related.
runner-type video games: The concept of these games is as follows: a character moves non-stop on an 'endless' track, while dodging various obstacles.
