Introduction: Picture Frame Game Controller With Makey Makey and Scratch

In this Instructable you'll find out how to make a picture frame game controller that you can use to control a character in a Scratch game via a Makey Makey. This is a fun project for an adult and child to do together or as an activity for a kids technology workshop.

The child will be able to control a spaceship (or sprite of their choice) by holding a ground crocodile clip in one hand and touching conductive controls that are built into a canvas picture.

You will need:

  • An art canvas on a wooden frame. You could start with a blank one, we used one with a pre-printed design that we could decorate.
  • Coloured pens or paints to decorate the frame. We also used metallic pens.
  • 6 small nuts and bolts which must be conductive.
  • Something sharp to poke holes in the canvas, we used a kebab skewer.
  • 1 Makey Makey board with its USB cable and 7-8 crocodile clips
  • A computer that can run Scratch. This could be a Raspberry Pi running Scratch 1.4 but we used Scratch 2 online.

Step 1: Design and Decorate Your Canvas

Decide on your design and where the controls will go. We used small metal nuts as the controls and these act as decoration for the picture as well as being functional.

Makey Makey has 6 inputs that can easily be connected via crocodile clips so 6 controls is a good number to choose.

We included controls for:

  • Up, down, left, right - placed around the rocket window
  • Boost - towards the bottom of the rocket
  • Fire - towards the top of the rocket

Decorate your canvas, making sure you think about where the controls will be placed.

Step 2: Add the Controls

For our rocket, metal nuts and bolts worked well for the controls. The bolts need to be long enough that you can clip a crocodile clip on once the nuts is screwed on but short enough that they fit neatly into the space created by the wooden frame.

It's a good idea to check that your controls are conductive before you add them to the canvas. You can do this by connecting one crocodile clip lead between the control and one of the inputs on the Makey Makey and a second crocodile clip lead to ground on the Makey Makey. Plug the Makey Makey to a computer via USB. Hold the ground crocodile clip and tap your control bolt, you should see a small LED light up on the Makey Makey.

Now use something sharp to poke holes into the canvas for your controls. We used a metal skewer.Then put nuts through the holes and secure them with bolts on the reverse of the canvas.

Step 3: Connect Up Your Controller

Now it's time to connect up your controller to the Makey Makey. Connect crocodile clips to each of your controls on the back of your canvas. Connect the other ends to the Makey Makey, making sure they connect to the inputs you want them to control.

Test your controller to make sure that each control is working. Make sure your Makey Makey is connected to the computer. Hold the ground in one hand and tap the controls on the Makey Makey, the corresponding small LEDs will light up if everything is working.

Step 4: Write Your Game

Now you can write a game for your Picture Frame Controller. We used Scratch 2 online. You can use or remix the Makey Makey Rocket project.

Makey Makey simply sends key presses and mouse events and it's easy to respond to those events in Scratch.

Most of the code is added to the Spaceship sprite and is triggered by 'When Pressed' events.

Note that to respond to the Mouse Click event you will need to add a script to the Stage and use the 'When Stage Clicked' block (sprites have a 'When This Sprite Clicked' block and that's not what we need here.)

Step 5: Play the Game!

Now you can play the game. Remind children to hold the ground crocodile clip in one hand while they use the other hand to tap the controller.

The rocket game controller has proved popular with young children who just want to play the game as well as older children who want to be able to write their own game in Scratch.

Step 6: What Next?

Makey Makey actually has outputs that can be used to light up an LED when any key press is detected or when any mouse event is detected. We plan to add a light-up feature to the rocket controller.

Holding the ground crocodile clip is a bit annoying for children (though it does make it clear what is happening.) We could build the ground into the controller so that holding the frame connects the player to ground.