Je TFT-scherm
tot leven wekken.

Leg dit klaar. Alles zit meestal in een standaard starterkit:

• Het 1.44" TFT-scherm (rood printje, chip ST7735S, 8 pinnen). Op de achterkant staat 1.44 SPI 128*128 V1.1.
• Een Arduino — deze tutorial werkt op de Uno R4 én de Mega 2560. Kies hierboven welke je hebt.
• Een breadboard en een handvol dupont-draadjes (male-male voor het breadboard, of male-female recht naar het bord).
• Een analoge joystick-module (5 pinnen: GND, +5V, VRx, VRy, SW) — die gebruiken we in stap 6.
• Voor de veilige aansluiting: een paar weerstanden (5× 1 kΩ en 5× 2 kΩ). Meer daarover in stap 2.

Onderaan het printje zit één rij van acht gouden pinnen. Houd je het scherm rechtop met de pinnen naar beneden, dan lopen ze van links naar rechts zo:

Wat doet elke pin?

LED

De achtergrondverlichting. Zonder deze aan zie je niets, ook al werkt de rest.

SCK

De klok van de SPI-verbinding — de metronoom die de bitjes op maat zet.

SDA

De datalijn (heet officieel MOSI): hierover stuurt de Arduino de pixels naar het scherm.

A0

Data/Command (DC). Let op: dit is niet de analoge pin A0 van je Arduino! Verwarrend gekozen naam op het printje.

RESET

Herstart het scherm bij het opstarten.

CS

Chip Select: zegt "ik praat nu tegen jou". Handig als je later meer SPI-apparaten hebt.

GND

De min / 0 volt. De gemeenschappelijke referentie.

VCC

De voeding. Het printje heeft een eigen 3.3V-regelaar, dus hier mag 5V op.

Het verbindingsschema

Dit is een aansluitkaart: welke pin van het scherm gaat naar welke pin van je bord. De twee lijnen die per bord verschillen (SCK en SDA) kleuren mee met je keuze bovenaan.

De bedradingstabel

De veilige variant (aanbevolen)

Wil je op zeker spelen, zet dan op elk van de vijf signaallijnen (SCK, SDA, A0, RESET, CS) een simpele spanningsdeler die 5V terugbrengt naar ~3.3V: een weerstand van 1 kΩ in serie, en vanaf dat punt 2 kΩ naar GND. VCC (5V) en LED (3.3V) hoeven dat niet.

Wil je snel testen en durf je het risico aan, dan kun je de vijf lijnen ook rechtstreeks aansluiten — begin dan met VCC op 5V en de rest zoals in de tabel. Voel na het inschakelen even of het printje niet warm wordt.

Installeer de gratis Arduino IDE en daarna twee kant-en-klare libraries van Adafruit:

1. Open de Arduino IDE → menu Tools → Board en kies je bord (Arduino Uno R4 Minima/WiFi).
2. Ga naar Sketch → Include Library → Manage Libraries…
3. Zoek en installeer Adafruit ST7735 and ST7789 Library.
4. Zoek en installeer Adafruit GFX Library (de IDE vraagt vaak of hij afhankelijkheden mee wil installeren — zeg ja).

Tijd voor het "hallo wereld"-moment. Deze sketch zet twee regels gekleurde tekst neer. Bovenaan vertellen we de library op welke pinnen CS, RESET en DC (A0) zitten — dat zijn op beide borden dezelfde D10/D9/D8. De klok en data (SCK/SDA) vindt de library zélf, en dáárom werkt exact dezelfde code op je R4 én je Mega.

#include <Adafruit_GFX.h>      // de teken-gereedschapskist
#include <Adafruit_ST7735.h>   // de driver voor dit scherm
#include <SPI.h>               // de SPI-communicatie

#define TFT_CS  10   // Chip Select  -> scherm-pin CS
#define TFT_RST  9   // Reset        -> scherm-pin RESET
#define TFT_DC   8   // Data/Command -> scherm-pin A0

// Maak het scherm-object aan (klok/data via hardware-SPI van je bord)
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

void setup() {
  tft.initR(INITR_144GREENTAB);   // juiste variant voor 1.44" 128x128
  tft.fillScreen(ST77XX_BLACK);   // maak het scherm zwart

  tft.setCursor(10, 40);          // ga naar kolom 10, rij 40
  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(2);             // 2x zo groot
  tft.println("Hallo");

  tft.setCursor(10, 65);
  tft.setTextColor(ST77XX_CYAN);
  tft.println("Robin!");
}

void loop() {
  // leeg: we tekenen maar één keer, dus hier hoeft niets te gebeuren
}

Sluit je bord aan met de USB-kabel, kies de juiste poort onder Tools → Port en klik op de Upload-knop (pijltje). Na een paar seconden staat je naam op het scherm.

Voor een spel moet je vormen kunnen neerzetten op precieze plekken. Het scherm is een raster van 128 × 128 puntjes (pixels). De linkerbovenhoek is (0, 0). x loopt naar rechts, y loopt naar beneden (let op: omgekeerd aan wiskunde!).

De handigste tekencommando's — je stapelt gewoon vormen op elkaar:

Kleuren heten ST77XX_BLACK, _WHITE, _RED, _GREEN, _BLUE, _YELLOW, _CYAN, _MAGENTA. De truc voor animatie: teken iets, wis het door er zwart overheen te tekenen op de oude plek, en teken het opnieuw net iets verderop. Doe dat snel achter elkaar en het lijkt te bewegen.

Voor besturing gebruiken we een analoge joystick. Die heeft twee "schuifknopjes" (X en Y) en een drukknop (SW) als je hem indrukt.

De X- en Y-richting lees je als een getal van 0 tot 1023. In rust staat de stick ongeveer in het midden (~512). Duw je hem, dan gaat het getal richting 0 of 1023. De drukknop (SW) verbinden we met INPUT_PULLUP, zodat we geen extra weerstand nodig hebben — ingedrukt = LOW.

void setup() {
  Serial.begin(9600);
  pinMode(2, INPUT_PULLUP);   // drukknop
}

void loop() {
  Serial.print("X = ");  Serial.print(analogRead(A0));
  Serial.print("   Y = "); Serial.print(analogRead(A1));
  Serial.print("   knop = "); Serial.println(digitalRead(2));
  delay(200);
}

Nu alles werkt, maken we een echt spelletje. Je bestuurt een groen blokje met de joystick, vangt gele stipjes voor punten, en ontwijkt een rode vijand die door het scherm stuitert. Raakt de vijand je, dan is het game over.

Hoe het werkt (in mensentaal)

Een spel is eigenlijk één lus die zich heel snel herhaalt. Elke ronde doen we vijf dingen:

• Lezen: waar staat de joystick? Verplaats de speler die kant op.
• Bewegen: verplaats de vijand; laat hem van de randen afketsen.
• Tekenen: wis de oude posities (zwart) en teken speler, vijand en hapje opnieuw.
• Botsen? Raakt de speler het hapje → punt erbij. Raakt de vijand de speler → game over.
• Wachten: een klein pauze­tje, dan weer van voren af aan.

De complete sketch

Plak dit als één geheel in de Arduino IDE en upload. Lees de commentaarregels (na //) — die vertellen per stukje wat er gebeurt.

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
#define JOY_X A0
#define JOY_Y A1
#define JOY_SW 2

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// --- speler ---
int spelerX = 60, spelerY = 60;     // huidige plek
int vorigeX = 60, vorigeY = 60;     // vorige plek (om te wissen)
const int SPELER = 8;               // grootte in pixels

// --- hapje & vijand ---
int hapX, hapY;
int vijandX, vijandY, vijandDX, vijandDY;   // DX/DY = snelheid/richting
int score = 0;
bool gameOver = false;

void nieuwHapje() {                  // leg een hapje op een willekeurige plek
  hapX = random(4, 124 - 4);
  hapY = random(14, 124 - 4);        // niet in de bovenste balk (score)
}

void toonScore() {
  tft.fillRect(0, 0, 128, 12, ST77XX_BLACK);
  tft.setCursor(2, 2);
  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(1);
  tft.print("Score: ");
  tft.print(score);
}

void resetSpel() {
  score = 0;
  gameOver = false;
  spelerX = spelerY = 60;
  vijandX = 20; vijandY = 20;
  vijandDX = 2; vijandDY = 2;
  tft.fillScreen(ST77XX_BLACK);
  nieuwHapje();
  toonScore();
}

void setup() {
  pinMode(JOY_SW, INPUT_PULLUP);
  tft.initR(INITR_144GREENTAB);      // evt. INITR_BLACKTAB / INITR_REDTAB
  randomSeed(analogRead(A5));         // "toevals-zaadje" van een losse pin
  resetSpel();
}

void loop() {
  if (gameOver) {
    // wacht tot je de joystick indrukt om opnieuw te spelen
    if (digitalRead(JOY_SW) == LOW) { delay(200); resetSpel(); }
    return;
  }

  // --- 1. joystick lezen ---
  int x = analogRead(JOY_X);
  int y = analogRead(JOY_Y);
  if (x < 400) spelerX -= 3;          // pas 400/624 aan op jouw stick (stap 6)
  if (x > 624) spelerX += 3;
  if (y < 400) spelerY -= 3;
  if (y > 624) spelerY += 3;
  spelerX = constrain(spelerX, 0, 128 - SPELER);
  spelerY = constrain(spelerY, 13, 128 - SPELER);   // onder de scorebalk

  // --- 2. vijand bewegen (en van de randen afketsen) ---
  tft.fillRect(vijandX, vijandY, 6, 6, ST77XX_BLACK);   // wis oude vijand
  vijandX += vijandDX;
  vijandY += vijandDY;
  if (vijandX <= 0 || vijandX >= 122) vijandDX = -vijandDX;
  if (vijandY <= 13 || vijandY >= 122) vijandDY = -vijandDY;

  // --- 3. speler hertekenen ---
  tft.fillRect(vorigeX, vorigeY, SPELER, SPELER, ST77XX_BLACK);   // wis oude speler
  tft.fillRect(spelerX, spelerY, SPELER, SPELER, ST77XX_GREEN);   // teken nieuwe
  vorigeX = spelerX; vorigeY = spelerY;

  tft.fillRect(vijandX, vijandY, 6, 6, ST77XX_RED);
  tft.fillCircle(hapX, hapY, 3, ST77XX_YELLOW);

  // --- 4a. hapje gepakt? ---
  if (abs(spelerX + 4 - hapX) < 7 && abs(spelerY + 4 - hapY) < 7) {
    tft.fillCircle(hapX, hapY, 3, ST77XX_BLACK);   // wis het hapje
    score++;
    toonScore();
    nieuwHapje();
    if (score % 5 == 0) {                          // elke 5 punten: sneller
      vijandDX += (vijandDX > 0) ? 1 : -1;
      vijandDY += (vijandDY > 0) ? 1 : -1;
    }
  }

  // --- 4b. vijand geraakt? (rechthoeken die overlappen) ---
  if (spelerX < vijandX + 6 && spelerX + SPELER > vijandX &&
      spelerY < vijandY + 6 && spelerY + SPELER > vijandY) {
    gameOver = true;
    tft.fillScreen(ST77XX_BLACK);
    tft.setTextSize(2);
    tft.setTextColor(ST77XX_RED);
    tft.setCursor(10, 40); tft.println("GAME");
    tft.setCursor(10, 60); tft.println("OVER");
    tft.setTextSize(1);
    tft.setTextColor(ST77XX_WHITE);
    tft.setCursor(10, 90);  tft.print("Score: "); tft.print(score);
    tft.setCursor(10, 105); tft.print("Druk joystick");
  }

  // --- 5. kleine pauze ---
  delay(30);
}