MakeCode Arcade
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 beta.
These MakeCode Arcade guides are designed to take you through the fundamentals before tackling more complex games:
For intermediate-level techniques, check out:
Trash Panda
To begin with, let's load the finished version of MakeCode Arcade Trash Panda and try it out.
Start by launching MakeCode Arcade beta using the Google Chrome web browser. Then, download the arcade-TrashPanda.png file above by right-clicking on the image below 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 png file.
This will open the code into the MCA editor.
Play It
Try out the game! As Lynn the Trash Panda, you need to mash the A or B button to climb the right or left side of the building. Avoid the falling bricks and flying crows -- they'll bump Lynn down the building a bit and she'll lose one heart!
If you see a delicious, huge slice of pizza one of the building dwellers has set on an open window sill, eat it! You'll gain one heart back.
Reach the top and you win the game -- the quicker you do so, the higher your score. This game is hard, so practice to get really good!
How it Works
Now, let's look at how it works. Some sections are similar to the previous games we've built, so we'll look at those only briefly, and got into more detail on the new techniques used.
On Start
In the on start block we'll first call the function named Intro. Here, we set the background image to act as a game title/splash screen.
Then, we call another function called bgm (background music) to loop four times with the repeat 4 times loop.
The bgm function contains the play tone and rest blocks of a startup song.
Next, we pause for a second and then give the player two screens of instructions using the show long text blocks, which must be advanced by pressing the A button.
Background and Tile Map
Next, we'll set background image to a city skyline, and then set tile map.
The tile map will act the same as a scrolling platformer map, except vertically rather than horizontally as we did in the Ruby platformer game.
Each index color block is used to place a different tile and in some cases will also be the spawn point for sprite characters, enemies, and food.
We'll look at these individual tiles in a moment.
Goal Setup
The goal is for Lynn to climb to the top of the building. We'll place sprites on some of the tile map positions to represent the UBS logo at the top of the building, as well as generic looking yellow and red building sprites that will be on the actual blocks the character needs to overlap to win.
Level Setup
In the levelSetup function we'll place the rest of the tiles. Have another look at the tile map to see where each of these images is being placed.
Lynn Character Setup
Now we'll set up the main character, Lynn the Trash Panda. This one is big, so we'll look at it in a few sections.
First, we'll create the Lynn character sprite and set her lives to 7, and then place her x/y position and z depth.
We'll have her appear on top of the blue tile on the tile map.
So that there is gravity in the scene for her to fight, we'll set Lynn ay (acceleration y) to 200.
Lynn Animation
Next up are Lynn's climbing animation and idle animation cycles. We'll create one set facing left (when she's on the right of the building) and one facing left.
We'll also set a single frame animation of Lynn when she's idle. This way we can switch between idle and climbing easily when the player is or isn't pressing one of the buttons.
Camera Nulls
The next thing we'll do is a bit tricky. We will need to trick the camera into following Lynn as she climbs the building, but not keep her in the center of the frame, which is the default behavior for the camera follow sprite block.
Instead, we want to center the camera with a 35 pixel offset to the left or right, depending on if she's on the right or left side of the building.
This will keep the building from seeming like it's jumping around the scene.
To do this, we'll create a pair of sprites to follow that we'll consider as transform nulls. They will be set to move with Lynn, but with their own relative offset on the x-axis.
These will be invisible during gameplay, but to help us visualize them and understand the concept, we'll create one set of them that have marker graphics, and another set that's invisible. By flipping the false to true in the if...else logic loop, we can turn on (or off) these visualization markers.
Pizza Time
It gets pretty tiring to climb a big, tall building when you're a sweet little trash panda. Thankfully, a thoughtful human will place a giant slice of pizza out of a randomly selected window for Lynn to eat!
In this function we'll set up the food, make a pizza slice sprite with a z depth of 1, and then use the place pizza on top of random white tile block to have it appear on one of the white tiles in the tile map.
Various Variables
These are the last few on start blocks to take care of. First, we'll set the center camera position. (Later the Lynn nulls will take care of this).
Then, we set up some variables for gameplay (we'll see how these are used momentarily:
- dropBricks = true
- sendCrows = true
- goalMet = false
- GameOn = true
activate animation Idle_Right on Lynn sets her in the ready position for game start.
Then, we'll set score to 1000 -- as the game progresses, this number will be counting down, so that the player's score is based on how quickly they reach the goal.
Text editor powered by tinymce.
