EsploraTFTPong

A basic implementation of the classic game.

Esplora TFT Pong

This sketch is a very basic implementation of pong for the TFT screen with an Arduino Esplora.

This version of the game creates a rectangular platform that can move in two directions, and a ball that bounces against the edges of the screen as well as the movable platform. The slider on the Esplora controls the speed of the ball bouncing.

The example demonstrates collision detection between objects on the screen, as well as how to quickly update images without erasing the entire screen every

loop()

Hardware Required

  • Arduino Esplora

  • Arduino TFT screen

Circuit

Esplora GLCDPong

Attach the TFT screen to the socket on your Esplora, with the label "SD Card" facing up.

Code

To use the screen you must first include the SPI and TFT libraries. Don't forget to include the Esplora library as well.

1#include <Esplora.h>
2#include <TFT.h>
3#include <SPI.h>

Set up the variables for the ball and paddle x & y positions, the ball's direction, and the previous locations of the ball and paddle.

1int paddleX = 0;
2int paddleY = 0;
3int oldPaddleX, oldPaddleY;
4int ballDirectionX = 1;
5int ballDirectionY = 1;
6
7int ballX, ballY, oldBallX, oldBallY;

In

setup()
, start serial communication, initialize the display and clear the screen's background.

1void setup() {
2
3 Serial.begin(9600);
4
5 // initialize the display
6
7 EsploraTFT.begin();
8
9 // set the background the black
10
11 EsploraTFT.background(0,0,0);
12}

loop()
will hold the code for reading the joystick position, erasing the paddle's previous position, and drawing it in it's new location.

1void loop() {
2
3 // save the width and height of the screen
4
5 int myWidth = EsploraTFT.width();
6
7 int myHeight = EsploraTFT.height();
8
9 // map the paddle's location to the joystick's position
10
11 paddleX = map(Esplora.readJoystickX(), 512, -512, 0, myWidth) - 20/2;
12
13 paddleY = map(Esplora.readJoystickY(), -512, 512, 0, myHeight) - 5/2;
14
15 Serial.print(paddleX);
16
17 Serial.print(" ");
18
19 Serial.println(paddleY);
20
21 // set the fill color to black and erase the previous
22
23 // position of the paddle if different from present
24
25 EsploraTFT.fill(0,0,0);
26
27 if (oldPaddleX != paddleX || oldPaddleY != paddleY) {
28
29 EsploraTFT.rect(oldPaddleX, oldPaddleY, 20, 5);
30
31 }
32
33 // draw the paddle on screen, save the current position
34
35 // as the previous.
36
37 EsploraTFT.fill(255,255,255);
38
39 EsploraTFT.rect(paddleX, paddleY, 20, 5);

Save the paddle's current location as the previous location, so the next time through you can check if it has moved.

1oldPaddleX = paddleX;
2
3 oldPaddleY = paddleY;

At the end of

loop()
, read the slider's position to determine the speed of the ball. You'll call a custom function named
moveBall()
to update the ball's position.

1int ballSpeed = map(Esplora.readSlider(), 0, 1023, 0, 80)+1;
2
3 if (millis() % ballSpeed < 2) {
4
5 moveBall();
6
7 }
8}

moveBall()
will update the ball's position, erase its previous location, and draw it in the new spot. It will also check to make sure it does not go off the screen, reversing direction when it hits the sides. This also calls a second custom function named
inPaddle()
which checks for intersections of the ball and paddle.

1void moveBall() {
2
3 if (ballX > EsploraTFT.width() || ballX < 0) {
4
5 ballDirectionX = -ballDirectionX;
6
7 }
8
9 if (ballY > EsploraTFT.height() || ballY < 0) {
10
11 ballDirectionY = -ballDirectionY;
12
13 }
14
15 if (inPaddle(ballX, ballY, paddleX, paddleY, 20, 5)) {
16
17 ballDirectionY = -ballDirectionY;
18
19 }
20
21 ballX += ballDirectionX;
22
23 ballY += ballDirectionY;
24
25 EsploraLCD.fill(0,0,0);
26
27 if (oldBallX != ballX || oldBallY != ballY) {
28
29 EsploraTFT.rect(oldBallX, oldBallY, 5, 5);
30
31 }
32
33 EsploraLCD.fill(255,255,255);
34
35 EsploraLCD.rect(ballX, ballY, 5, 5);
36
37 oldBallX = ballX;
38
39 oldBallY = ballY;
40}

inPaddle()
check to see if the paddle and ball occupy the same space. If so, it returns
TRUE
, which reverses the ball's direction in
moveBall()
.

1boolean inPaddle(int x, int y, int rectX, int rectY, int rectWidth, int rectHeight) {
2
3 boolean result = false;
4
5 if ((x >= rectX && x <= (rectX + rectWidth)) &&
6
7 (y >= rectY && y <= (rectY + rectHeight))) {
8
9 result = true;
10
11 }
12
13 return result;
14}

The complete sketch is below :

1/*
2
3 Esplora TFT Pong
4
5
6
7 This example for the Esplora with an Arduino TFT screen reads
8
9 the value of the joystick to move a rectangular platform
10
11 on the x and y axes. The platform can intersect with a ball
12
13 causing it to bounce. The Esplora's slider adjusts the speed
14
15 of the ball.
16
17
18
19 This example code is in the public domain.
20
21
22
23 Created by Tom Igoe December 2012
24
25 Modified 15 April 2013 by Scott Fitzgerald
26
27
28
29 http://arduino.cc/en/Tutorial/EsploraTFTPong
30
31
32
33 */
34
35#include <Esplora.h>
36#include <Adafruit_GFX.h> // Core graphics library
37#include <Adafruit_ST7735.h> // Hardware-specific library
38#include <TFT.h> // Arduino LCD library
39#include <SPI.h>
40
41// variables for the position of the ball and paddle
42int paddleX = 0;
43int paddleY = 0;
44int oldPaddleX, oldPaddleY;
45int ballDirectionX = 1;
46int ballDirectionY = 1;
47
48int ballX, ballY, oldBallX, oldBallY;
49
50void setup() {
51
52 Serial.begin(9600);
53
54 // initialize the display
55
56 EsploraTFT.begin();
57
58 // set the background the black
59
60 EsploraTFT.background(0,0,0);
61}
62
63void loop() {
64
65 // save the width and height of the screen
66
67 int myWidth = EsploraTFT.width();
68
69 int myHeight = EsploraTFT.height();
70
71 // map the paddle's location to the joystick's position
72
73 paddleX = map(Esplora.readJoystickX(), 512, -512, 0, myWidth) - 20/2;
74
75 paddleY = map(Esplora.readJoystickY(), -512, 512, 0, myHeight) - 5/2;
76
77 Serial.print(paddleX);
78
79 Serial.print(" ");
80
81 Serial.println(paddleY);
82
83 // set the fill color to black and erase the previous
84
85 // position of the paddle if different from present
86
87 EsploraTFT.fill(0,0,0);
88
89 if (oldPaddleX != paddleX || oldPaddleY != paddleY) {
90
91 EsploraTFT.rect(oldPaddleX, oldPaddleY, 20, 5);
92
93 }
94
95 // draw the paddle on screen, save the current position
96
97 // as the previous.
98
99 EsploraTFT.fill(255,255,255);
100
101 EsploraTFT.rect(paddleX, paddleY, 20, 5);
102
103 oldPaddleX = paddleX;
104
105 oldPaddleY = paddleY;
106
107 // read the slider to determinde the speed of the ball
108
109 int ballSpeed = map(Esplora.readSlider(), 0, 1023, 0, 80)+1;
110
111 if (millis() % ballSpeed < 2) {
112
113 moveBall();
114
115 }
116}
117
118// this function determines the ball's position on screen
119void moveBall() {
120
121 // if the ball goes offscreen, reverse the direction:
122
123 if (ballX > EsploraTFT.width() || ballX < 0) {
124
125 ballDirectionX = -ballDirectionX;
126
127 }
128
129 if (ballY > EsploraTFT.height() || ballY < 0) {
130
131 ballDirectionY = -ballDirectionY;
132
133 }
134
135 // check if the ball and the paddle occupy the same space on screen
136
137 if (inPaddle(ballX, ballY, paddleX, paddleY, 20, 5)) {
138
139 ballDirectionY = -ballDirectionY;
140
141 }
142
143 // update the ball's position
144
145 ballX += ballDirectionX;
146
147 ballY += ballDirectionY;
148
149 // erase the ball's previous position
150
151 EsploraTFT.fill(0,0,0);
152
153 if (oldBallX != ballX || oldBallY != ballY) {
154
155 EsploraTFT.rect(oldBallX, oldBallY, 5, 5);
156
157 }
158
159 // draw the ball's current position
160
161 EsploraTFT.fill(255,255,255);
162
163 EsploraTFT.rect(ballX, ballY, 5, 5);
164
165 oldBallX = ballX;
166
167 oldBallY = ballY;
168
169}
170
171// this function checks the position of the ball
172// to see if it intersects with the paddle
173boolean inPaddle(int x, int y, int rectX, int rectY, int rectWidth, int rectHeight) {
174
175 boolean result = false;
176
177 if ((x >= rectX && x <= (rectX + rectWidth)) &&
178
179 (y >= rectY && y <= (rectY + rectHeight))) {
180
181 result = true;
182
183 }
184
185 return result;
186}

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.