T2W6: Game Projects Continued
We have about two more weeks for game programming before we will switch to soldering and building our electronic clock kits. So I'd like everyone to be working on their game project. If you still don't know what you want to do, I have a game that I made a couple years ago and I can write up step-by-step instructions for coding it - follow the instructions while adding your own customizations and you will have a game! I'll have the first set of instructions ready by Friday.
I'm also learning that there are lots of extensions people have written that can help with games but aren't in the basic menu set. Here is a list of MakeCode Arcade programming resources, including extensions that add features to the Arcade programming environment. There are also links to some amazingly complex games people have done - they are not guaranteed to run well on the Chromebooks!
Tutorial Videos
I found some video tutorials on making different types of games that might be helpful for your games. They are YouTube videos instead of going step-by-step in the MakeCode editor. Maybe you can find one that is close to your game type and watch it for tips if you get stuck while you are waiting for help.
Space Shooter Game tutorial (4 videos)
Platformer Game tutorial (3 videos)
Tower Defense/Plants vs. Zombies game - "Slugs vs. Salads" (5 videos)
Simple Tile Map maze game (2 videos)
Racing game (2 videos)
Gardening game (8 videos!) with tile map and pop-up tool inventory - very complex game!
MakeCode Arcade Trick-or-treat game
For people that aren't working on their own games already, here is a game I made a couple of years ago for Halloween. The object is to collect the treats while avoiding the cars that come at you from all directions. MakeCode Arcade has lots of built-in features makes writing a game like this pretty simple, we will use MakeCode's sprites and collision detection.
To start, go to the MakeCode Arcade website: https://arcade.makecode.com/. Click on the "New Project" panel with a plus sign. MakeCode Arcade will ask for your project name and open a new window with just an "on start" structure to start programming. This will be where we set up the game elements and initialize variables.
On Start event
Add the following blocks to the "on start" structure:
From the SCENE menu, set background color (to orange or whatever you'd like)
From the SPRITES menu, create a sprite called PlayerSprite, pick the image to use, and make it type "Player"
From the CONTROLLER menu, set up PlayerSprite to move with buttons and speed vx=100, vy=100
From SPRITES->Effects, set PlayerSprite to stay in screen
From INFO, set the max number of lives to 3 - this displays as hearts in the corner of the screen
Also from INFO, set the score to 0 - this displays in the other corner as you play
It should look like this:
New Treat Function
We will use a function to create the treat and display it at a random location on the screen because we need to run this function from multiple places in the game code. Under the ADVANCED->Functions, click "Make a Function..." and name it "NewTreat".
Drag the NewTreat function structure to your code window. NewTreat needs to create a sprite for the treat at a random position on the screen. From SPRITES->Create, set a sprite named "TreatSprite" to the image of your choice (I picked a donut but you could draw some candy) and make it type Food. Then set TreatSprite position to random values of x and y using the MATH->pick random function. The screen is 160x120 pixels so I picked ranges of x=10 to 150 and y=10 to 110 so the sprites don't get cut off at the edges. Here is how it should look:
Add a call to NewTreat at the end of your "on start" structure to display the first treat on the screen.
Collecting the Treat
The sprites in MakeCode Arcade have built-in collision detection, so you can easily tell when one sprite hits another on your screen. We will use this to collect the treats when the PlayerSprite is moved over the TreatSprite.
From SPRITES->Overlaps add a "on sprite of kind X overlaps otherSprite of kind Y" structure. This is an event handler that will be run whenever the player sprite hits the treat sprite. In the event structure, we will:
From INFO, change score by 1 (player gets a point for collecting the treat)
From SPRITES, destroy otherSprite (make the treat sprite disappear)
From MUSIC, play sound [ba ding]
Call function NewTreat to display the next treat on the screen
Testing the Game So Far
With these three elements you should be able to run the game and collect treats. Feel free to experiment with the music, images, and animations to get the look you want.
Next week we will add an element of danger to our candy collection - cars driving in all directions!
Saving Your Projects
You can save your projects on your Chromebook drive for use in the future. At the bottom of the MakeCode window, and click on the floppy disk icon to the right of the box with your project's name. The file should be saved as "arcade-YOURNAME.png". This image file has the program code embedded in it. On the first page of the MakeCode website there is an "Import" button that will allow you to read this .PNG file and edit the code.