You can relive the excitement of a good marble maze game -- such as Labyrinth or Marble Madness -- right on your PyBadge or PyGamer, thanks to the built-in accelerometer! Use MakeCode Arcade to code it and then you can build your own challenging levels to test your skills!

Parts

Angled shot of Adafruit PyGamer for MakeCode Arcade, CircuitPython or Arduino.
What fits in your pocket, is fully Open Source, and can run CircuitPython, MakeCode Arcade or Arduino games you write yourself? That's right, it's the Adafruit...
Out of Stock
Angled shot of a Adafruit PyBadge for MakeCode Arcade, CircuitPython, or Arduino.
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino? That's right, its the Adafruit PyBadge! We wanted to see how much we...
$34.95
In Stock
Angled Shot of Adafruit PyBadge - Low Cost.
What's the size of a credit card and can run CircuitPython, MakeCode Arcade or Arduino even when you're on a budget? That's right, it's the Adafruit...
Out of Stock
Mini Oval Speaker with Short Wires
Hear the good news! This wee speaker is a great addition to any audio project where you need 8 ohm impedance and 1W or less of power. We particularly like...
$1.95
In Stock

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:

Only use the Google Chrome browser with MakeCode!

Marble Labyrinth

To start with, let's load the completed version of Marble Labyrinth and try it out.

Start by launching MakeCode Arcade using the Google Chrome web browser. Then, download the arcade-Marble-Labyrinth.png image cartridge 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 Marble Labyrinth .png file.

This will open the code into the MCA editor.

If you're ever unsure where a MakeCode block comes from, you can often find it by matching the block's color to a category on the left side of the editor. You can also use the handy search function!

Play the Game

Try out the game before we look at how it works. You can simply hover the mouse over the simulator window to "tilt" the game console around to play.

Use the Accelerometer

In order to use the accelerometer built into the PyGamer (or PyBadge) with MakeCode Arcade, we need to add the Controller extension.

To add the extension, click on Advanced and then + Extensions.

From the next screen, click on the Controller extension.

Then, you'll be able to use extended controller features, as shown here, including the readings from the accelerometer in milli-gravities on x, y, and z axes.

Here's a minimum viable example of using the accelerometer to move a ball around the screen:

Intro Tutorial

One popular concept in game design is the notion of teaching the player how to play the game by doing, rather than including step-by-step instructions, or requiring a manual.

We'll use this method to get the player used to the tilting mechanic, and so that they have a feel for how much to tilt the PyGamer before the stakes are high.

In the intro to the game, the title "Marble Labyrinth" is pinned to the ball using the sprite say " " block, and there are no hazards. So, players will naturally tilt the ball around with the controller and eventually try crossing over the green "F" for "Finish" block, which advances them to the first real level.

Intro Tutorial

One popular concept in game design is the notion of teaching the player how to play the game by doing, rather than including step-by-step instructions, or requiring a manual.

We'll use this method to get the player used to the tilting mechanic, and so that they have a feel for how much to tilt the PyGamer before the stakes are high.

In the intro to the game, the title "Marble Labyrinth" is pinned to the ball using the sprite say " " block, and there are no hazards. So, players will naturally tilt the ball around with the controller and eventually try crossing over the green "F" for "Finish" block, which advances them to the first real level.

Note also, we've set up a variable to indicate the state when the ball has touched a hole tile. So long as that remains false, the on game update loop will use the accelerometer to guide the ball sprite's velocity on x and y (vx, vy).

We'll also use the on sprite of kind Player hits wall (purple) loop to end the intro level and start the first real level, which is index 0, by calling the function with call makeLevel levelNumber.

Make Levels

Once the player initiates the start of the level, here's what the makeLevel function does (note the function type used here accepts an integer number argument that we'll use to pick different level maps):

  • set the background image
  • create the array of tile maps, in this case there are three possible levels (later, you can design your own levels by simply clicking the + sign in the list array and adding another image. A good way to start is to RMB-click an existing one to copy it and place it in the new empty value.
  • set the tile map to the index chosen with the num argument when the function was called, as an 8x8 pixel tile map
  • place the start image on the red tile
  • place the brown walls on the black tiles, with wall on
  • place the hole hazards on the pink tiles, with wall on
  • place the finish image on the green tile, with wall on
  • place the player's ball sprite on the red tile
  • pause for half a second, then set the touched variable to false so the accelerometer values will be used again to set the ball's velocity on x and y

Click on the first tile map so it opens in the sprite editor and you can see how this easy difficulty level is designed. This one is meant to give the player an early success while introducing the hole hazard element.

Fall in a Hole

Just like the original, real-world game, Marble Labyrinth is hard! When the player over-corrects and steers the ball right into a hole, here's what happens:

  • on sprite of kind Player hits wall (pink) loop runs
  • We set the touched variable to true to disengage the accelerometer control
  • set sprite image to blank so that it appears that the ball has fallen into the hole
  • set dropped to true which will call the game over lose with bubbles effect in the forever loop

Completing a Level/Winning the Game

When the player gets the ball to the Finish tile, here's what happens:

  • on sprite of kind Player hits wall (green) lets us know the ball has reached the finish
  • disengage the accelerometer control over the ball with set touched to true
  • change levelNumber by 1 increases the integer value that's used to call the makeLevel function with the proper next level number
  • if levelNumber < length of array list conditional loop checks to see that we have additional levels left for the player. If so:
    • pause half a second, then call the makeLevel function with the next level number
  • If there are no levels left to play:
    • game over win with smiles effect !

Now, load the game onto your PyGamer or PyBadge as shown in the following pages and have some fun! Any time you like, you can create new levels to create new challenges!

You are at the bleeding edge of handheld, open source, game playing hardware and software, what with your PyBadge/PyBadge LC or PyGamer! Congratulations! It's fun and exciting! It is also changing and improving all the time, so please update your bootloaders before proceeding to put your MakeCode Arcade games on the board!!

Among lots of other reasons, update the bootloader to prevent a problem with MacOS 10.14.4, to fix button problems, and get the thumbstick to work!

PyBadge/PyBadge LC Bootloader

If you have a PyBadge or PyBadge LC, please go to this page for instructions on updating the bootloader.

A HUUUUUUGE number of people have problems because they pick a 'charge only' USB cable rather than a "Data/Sync" cable. Make 100% sure you have a good quality syncing cable. Srsly, I can't even express how many times people have nearly given up due to a flakey USB cable! Enter Alert Text...

Hardware Checks

If, after updating your board's bootloader, you still think you may have a hardware problem, here's a great way to test out all of the functions. From buttons, to the light sensor, thumbstick (PyGamer only), accelerometer (PyGamer and PyBadge only, not the LC), and more, we've got a super nifty set of hardware test .UF2 files you can use.

Click on the link for your board below for more info and a link to the appropriate UF2 file.

Another way to do a hardware check is with the handy, dandy MakeCode Arcade Basic Hardware Test. This was created with MakeCode Arcade and you can use it to check that your d-pad buttons or thumb joystick can move the yellow face around the screen, and that the A and B buttons work to play a sound (just make sure you have a speaker plugged in to the PyGamer first).

You can open this link to get to it, or download the UF2 file below and drag it onto your board's USB drive in bootloader mode.

Let's load a game! For example, here's a link to Run, Blinka, Run! To open the game in the MakeCode Arcade editor, first, click the share link below. This will allow you to play the game in the browser right away.

Then, click on the Show Code button in the upper left corner. The shows the code for the game, and by clicking the Edit button in the upper right corner, it'll open into the editor where you can upload it to your PyGamer/PyBadge.

Once you have a game working on the MakeCode Arcade web editor, it's time to download it and flash it onto your board.

Please only use the Google Chrome browser with MakeCode! It has WebUSB support and seems to work best

Board Definition

In order to load a game made in MakeCode Arcade onto the PyBadge, first choose the proper board definition inside of MakeCode. Click the ellipsis (...) next to DOWNLOAD and then the Choose Hardware item.

Change Board screen


Click on the image of your board, either the PyBadge/PyBadge LC or the PyGamer

This will cause the game .uf2 file for your particular board to be saved to your hard drive. You only need to do this the first time you use a new board. Thereafter you can simply click the Download button on the MakeCode Arcade editor page.

A HUUUUUUGE number of people have problems because they pick a 'charge only' USB cable rather than a "Data/Sync" cable. Make 100% sure you have a good quality syncing cable. Srsly, I can't even express how many times people have nearly given up due to a flakey USB cable!

Bootloader Mode

Now, we'll put the board into bootloader mode so we can drag on the saved .uf2 file. On the back side of the board you'll see a reset button at the top. Make sure the board is plugged into your computer via USB with a USB micro B to A data cable. Also, be sure the board is turned on.

 

Then, press the reset button. This will initiate bootloader mode.

 

When the board is in bootloader mode you'll see a screen similar to this one show up.

Drag and Drop

Now that the board is in bootloader mode, you should see a BADGEBOOT drive show up on your computer as a USB flash drive. Simply drag the arcade game .uf2 file onto the drive.

Play!

That's all there is to it! Once the file is copied over the board will restart and launch the game!

Keep an eye on Adafruit.com for additional game related content.

If you run into trouble with MakeCode Arcade, here are some resources for getting help:

Only use the Google Chrome browser with MakeCode!

This guide was first published on Jul 12, 2019. It was last updated on Mar 08, 2024.