Joystick module with micro:bit

Difficulty
Easy
Steps
12

The dual-axis joystick module has two independent potentiometers, one per axis, and can be easily connected to the breadboard! 

In this guide, we will create a fast reaction-time game with the micro:bit, and use the joystick module as a controller. 

After completing this guide, you will have learned how to program a basic game as well as its controls.

Parts Used in This Guide

Buy

Step 1  The Module

First, let's take a closer look at the joystick module.

It has 5 pins:

  • SW: Switch pushbutton 
  • VRy: Y-position
  • VRx: X-position
  • 3.3V  : While this pin is labelled '+5V',  we'll connect it to 3.3V on the micro:bit
  • GND: In electronics, we define a point in a circuit to be a kind of zero volts or 0V reference point, on which to base all other voltage measurements. This point is called  ground or GND.
    • Note: Voltage is the difference in potential between two points. As it is difficult to talk about voltage without a reference point, we need another point to compare it to. 

Note: Please use the M-F jumper wires included in the kit to connect this module to the breadboard. We will also be connecting the joystick module to 3.3V instead of 5V.

Step 2  Connect GND to GND

Step 3  Connect to 3.3V

Step 4  Connect VRx to P3

Step 5  Connect VRy to P4

Step 6  Connect SW to P5

Joystick values

  • The joystick has two axises and at its untouched position it is at x:511 and y:511.
  • The output values sent to the micro:bit via VRx and VRy changes depending on how it is moved along the axis
  • We will use these values to program and control the game!

Step 7  On start

First, we will create a variable to store the score and display some text. 

  • From 'Variables' tab, click on 'Make a variable'. 
  • Name this variable, 'globalScore'. Leave its value as '0'. 
  • Place this in the 'on start' block. 
  • Now go to the 'Basic' tab, and drag and drop a 'show string ...' block. 
  • This will display once when your micro:bit boots up before you play the game.

Step 8  Test the controller!

It's time to test the dual-axis joystick controller before programming it.

  • Create two variables, naming one 'xVal' and the other 'yVal'.
  • Attach it to an 'analog read pin' block. Make sure 'xVal' is set to pin P0.
  • 'Create another 'analog read pin' block. Make sure yVal' is set to pin P1

As mentioned above, when the joystick value, x is at 511 and y is 511, the joystick is at rest. 

  • When the joystick is tilted to the left,  xVal > 600
  • When the joystick is tilted to the right, xVal < 400
  • When the joystick is tilted downwards, yVal < 400
  • When the joystick is tilted upwards, yVal > 600

Note:  To add an else-if block ...

  • Drag and drop an 'If true ... then' block from Logic tab into the editor
  • Click on the white plus (with a circular border) icon twice
  • Delete the extra 'else' block by clicking on the white minus (with a circular border) icon next to it.

Upload this code and test it out!

Step 9  The for loop!

  • This game will last a total of 5 rounds, so we will use a 'for ... do ...' loop. 
  • From the 'Loops' tab, you can grab one and drag it into the editor. 
  • Change it to a value of '0 to 4'. 
  • Next, grab a 'clear screen' block from the 'Basic' tab. 
  • Also, grab a 'pause (ms)' block and set it to 1000 for 1 second. 
  • Click on the 'Variables' tab to grab a 'set ... to ... ' block. 
  • Create a variable and name it 'state'. 
  • From 'Math' tab, grab a 'pick random 0 to ... ' block. 
  • As there will be a total of 3 states that the game can be in. Make sure 'pick random 0 to ...' block has a value of 2.
  • From 'Logic' tab, get an 'if true ... then ...' block. 
    • To add two 'else if ...' blocks, click on the white plus (with a circular border) icon three times.
    • Delete the extra 'else' block by clicking on the white minus (with a circular border) icon next to it.
  • Use 'show leds' blocks under 'Basic tab' for these conditions : 
    • If state = 0, show a left arrow.
    • If state = 1, show a right arrow.
    •  If state = 2, show a down arrow.
    • If state = 3, show an up arrow.
  • Add a 'pause (ms)' block of 500 of half a second after the 'show leds' block for each state.
  • Finally, to show the score at the end of the 5 rounds: outside the 'for' loop, add a 'show number' block with its value set to 'globalScore'.

Step 10  Controller function!

  • Click on the 'Function' tab and create a new function. 
  • Name this function, 'controller'. 
  • Create two variables, 'xVal' and 'yVal' and set them to 'analog read pin P0' and 'analog read pin P1'.
  • From 'Logic' tab, get an 'if true ... then ...' block. 
    • To add two 'else if ...' blocks, click on the white plus (with a circular border) icon three times.
    • Delete the extra 'else' block by clicking on the white minus (with a circular border) icon next to it.
  • When either conditions have been met, we add 1 to the score.
  • The conditions: 
    • If state = 0 (showing left arrow) and xVal > 600 (indicates joystick moved left)
    • Else if state = 1 (showing right arrow) and xVal < 400 (indicates joystick moved right)
    • Else if state = 2 (down arrow), and yVal < 400 
    • Else if state = 3 (up arrow), and yval > 600
  • Finally, we need to call the function, so add the 'call function controller' block within the 'for loop', just after the 'if ... then ...' loop

Step 11  Upload the hex file

To upload the code to the micro:bit:

  1. Connect your computer to the micro:bit with a microUSB cable
  2. In the MakeCode editor, click on the 'Download' button
  3. The downloaded code should be in your 'Downloads' folder
  4. Drag and drop this .hex file to the MICROBIT drive