Pushing Buttons
Now we know how to use the screen, we need to make it more interractive. This section will show you how to connect buttons and dials to your Arduino, and use code to read a value from them.
Adding A Button
Let's start simple. We can really easily connect a button to our arduino using only two wires and a little code. The diagram below shows how you can do this. You'll notice that the diagram doesn't include the screen. That's just to make things clearer, you'll have to work out how to fit the buttons around the screen so you can press them easily later.
With the circuit all wired up, you can start coding. The code below can be used along side the code from your screen. First though, lets try doing something really simple like blinking a light when you press the button.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// These constants won't change. They're used here to
// set pin numbers:
const int buttonPin = 2; // the number of the pushbutton pin
const int ledPin = 13; // the number of the LED pin
// Store whether the button is on or off here.
int buttonState = 0;
void setup() {
// Initialize the LED pin as an output:
pinMode(ledPin, OUTPUT);
// Initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT);
}
void loop() {
// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);
// Check if the pushbutton is pressed.
// If it is, the buttonState is HIGH:
if (buttonState == HIGH) {
// Turn LED on:
digitalWrite(ledPin, HIGH);
} else {
// Turn LED off:
digitalWrite(ledPin, LOW);
}
}
You should see that whenever you press the button, the light turns on! Not very exciting, but think about how we can use this code to build our games? Can you make something move on your screen based on button presses?
Adding A Dial
Buttons are great and all, but what about something twisty? Dials can be used move characters, change speed, steer and all sorts of things. They are nice and simple to wire up too. Again, the wiring diagram below only shows the dial, can you fit it around the screen too?
Now we have everything wired up, lets make something on our screen change based on our dial. When we read a value from the dial, we get a number between 0 and 1023. We can use this as a position, or even a colour. The code below will move a square up and down, and also change it's colour, based on the position of the dial. Can you make the rectangle move differently if the button is pressed as well? What about changing the shape?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#include <TFT.h> // Arduino LCD library
#include <SPI.h>
// pins to control the screen
#define CS 7
#define DC 0
#define RST 1
// Pin for the dial
#define DIAL A2
// create an instance of the library
TFT TFTscreen = TFT(CS, DC, RST);
// Use this to store the dial value
int dial = 0;
// Store the position of our bat.
int pos = 0;
void setup() {
// Put this line at the beginning of every sketch that uses the GLCD:
TFTscreen.begin();
// clear the screen with a white background
TFTscreen.background(255,255,255);
// Set the fill colour to white.
TFTscreen.fill(255,255,255);
// set the font colour to black
TFTscreen.stroke(0, 0, 0);
}
void loop() {
// The screen is dumb and always writes over itself.
// Blank the part of the screen that will change.
TFTscreen.fill(255,255,255);
TFTscreen.stroke(255, 255, 255);
// Draw over the rectangle.
TFTscreen.rect(1,pos,10,20);
// Read the value of the dial.
dial = analogRead(DIAL);
pos = dial / 4;
// Set the fill colour to green.
TFTscreen.fill(0,255,0);
// set the line colour to red
TFTscreen.stroke(255, 0, 0);
// Draw the rectangle.
TFTscreen.rect(1,pos,10,20);
delay(10);
}
Congratulations! Now you know everything you need in order to start making some awesome arcade games. The next section will show you how to build the classic ping pong, and give you some ideas about other games you could try.