Interactive Space Wizard Game and Controller

Add a character to a Scratch game and make a physical controller!

Setup and Supplies

Remixing a game that is designed for integration with a MaKey MaKey powered controller is a great introduction to the key concepts of building an interactive game! All you need is a Scratch account, a MaKey MaKey, and some basic construction items!

igd banner-400px1

Build time:

Approximately 45 – 60 minutes

Skills needed:

  • Basic computer skills
  • Basic programming knowledge – this can be developed through the activity!
  • Basic understanding of conductivity – this can be developed through the activity!

Tools:

  • Computer
  • Scratch – web-based visual programming framework
  • MaKey MaKey – a physical construction kit
  • Basic construction materials (conductive and non-conductive):
    • Cardboard: Non-conductive
    • Aluminum Foil: Conductive
    • Play-Doh: Conductive
    • Copper Tape: Conductive (Optional)

How to Remix an Interactive Game

IGD - Step 1

Step 1: Access the base game

Log into Scratch, and navigate to the following game:

Click on this link after logging in so that you can save your remix:
BCPL Workshop: Space Wizard!

bcpl_workshop_-_igd_-_step_2-400px3

Step 2: ‘See inside’ the game

Once you click on the link, the basic game information and overview will load. There will be an option to See inside the project. This is a blue button in the upper right corner of the game overview. Click this button to view the game’s code and access the remix option.

igd - step 3

Step 3: Remix the game

Once you open the game in the editor, you’ll see the code as well as an orange Remix button in the upper right corner. Click this button to make a copy of the game that you can now edit. Since you’ve already logged in to your account, this copy will automatically port to your account.

igd - step 4

Step 4: Check the remix

Once you’ve clicked, wait a moment while Scratch processes the request. After it’s done, you’ll now see that the title has changed to have ‘remix’ at the end. If you see BCPL Workshop – Game remix as the title in the preview window to the left, you’re ready to remix!

bcpl_-_igd_-_step_5-1-400px1

igd step 5-2

Step 5: Add your hero!

Now that you’ve started the remix process, it’s time to add your hero character to the game! At this point, you can change the title of your game from [title-remix] to something more interesting. To add your hero sprite, follow these steps:

  • Navigate to the Sprites panel at the bottom left of the preview window. Select either the first (select from Scratch library) or second (draw your own) option.
  • Select and load the hero sprite.
  • Rename this sprite to ‘hero’ or something else that is fitting.

bcpl_-_igd_-_move_1-400px1

Step 7: Make your hero move, part 1

Now that your hero has been added to the game, it’s time to make them move. In order to give the most flexibility to the MaKey MaKey controller, you’re going to do this with conditional logic. Don’t worry if you don’t quite understand all of the code. Go ahead and do this step and you can read through the code later to review it.
The image shows the full code. This will be broken into two parts. These first steps are for the first script that is connected to the “when [green flag] clicked” block:

  • Grab the gameStart event from the Events category. This is the “when [green flag] clicked” block. Place this in the code editor for the hero sprite.
  • Grab the “hide” block from the Looks category. Connect this block to the gameStart event.
  • Grab the “go to x: () y: ()” block from the Motion category. Connect this to the “hide” block. Set the values to: “go to x: (-9) y: (-150)” This sets the position of the hero sprite. Feel free to change these.
  • You’ve now finished the first script!

bcpl_-_igd_-_move_2-400px2

bcpl_-_igd_-_move_3-400px3

bcpl_-_igd_-_move_4-400px4

bcpl_-_igd_-_move_5-400px5

Step 8: Make your hero move, part 2

Now that the hero sprite is initialized and positioned, let’s write the actual movement code. This is going to be done with conditional statements. It’s okay if you don’t quite understand the way the code works just yet- you’ll develop an understanding through practicing!

    • The first part of the code uses broadcasters and listeners. This is included in the full code that you’re remixing. Instead of using the gameStart event, you’re going to use a “listener” event instead. Grab the “when I receive [gameStart]” block from the Events category and place it in the hero’s code editor, beneath the positioning code. Any code attached to this will execute when the sprite receives this command.
    • Grab the “show” block from the Looks category. Connect this to the “when I receive [gameStart] event. Once the game begins, the hero appears!
    • Grab the “forever” loop block from the Control category and attach it to the “show” block. Any code in this block will continually execute until the end condition is met. Conditional code must be placed within this loop so that Scratch will always look for the conditions.
    • Grab the “if on edge, bounce” block from the Motions category and add that in the Forever loop. This will keep the hero from moving off screen.
    • Now to use conditional logic! Grab the “if [] then” block from the Control category and connect it to the bottom of the “if on edge, bounce” block. Inside the block, place a “touching []” block which can be found in the Sensing category. Drag this block into the space between the “if” and the “then.”
      • Click the drop-down menu in the “touching []” block and select “Projectile.” This will then make it so that whatever is inside the conditional statement will happen once the collision happens.
    • Grab a “broadcast” block from Events and place this inside the “if [] then” block. In the drop down menu on the broadcast block, select “heroCollide.”
    • Grab four “if [] then” blocks from the Control category and connect each of them so that they’re all inside the Forever loop. Grab a “key [] pressed” block from the Sensing category and place it between the “if” and the “then.” This is a drop-down menu where you can choose the key values.
      • Follow the same process to add conditional statements that will control the character motion. Make sure that these are all inside the forever loop!
    • For each one, match the key press to the motion:
      • If up is pressed, change y by 20.
      • If down is pressed, change y by -20.
      • If left is pressed, change x by -20.
      • If right is pressed, change x by 20.
    • Check your code with the images to make sure that it all works!

bcpl workshop - igd - makey 2-400px2

bcpl workshop - igd - makey 4-400px4

bcpl workshop - igd - makey 5-400px5

Step 9: Adding the MaKey MaKey

Now that you’ve added your hero sprite to the game, the next step is to add the physical controller with the MaKey MaKey!

      1. Unpack the MaKey MaKey! Pay attention to the kit contents so they don’t get lost.
      2. Plug in the red USB cable into your computer. Close any messages about the keyboard: the MaKey MaKey is occasionally recognized as a new keyboard.
      3. Connect an alligator clip to the ground (bottom row) of the MaKey MaKey.
      4. Attach the ground to either the Play-Doh or a piece of foil (or some other conductive material). You’ll need to touch this ground when using the controller.
      5. Make your d-pad! Make sure to include as many pads as you have inputs: You’ll need at least 4: left, right, down, up.
      6. Using the alligator clips, attach each pad to the corresponding input on the MaKey MaKey.
      7. Play your Scratch game using your new controller to trigger the input!

MaKey MaKey and Scratch pair perfectly together, and are two of the most common combinations in youth projects. Both Scratch and the MaKey MaKey are straightforward enough to allow for immediately satisfaction, but contain enough depth that youth are able to truly develop games/projects where they can have a strong degree of ownership due to the level of customization possible.

While the games you’ve worked on so far are interactive in the sense that they require player input, the inclusion of the MaKey MaKey takes it to the next level. You can now create custom controllers that match the theme of your game! This is one of the things that our youth are encouraged to consider while working on their game, and this element of physical interaction is what makes interactive game design truly unique as it takes the skill building and development beyond the digital screen.

Learn more