MakeCode Arcade
MakeCode Arcade is a free Microsoft block programming environment designed specifically to make games. Learning to use MakeCode is easy & fun.
If you're not already familiar with the basics of MakeCode Arcade, check out this guide on creating a character sprite and moving it with controls.
To start, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade.
These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games:
For intermediate-level techniques, check out:
And, for the full immersion in Trash Panda game lore, check out Trash Panda: The Game!
Garbage Day
To start with, let's load the completed version of Trash Panda 2: Garbage Day and try it out.
Start by launching MakeCode Arcade using the Google Chrome web browser. Then, download the arcade-Trash-Panda-2-Garbage-Day.png file above by right-clicking on the image and saving it to your computer.
Load the Code
This is a special .png file that contains not only an image, but the entire game is embedded in it as well!
Simply drag it from the location to which you saved the image on your computer (such as the desktop as shown here) onto the Chrome browser window that is already running MakeCode Arcade (MCA). Note that the image in this graphic is of a different game, but you'll be dragging the Trash Panda 2: Garbage Day .png file.
This will open the code into the MCA editor.
Play It
Time to try out the game! The instructions will let you know that it needs to be played in the dark if you're playing on your PyGamer or PyBade, however, you can switch to debug mode in order to play in the browser for now.
To do so, go to the on start block and flip the debug variable value to true.
Debug Mode
Setting up a debug mode can be very helpful while you're developing a game. It allows you to do things such as skip over a set of intro screens, or give yourself unlimited lives.
In this case, it's part of a conditional check done to see if either the light level is low enough or the debug is true.
Once you're in debug mode, try the game in the browser simulator.
You'll use the direction keys/arrows to move the flashlight around to catch the critters from making a mess!
The gameplay is based on quickly shining the light on either the raccoon or the cat. They have glowing eyes with subtle difference that the player will learn to spot, and they also throw different trash out -- raccoons throw cans, cats throw fishbones.
Since the raccoons are worth more points, players will need to determine if its worth seeking them out, or going for the quicker points when the cat is nearer to the spotlight.
Next, we'll take a look at how some of the game's unique features work. Since many of the blocks are typical to most MakeCode Arcade games (see the list of links above), we won't go over every single block, but instead take a closer look at the concepts and techniques that are unique to this game.
Tile Mapped Hiding Spots
We need to set up a set of positions for the characters to hide. To do this, we'll create an array of red tile maps to use for spawning the raccoon and cat sprites.
With the tile map created, we created a variable called hidingPlaces and set it to the array of all red tiles. This makes it convenient to iterate those tiles with a for loop.
We want to set the tiles to have no sprite, so they just act like coordinate spots but remain invisible, so in our for loop we run through the array and for each red tile use the set tile red to sprite block without setting any pixels into the sprite.
Character Setup
When the level begins and each time one of the characters is spotted with the flashlight, we'll call the resetCharcters function to set them up.
This function creates the sprite for the raccoon and cat and then creates a variable called catHidingPlace, which is set to a random pick of the hidingPlaces tile array.
We then us a while loop to pick a random tile for the racoonHidingPlace variable. The while loop will run until the two hiding places are different numbers, so that the characters don't appear on the same spot.
Once the variables are set to unique numbers (from 0-7) we us on top of hidingPlaces get value at raccoon/catHidingPlace to place the sprites.
Then, we check if it's nightMode or dayMode and set the images to either glowing eye sprites, or nothing at all so they don't appear during the day.
Night Mode
We'll use the light sensor on the PyGamer or PyBadge to determine if it's night (or at least dark!) when the player plays the game.
To do this, we need to add the controller extension to MakeCode Arcade. This adds a number of additional controller blocks that can be used with handheld devices, including light sensing, vibration/accelerometer sensing, temperature sensing, and more.
We'll use the light level block, which returns a value from 0-255 depending on the dark-to-light levels seen by the sensor on the PyGamer or PyBadge.
Once the player has gotten through the introduction of the game, they'll press the A button to begin. Here we see that this then checks that the raccoon sprite has been created (this is a way of avoiding a chicken-or-the-egg paradox if the button is pressed before the game is ready).
Next, we check the light level to see that it is dark. You can fine tune this value, but I found that 15 is a good setting for allowing the player to hold the PyGamer under a desk or table and still play in a partially lit room.
If the light level comes back as dark enough, we call the nightStart function and flip the levelStarted variable to true -- otherwise, we go to dayStart and show the daytime scene, asking the player to go somewhere dark and try again!
Gameplay
Once the level is set up, let's look at the actual gameplay loops. There are just a few things that happen:
- 30 second countdown timer begins
- a raccoon eyes and cat eyes sprite each are placed on a random red (hidden) tile
- the raccoon starts throwing a can in a random direction every two seconds
- the cat starts throwing fish bones in random directions every two and a half seconds
- when the player overlaps the flashlight spotlight with a raccoon or cat, the image of the critter is revealed, points are scored, the characters are reset to new positions, and the player flashlight is reset to a starting position
In this example, if the level has started, we check the cat sprite to see which quadrant of the screen it's on via the x and y values.
We then set a variable fishVX to a random number in a sensible range depending on the cat's position, so that it won't throw the trash off screen. This variable will be used to set he velocity x of the fishbone.
The same is done for the fishVY variable, except for the vertical throw. If the cat is lower on screen, the throw will be stronger.
Then, the fishbone sprite projectile is created with an appropriate pixel art representation and the chosen velocities on x and y.
So that we can have the appearance of gravity, we'll set the fishbone ay (accelration y) to 250. This way, after the initial velocity impulse shoots the fishbone into the air, the downward acceleration will take over, making it arc and fall to the bottom of the screen.
Overlap
When the player shines the light on one of the critters, here's what we do:
- Play a complaining sort of sound glide using the
music.playSound('340,400^220")notation in JavaScript as we did in the original Trash Panda game - Swap the sprite to the full character
- Have the character exclaim "drat" or "mrrowr" using the sprite say " " block
- turn off the flashlight sprite
- pause briefly
- destroy the character sprite
- increase the score
- reset the player's flashlight sprite image and position
- reset the characters to continue gameplay
Finally, when the countdown ends, the game is over and the final score is displayed! Have fun trying to get your best score!!
