Bouw een Arduino Flappy Bird Kloon: Stap-voor-stap Game Project met TFT Touchscreen
In dit Arduino-project maken we een coole Arduino-game, eigenlijk een replica van de populaire Flappy Bird-game voor smartphones, met behulp van een Arduino en een TFT-touchscreen. Je kunt leren hoe het werkt door de volgende video te bekijken of de geschreven tekst hieronder te lezen.
Overzicht
De game is vrij simpel maar interessant en verslavend. Met de touchscreen besturen we de vogel en proberen we de bewegende pijlers te ontwijken, welke sneller worden naarmate we vorderen. De game kan ook je hoogste score onthouden, zelfs als je de voeding loskoppelt.
In de vorige tutorial (Arduino TFT-tutorial) leerden we in detail hoe je TFT-touchscreens met een Arduino gebruikt en lieten we het game-voorbeeld over om in deze tutorial te worden uitgelegd. Nu, net als in de vorige tutorial, zullen we stap voor stap de code achter deze Arduino-game uitleggen.
Broncode
Omdat de code wat langer is en voor beter begrip, zal ik de broncode van het programma in secties posten met beschrijving voor elke sectie. Aan het einde van dit artikel post ik de complete broncode.
We zullen de UTFT- en URTouch-bibliotheken gebruiken, gemaakt door Henning Karlsen. Je kunt deze bibliotheken downloaden van zijn website, www.RinkyDinkElectronics.com. Ook zullen we de EEPROM-bibliotheek gebruiken voor het opslaan van de hoogste score in de EEPROM. De EEPROM is een geheugen dat gegevens kan opslaan zelfs als het bord uitgeschakeld is.
Na het includeren van de bibliotheken moeten we de UTFT- en URTouch-objecten aanmaken alsook de variabelen definiëren die voor de game nodig zijn. In de setup-sectie initialiseren we het display en de touch, lezen we de hoogste score uit de EEPROM en initiëren we de game met de initiateGame()-aangepaste functie.
#include <UTFT.h>
#include <URTouch.h>
#include <EEPROM.h>
//==== Objecten aanmaken
UTFT myGLCD(SSD1289,38,39,40,41); //Parameters moeten aangepast worden aan je Display/Scherm model
URTouch myTouch(6, 5, 4, 3, 2);
//==== Lettertypen definiëren
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A]; // Vogel Bitmap
int x, y; // Variabelen voor coördinaten waar het scherm is ingedrukt
// Flappy Bird
int xP = 319;
int yP = 100;
int yB = 50;
int movingRate = 3;
int fallRateInt = 0;
float fallRate = 0;
int score = 0;
int lastSpeedUpScore = 0;
int highestScore;
boolean screenPressed = false;
boolean gameStarted = false;
void setup() {
// Display initialiseren
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
highestScore = EEPROM.read(0); // Hoogste score lezen uit EEPROM
initiateGame(); // Game initiëren
}Met de initiateGame()-aangepaste functie tekenen we de initiële staat van de game en dit doen we als volgt. Eerst wissen we het scherm, tekenen de blauwe achtergrond, tekenen de onderste sectie, voegen de tekst toe en roepen de drawBird()-aangepaste functie aan om de vogel te tekenen. Daarna hebben we een while-lus nodig die voorkomt dat de game start tot we op het scherm tikken. Terwijl we in deze staat zijn, als we de rechterbovenhoek indrukken, kunnen we de hoogste score resetten naar nul, en als we ergens anders op het scherm drukken, komen we uit de while-lus en gaan we naar de hoofdlus van de code die de game start.
// ===== initiateGame - Aangepaste Functie
void initiateGame() {
myGLCD.clrScr();
// Blauwe achtergrond
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
// Grond
myGLCD.setColor(221,216,148);
myGLCD.fillRect(0, 215, 319, 239);
myGLCD.setColor(47,175,68);
myGLCD.fillRect(0, 205, 319, 214);
// Tekst
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.print("Score:",5,220);
myGLCD.setFont(SmallFont);
myGLCD.print("HowToMechatronics.com", 140, 220);
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(114, 198, 206);
myGLCD.print("Hoogste Score: ",5,5);
myGLCD.printNumI(highestScore, 120, 6);
myGLCD.print(">RESET<",255,5);
myGLCD.drawLine(0,23,319,23);
myGLCD.print("TAP TO START",CENTER,100);
drawBird(yB); // Tekent de vogel
// Wacht tot we op het scherm tikken
while (!gameStarted) {
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX();
y = myTouch.getY();
// Hoogste score resetten
if ((x >= 250) && (x <= 319) && (y >= 0) && (y <= 28)) {
highestScore = 0;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(120, 0, 150, 22);
myGLCD.setColor(0, 0, 0);
myGLCD.printNumI(highestScore, 120, 5);
}
if ((x >= 0) && (x <= 319) && (y >= 30) && (y <= 239)) {
gameStarted = true;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0, 0, 319, 32);
}
}
}
// Wis de tekst "TAP TO START" voordat de game start
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(85, 100, 235, 116);
}In de hoofdlus-sectie hebben we de xP-variabele die gebruikt wordt voor het tekenen van de pijlers, evenals de yP-variabele. Aan het begin heeft de xP-variabele de waarde 319 als de schermgrootte en de yP-variabele de waarde 100, wat de hoogte van de eerste pijler is. Elke iteratie wordt de waarde van de xP-variabele verlaagd met de waarde van de movingRate-variabele, die aan het begin de waarde 3 heeft en toeneemt naarmate we in de game vorderen.
// De Hoofdlus Sectie
void loop() {
xP = xP - movingRate; // xP - x-coördinaat van de pijlers; bereik: 319 - (-51)
drawPilars(xP, yP); // Tekent de pijlers
// yB - y-coördinaat van de vogel, afhankelijk van de waarde van de fallingRate variabele
yB += fallRateInt;
fallRate = fallRate + 0.4; // Elke iteratie neemt de valrate toe voor zwaartekracht-effect
fallRateInt = int(fallRate);
// Controleer op botsing
if(yB >= 180 || yB <= 0) { // boven en onder
gameOver();
}
if((xP <= 85) && (xP >= 5) && (yB <= yP - 2)) { // bovenste pijler
gameOver();
}
if((xP <= 85) && (xP >= 5) && (yB >= yP + 60)) { // onderste pijler
gameOver();
}
// Tekent de vogel
drawBird(yB);
// Nadat de pijler het scherm heeft gepasseerd
if (xP <= -51) {
xP = 319; // Reset xP naar 319
yP = rand() % 100 + 20; // Willekeurig getal voor pijlerhoogte
score++; // Verhoog score met één
}
//==== De vogel besturen
if (myTouch.dataAvailable() && !screenPressed) {
fallRate = -6; // Negatieve fallRate laat de vogel springen
screenPressed = true;
}
// Voorkom vasthouden van scherm / je moet tikken
else if (!myTouch.dataAvailable() && screenPressed) {
screenPressed = false;
}
// Na elke vijf punten, verhoog de bewegingsnelheid van de pijlers
if ((score - lastSpeedUpScore) == 5) {
lastSpeedUpScore = score;
movingRate++;
}
}Hier is het werkingsprincipe van de game: we hebben 50 pixels brede pijlers die van rechts naar links bewegen en elke volgende pijler heeft een andere willekeurige hoogte. Om ze te laten bewegen, logisch, moeten we na elke iteratie het scherm wissen en de grafiek opnieuw tekenen met de pijlers op hun nieuwe positie. Echter, we kunnen dat niet doen vanwege de lage verversingsfrequentie van het scherm, wat flikkeren van de grafieken zou veroorzaken. Om al zijn pixels te activeren heeft het scherm iets meer tijd nodig, dus we moeten improviseren en alleen die dingen opnieuw tekenen die bewegen.
Laten we eens kijken hoe de drawPilars()-aangepaste functie dat doet. Het neemt de xP- en yP-variabelen en tekent met behulp van de fillRect()-functie de pijlers. Elke iteratie tekent het de pijlers op hun nieuwe locatie met extra blauwe rechthoeken aan hun linker- en rechterkant die de eerdere getekende pijler wissen, en op die manier doen we de improvisatie van alleen de bewegende pijlers opnieuw tekenen. De if-instructies hier zijn een extra improvisatie omdat de fillRect()-functie om een of andere reden niet werkte als de 'x2'-parameter een waarde buiten de schermgrootte had. Ook aan het einde van deze aangepaste functie moeten we de waarde van de behaalde score printen.
// ===== drawPilars - Aangepaste Functie
void drawPilars(int x, int y) {
if (x >= 270) {
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, 0, x, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, 0, x-1, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, y+81, x, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, y+80, x-1, 204);
} else if (x <= 268) {
// Tekent blauwe rechthoek rechts van de pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, 0, x+60, y);
// Tekent de pijler
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, 1, x+1, y-1);
// Tekent de zwarte rand van de pijler
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, 0, x, y);
// Tekent blauwe rechthoek links van de pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, 0, x-3, y);
// De onderste pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, y+80, x+60, 204);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, y+81, x+1, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, y+80, x, 204);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, y+80, x-3, 204);
}
// Tekent de score
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.printNumI(score, 100, 220);
}Terug in de hoofdlus hebben we de yB-variabele, de y-positie van de vogel, die afhangt van de valsnelheid die na elke iteratie toeneemt, zodat we het effect van versnelling of zwaartekracht krijgen. Ook controleren we hier op botsingen en gebruiken we if-instructies om de vogel te beperken, zodat als hij de bovenkant, de grond of de pijlers raakt, de game voorbij is.
Vervolgens is er de drawBird()-aangepaste functie en laten we zien hoe die werkt. De vogel is eigenlijk een foto die omgezet is in een bitmap met het ImageConverter565-hulpprogramma van Henning Karlsen. Het ".c"-bestand dat met het hulpprogramma is gemaakt, moet in de map worden opgenomen zodat het geladen wordt bij het starten van de sketch. Ook moeten we de bitmap definiëren en met de drawBitmap()-functie tekenen we de foto op het scherm. De vogel heeft een vaste X-coördinaat en de yB-variabele als Y-coördinaat. Net als bij de pijlers wissen we de vorige staat van de vogel door twee blauwe rechthoeken erboven en eronder te tekenen.
//====== drawBird() - Aangepaste Functie
void drawBird(int y) {
// Tekent de vogel - bitmap
myGLCD.drawBitmap(50, y, 35, 30, bird01);
// Tekent blauwe rechthoeken boven en onder de vogel om de vorige staat te wissen
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50, y, 85, y-6);
myGLCD.fillRoundRect(50, y+30, 85, y+36);
}Terug in de lus zien we dat nadat de pijler het scherm heeft gepasseerd, de xP-variabele gereset wordt naar 319, yP een nieuwe willekeurige waarde krijgt van 20 tot 100 voor de hoogte van de pijlers, en de score met één toeneemt. Met de volgende if-instructie besturen we de vogel. Als we op het scherm tikken, stellen we de valsnelheid in op negatief, wat de vogel doet springen, en de else-if-instructie zorgt ervoor dat je niet kunt vasthouden. De laatste if-instructie is voor de moeilijkheidsgraad van de game en verhoogt de bewegingsnelheid van de pijlers na elke vijf punten.
Ok, wat er nu nog over is, is te zien hoe de gameOver()-aangepaste functie werkt. Na een vertraging van één seconde wist het het scherm, print de score en wat tekst, als de score hoger is dan de hoogste score, schrijft het die naar de EEPROM, het reset alle variabelen naar hun startwaarden en aan het einde roept het de initiateGame()-aangepaste functie aan om de game te herstarten.
//======== gameOver() - Aangepaste Functie
void gameOver() {
delay(1000); // 1 seconde
// Wis scherm en print tekst
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("GAME OVER", CENTER, 40);
myGLCD.print("Score:", 100, 80);
myGLCD.printNumI(score, 200, 80);
myGLCD.print("Restarting...", CENTER, 120);
myGLCD.setFont(SevenSegNumFont);
myGLCD.printNumI(2, CENTER, 150);
delay(1000);
myGLCD.printNumI(1, CENTER, 150);
delay(1000);
// Schrijf hoogste score in EEPROM
if (score > highestScore) {
highestScore = score;
EEPROM.write(0, highestScore);
}
// Reset variabelen naar startpositie waarden
xP = 319;
yB = 50;
fallRate = 0;
score = 0;
lastSpeedUpScore = 0;
movingRate = 3;
gameStarted = false;
// Herstart game
initiateGame();
}Dat is alles en ik hoop dat de uitleg van de code duidelijk genoeg was. Als je vragen hebt, voel je vrij om ze in de reacties hieronder te stellen.
Hier is de complete code van de game:
/* Arduino Game Project
* Programma gemaakt door Dejan Nedelkovski,
* www.HowToMechatronics.com
*/
/* Dit programma gebruikt de UTFT en URTouch bibliotheken
* gemaakt door Henning Karlsen.
* Je kunt ze vinden en downloaden op:
* www.RinkyDinkElectronics.com
*/
#include <UTFT.h>
#include <URTouch.h>
#include <EEPROM.h>
//==== Objecten aanmaken
UTFT myGLCD(SSD1289,38,39,40,41); //Parameters moeten aangepast worden aan je Display/Scherm model
URTouch myTouch(6, 5, 4, 3, 2);
//==== Lettertypen definiëren
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A]; // Vogel Bitmap
int x, y; // Variabelen voor coördinaten waar het scherm is ingedrukt
// Flappy Bird
int xP = 319;
int yP = 100;
int yB = 50;
int movingRate = 3;
int fallRateInt = 0;
float fallRate = 0;
int score = 0;
int lastSpeedUpScore = 0;
int highestScore;
boolean screenPressed = false;
boolean gameStarted = false;
void setup() {
// Display initialiseren
myGLCD.InitLCD();
myGLCD.clrScr();
myTouch.InitTouch();
myTouch.setPrecision(PREC_MEDIUM);
highestScore = EEPROM.read(0); // Hoogste score lezen uit EEPROM
initiateGame(); // Game initiëren
}
void loop() {
xP = xP - movingRate; // xP - x-coördinaat van de pijlers; bereik: 319 - (-51)
drawPilars(xP, yP); // Tekent de pijlers
// yB - y-coördinaat van de vogel, afhankelijk van de waarde van de fallingRate variabele
yB += fallRateInt;
fallRate = fallRate + 0.4; // Elke iteratie neemt de valrate toe voor zwaartekracht-effect
fallRateInt = int(fallRate);
// Controleer op botsing
if(yB >= 180 || yB <= 0) { // boven en onder
gameOver();
}
if((xP <= 85) && (xP >= 5) && (yB <= yP - 2)) { // bovenste pijler
gameOver();
}
if((xP <= 85) && (xP >= 5) && (yB >= yP + 60)) { // onderste pijler
gameOver();
}
// Tekent de vogel
drawBird(yB);
// Nadat de pijler het scherm heeft gepasseerd
if (xP <= -51) {
xP = 319; // Reset xP naar 319
yP = rand() % 100 + 20; // Willekeurig getal voor pijlerhoogte
score++; // Verhoog score met één
}
//==== De vogel besturen
if (myTouch.dataAvailable() && !screenPressed) {
fallRate = -6; // Negatieve fallRate laat de vogel springen
screenPressed = true;
}
// Voorkom vasthouden van scherm / je moet tikken
else if (!myTouch.dataAvailable() && screenPressed) {
screenPressed = false;
}
// Na elke vijf punten, verhoog de bewegingsnelheid van de pijlers
if ((score - lastSpeedUpScore) == 5) {
lastSpeedUpScore = score;
movingRate++;
}
}
// ===== initiateGame - Aangepaste Functie
void initiateGame() {
myGLCD.clrScr();
// Blauwe achtergrond
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0,0,319,239);
// Grond
myGLCD.setColor(221,216,148);
myGLCD.fillRect(0, 215, 319, 239);
myGLCD.setColor(47,175,68);
myGLCD.fillRect(0, 205, 319, 214);
// Tekst
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.print("Score:",5,220);
myGLCD.setFont(SmallFont);
myGLCD.print("HowToMechatronics.com", 140, 220);
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(114, 198, 206);
myGLCD.print("Hoogste Score: ",5,5);
myGLCD.printNumI(highestScore, 120, 6);
myGLCD.print(">RESET<",255,5);
myGLCD.drawLine(0,23,319,23);
myGLCD.print("TAP TO START",CENTER,100);
drawBird(yB); // Tekent de vogel
// Wacht tot we op het scherm tikken
while (!gameStarted) {
if (myTouch.dataAvailable()) {
myTouch.read();
x = myTouch.getX();
y = myTouch.getY();
// Hoogste score resetten
if ((x >= 250) && (x <= 319) && (y >= 0) && (y <= 28)) {
highestScore = 0;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(120, 0, 150, 22);
myGLCD.setColor(0, 0, 0);
myGLCD.printNumI(highestScore, 120, 5);
}
if ((x >= 0) && (x <= 319) && (y >= 30) && (y <= 239)) {
gameStarted = true;
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(0, 0, 319, 32);
}
}
}
// Wis de tekst "TAP TO START" voordat de game start
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(85, 100, 235, 116);
}
// ===== drawPilars - Aangepaste Functie
void drawPilars(int x, int y) {
if (x >= 270) {
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, 0, x, y-1);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, 0, x-1, y);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(318, y+81, x, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(319, y+80, x-1, 204);
} else if (x <= 268) {
// Tekent blauwe rechthoek rechts van de pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, 0, x+60, y);
// Tekent de pijler
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, 1, x+1, y-1);
// Tekent de zwarte rand van de pijler
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, 0, x, y);
// Tekent blauwe rechthoek links van de pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, 0, x-3, y);
// De onderste pijler
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x+51, y+80, x+60, 204);
myGLCD.setColor(0, 200, 20);
myGLCD.fillRect(x+49, y+81, x+1, 203);
myGLCD.setColor(0, 0, 0);
myGLCD.drawRect(x+50, y+80, x, 204);
myGLCD.setColor(114, 198, 206);
myGLCD.fillRect(x-1, y+80, x-3, 204);
}
// Tekent de score
myGLCD.setColor(0, 0, 0);
myGLCD.setBackColor(221, 216, 148);
myGLCD.setFont(BigFont);
myGLCD.printNumI(score, 100, 220);
}
//====== drawBird() - Aangepaste Functie
void drawBird(int y) {
// Tekent de vogel - bitmap
myGLCD.drawBitmap(50, y, 35, 30, bird01);
// Tekent blauwe rechthoeken boven en onder de vogel om de vorige staat te wissen
myGLCD.setColor(114, 198, 206);
myGLCD.fillRoundRect(50, y, 85, y-6);
myGLCD.fillRoundRect(50, y+30, 85, y+36);
}
//======== gameOver() - Aangepaste Functie
void gameOver() {
delay(3000); // 1 seconde
// Wis scherm en print tekst
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("GAME OVER", CENTER, 40);
myGLCD.print("Score:", 100, 80);
myGLCD.printNumI(score, 200, 80);
myGLCD.print("Restarting...", CENTER, 120);
myGLCD.setFont(SevenSegNumFont);
myGLCD.printNumI(2, CENTER, 150);
delay(1000);
myGLCD.printNumI(1, CENTER, 150);
delay(1000);
// Schrijf hoogste score in EEPROM
if (score > highestScore) {
highestScore = score;
EEPROM.write(0, highestScore);
}
// Reset variabelen naar startpositie waarden
xP = 319;
yB = 50;
fallRate = 0;
score = 0;
lastSpeedUpScore = 0;
movingRate = 3;
gameStarted = false;
// Herstart game
initiateGame();
}Hier is een downloadbestand met de Arduino-schetch, de vogelafbeelding en het bitmap-bestand voor de vogel.
Productieproces
- Bouw een indrukwekkend monitor Ambilight-systeem met Arduino
- Bouw een Klassiek Pong-spel op Arduino UNO met OLED-display – Stap-voor-stap Tutorial
- DIY Arduino USB Gaming Controller – Bouw Je Eigen High-Performance Gamepad
- Arduino Touch Breakout-spel: Bouw een Klassieke Arcade op een 2,4″ TFT LCD
- Een reusachtige Lego-minifiguur animatronics Operation-spel bouwen met Arduino
- Arduino Audio Frequentie Detector – Meet de luidste geluidspieken met hoge gevoeligheid
- Arduino Boter-Kaas-Eieren met MAX7219 LED Matrix en Kartonnen Behuizing
- Bouw een Betrouwbare Arduino Afteltimer met SparkFun 7‑Segment Display
- Pixel Chaser: Interactieve één-tik LED-spel met Arduino Nano
- Bouw je eigen RC Porsche-auto met Arduino: Stap-voor-stap handleiding
- DIY LED Roulette-spel – Bouw Eenpersoons Arcade Met Arduino Nano