Arduino Touch Breakout-Spiel: Klassisches Arcade auf 2,4″ TFT LCD

Komponenten und Zubehör

Arduino UNO	1
AZ-Delivery 2,4 Zoll TFT LCD Touch Display Arduino Shield	1

Apps und Online-Dienste

• Arduino IDE

Über dieses Projekt

Eine kleine Version des klassischen Breakout-Videospiels für Arduino UNO und TFT LCD (240x320 Pixel), Treiber ILI9341 mit 8-Bit-Parallekommunikation.

Das Spiel

Dieses Breakout hat mehrere Bildschirme mit verschieden konfigurierbaren Reihen und Spalten von Steinen, bis zu acht Reihen, wobei je zwei Reihen eine andere Farbe haben und sich per Muster ein-/ausschalten lassen. Mit einem Ball muss der Spieler per Touchpanel so viele Steine wie möglich abräumen, indem er Wände und/oder den Schläger unten nutzt, um den Ball gegen die Steine zu lenken. Verfehlt der Schläger den Ball, verliert der Spieler ein Leben.

Jede Stein-Reihe bringt unterschiedliche Punkte:

uint8_t pointsForRow[] = {7, 7, 5, 5, 3, 3, 1, 1};

Jeder Level kann Schlägergröße und Ballgröße konfigurieren. Die Ballgeschwindigkeit steigt bei jedem Treffer; Startgeschwindigkeit pro Level einstellbar. Je nach Treffpunkt auf dem Schläger ändert sich auch die horizontale Geschwindigkeit.

Man kann neue Bildschirme mit verschiedenen Wandmustern definieren:

Spielsteuerung

Gerät mit beiden Händen halten und mit den Daumen auf dem Touchscreen den Schläger nach links oder rechts bewegen.

Neuen Bildschirm definieren

Diese Struktur definiert einen neuen Bildschirm:

typedef struct game_type {
  int ballsize;
  int playerwidth;
  int playerheight;
  int exponent;
  int top;
  int rows;
  int columns;
  int brickGap;
  int lives;
  int wall[GAMES_NUMBER];
  int initVelx;
  int initVely;
} game_type;

Und zum Set hinzufügen:

game_type games[GAMES_NUMBER] =
// ballsize, playerwidth, playerheight, exponent, top, rows, columns, brickGap, lives, wall[8], initVelx, initVely
{
  { 10, 60, 8, 6, 40 , 8, 8, 3, 3, {0x18, 0x66, 0xFF, 0xDB, 0xFF, 0x7E, 0x24, 0x3C} , 28, -28},
  // ... weitere Level
};

Wandmuster

Wandmuster als 8x8-Bit-Array:

{0xAA, 0xAA, 0xAA, 0xAA, 0xAA, 0xAA, 0xAA, 0xAA}

Entspricht diesem Bit-Array:

1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0
1,0,1,0,1,0,1,0

Erzeugt diese gespiegelte Wand:

Hardware

Verwendet wird ein AZ-Delivery 2,4 Zoll TFT LCD Display mit resistivem 4-Draht-Touchscreen und integriertem SD-Kartenleser.

Mehr zu diesem Shield in meinem Artikel „Road testing an AZ-Delivery 2,4 TFT LCD Touch Display“.

Shield-Montage

Shield einfach auf den Arduino stecken.

Bibliotheken

#include <Adafruit_GFX.h>      // Core-Grafikbibliothek
#include <Adafruit_TFTLCD.h>
#include <TouchScreen.h>

Touchscreen kalibrieren

Das Display muss kalibriert werden, damit die Positionsdaten beim Berühren stimmen. Die MCUFriend_kbv-Bibliothek liefert das Beispiel „TouchScreen_Calibr_native“. Es sendet die Ergebnisse an den Serial Port. Serial Monitor in der Arduino IDE öffnen, um den generierten Code zu kopieren.

Anweisungen auf dem Touchscreen folgen: Positionspunkte (weiß hervorgehoben) drücken und halten. Nach allen Punkten wird die Kalibrierung auf dem Display und per Serial Port ausgegeben.

Für dieses Projekt werden die Daten der „Portrait-Kalibrierung“ benötigt.

TouchScreen.h GFX Calibration
Making all control and bus pins INPUT_PULLUP
Typical 30k Analog pullup with corresponding pin
would read low when digital is written LOW
e.g. reads ~25 for 300R X direction
e.g. reads ~30 for 500R Y direction
Testing : (A2, D8) = 26
Testing : (A3, D9) = 28
ID = 0x9341
cx=153 cy=103 cz=534 X, Y, Pressure
cx=150 cy=475 cz=406 X, Y, Pressure
cx=155 cy=868 cz=231 X, Y, Pressure
cx=517 cy=103 cz=561 X, Y, Pressure
cx=535 cy=855 cz=364 X, Y, Pressure
cx=884 cy=88 cz=650 X, Y, Pressure
cx=908 cy=478 cz=557 X, Y, Pressure
cx=902 cy=864 cz=488 X, Y, Pressure
*** COPY-PASTE from Serial Terminal:
const int XP=8,XM=A2,YP=A3,YM=9; //240x320 ID=0x9341
const int TS_LEFT=118,TS_RT=931,TS_TOP=72,TS_BOT=887;
PORTRAIT CALIBRATION 240 x 320
x = map(p.x, LEFT=118, RT=931, 0, 240)
y = map(p.y, TOP=72, BOT=887, 0, 320)
LANDSCAPE CALIBRATION 320 x 240
x = map(p.y, LEFT=72, RT=887, 0, 320)
y = map(p.x, TOP=931, BOT=118, 0, 240)

Animation

Bewegung über den Bildschirm über Zeit: statische Geschwindigkeit auf Position jedes Zeitschritts anwenden.

pos += vel * dt;

Vermeidung von Gleitkomma-Arithmetik

ILI9341-Auflösung 240x320 → zwei 9-Bit-Integer für Pixeladressierung. Mit 16-Bit-Integer bleiben 6 Bit für Dezimalteil.

nnnn nnnn nndd dddd

Wir nennen diese Zahl 6 den „binären Exponenten“. Damit lässt sich ein Dezimalteil von 0,000 bis 0,63 darstellen – reine Integer-Mathematik ohne Floating Point.

Ganzzahlteil durch arithmetischen Rechtshift:

number >> exponent

Im Code:

state.ballx += state.velx;
state.bally += state.vely;
checkBallCollisions(game, &state, state.ballx >> game->exponent, state.bally >> game->exponent);
checkBallExit(game, &state, state.ballx >> game->exponent, state.bally >> game->exponent);

Demo-Modus

Define-Direktive einkommentieren, dann folgt der Schläger dem Ball (wie in Demo-Videos):

#define DEMO_MODE

Viel Spaß!

Eigene Muster und Level erstellen und teilen!

Code

• Arduino Breakout (Arduino)

Der vollständige Spielcode ist im Repository verfügbar. Er umfasst Initialisierung, Touch-Steuerung, Kollisionserkennung, Level-Wechsel, Punktestand, Lives-Anzeige und Demo-Modus.

Schaltplan