TFT ILI9341 ディスプレイデモ：Arduino でのグラフィックスとバウンドボール

はじめに

カラー TFT ディスプレイは、Arduino プロジェクトに豊かな視覚的フィードバックを追加する素晴らしい方法です。このチュートリアルでは、Adafruit ILI9341 ライブラリと Adafruit GFX ライブラリを使用して、240x320 の ILI9341 ベース TFT を駆動します。ディスプレイの配線方法、必要なライブラリのインストール方法、そして静的な UI 要素を描画し、バウンドするボールをアニメーションさせるコードの書き方を学びます。これらはすべて、Velxio シミュレーターを使えばブラウザ上で実行でき、ハードウェアは不要です！

回路の解説

まずは回路を見てみましょう。回路図はシンプルです。Arduino Uno が SPI（シリアル・ペリフェラル・インターフェース）を介して ILI9341 ディスプレイと通信します。

Velxio シミュレーターキャンバス上の TFT ディスプレイの回路図

以下が完全な配線リストです：

Arduino Uno ピン	TFT ILI9341 ピン	配線色
13 (SCK)	SCK	オレンジ
11 (MOSI)	MOSI	オレンジ
10 (CS)	CS	青
9 (D/C)	D/C	緑
8 (RST)	RST	赤
7 (LED)	LED	白
5V	VCC	（図示せず、想定）
GND	GND	（図示せず、想定）

SCK（シリアルクロック） と MOSI（マスターアウトスレーブイン） は SPI データラインです。これらは Arduino からディスプレイへクロックとデータを伝送します。
CS（チップセレクト） は、ディスプレイが SPI コマンドをいつ受信するかを指示します。アクティブローです。
D/C（データ/コマンド） は、SPI 送信がコマンドかピクセルデータかを選択します。
RST（リセット） はディスプレイコントローラーをリセットします。必要に応じてハードウェアリセットを行えるよう、デジタルピンに接続します。
LED はバックライトを制御します。HIGH に設定してバックライトを点灯させます。

外部部品は不要です。ディスプレイは 5V ロジックで動作し（ほとんどの ILI9341 モジュールは 5V トレラント）、SPI ピンは直接接続されます。

コードの解説

それではコードを見ていきましょう。グラフィックプリミティブには Adafruit ILI9341 ライブラリと Adafruit GFX ライブラリを使用します。これらのライブラリはライブラリマネージャーからインストールする必要があります。

TFT ディスプレイで使用するライブラリを示すライブラリマネージャーモーダル

ライブラリマネージャー（ツール > ライブラリを管理）を開き、「Adafruit ILI9341」と「Adafruit GFX Library」を検索してインストールしてください。SPI ライブラリは自動的に含まれます。

以下が完全なコードです：

// TFT ILI9341 Display Demo (240x320)
// Library: Adafruit ILI9341 + Adafruit GFX
// Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI)

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

#define TFT_CS   10
#define TFT_DC    9
#define TFT_RST   8
#define TFT_LED   7

Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);

// Background color: blue (visible on dark simulator canvas)
#define BG_COLOR 0x001F

// Ball state
int ballX = 120, ballY = 200;
int ballDX = 3, ballDY = 2;
const int BALL_R = 10;

// Play-field boundaries
const int FX = 5, FY = 110, FW = 230, FH = 200;

void drawStaticUI() {
  tft.fillScreen(BG_COLOR);

  // Title
  tft.setTextSize(3);
  tft.setTextColor(tft.color565(255, 220, 0));
  tft.setCursor(20, 10);
  tft.print("VELXIO TFT");

  // Subtitle
  tft.setTextSize(2);
  tft.setTextColor(tft.color565(180, 180, 255));
  tft.setCursor(30, 50);
  tft.print("ILI9341 Demo");

  // Color palette bars
  tft.fillRect(10, 82, 70, 18, tft.color565(220, 50, 50));
  tft.fillRect(85, 82, 70, 18, tft.color565(50, 200, 50));
  tft.fillRect(160, 82, 70, 18, tft.color565(50, 100, 240));

  // Play-field border
  tft.drawRect(FX, FY, FW, FH, tft.color565(80, 80, 130));
}

void setup() {
  pinMode(TFT_LED, OUTPUT);
  digitalWrite(TFT_LED, HIGH);

  tft.begin();
  drawStaticUI();
}

void loop() {
  // Erase old ball
  tft.fillCircle(ballX, ballY, BALL_R, BG_COLOR);

  // Update position
  ballX += ballDX;
  ballY += ballDY;

  // Bounce off field borders
  if (ballX < FX + BALL_R + 1 || ballX > FX + FW - BALL_R - 1) ballDX = -ballDX;
  if (ballY < FY + BALL_R + 1 || ballY > FY + FH - BALL_R - 1) ballDY = -ballDY;

  // Draw ball
  tft.fillCircle(ballX, ballY, BALL_R, tft.color565(255, 140, 0));

  delay(30);
}

コードの重要ポイント

ピン定義: TFT_CS、TFT_DC、TFT_RST、TFT_LED をそれぞれピン 10、9、8、7 として定義しています。これらは配線と一致しています。
ライブラリの初期化: Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST); でディスプレイオブジェクトを作成します。ライブラリが内部で SPI 通信を処理します。
バックライト制御: setup() 内でピン 7 を HIGH に設定してバックライトを点灯します。これがないと画面は暗いままです。
静的 UI: drawStaticUI() は画面を青色の背景で塗りつぶし、2 行のテキストを表示し、3 つの色付き長方形をパレットとして描画し、プレイフィールドの枠線を描画します。
アニメーションループ: loop() 内で、背景色で塗りつぶした円を描画して古いボールを消去し、位置を更新し、プレイフィールドの境界との衝突をチェックし、オレンジ色でボールを再描画します。delay(30) でフレームレートを制御します。
色変換: tft.color565(r, g, b) は 8 ビット RGB 値を、ディスプレイで使用される 16 ビット 565 形式に変換します。

学生向けの重要概念

SPI 通信: ディスプレイは同期シリアルプロトコルである SPI を使用します。Arduino がマスター、ディスプレイがスレーブです。データには 3 本のワイヤ（SCK、MOSI、CS）のみが必要で、D/C と RST は追加の制御ラインです。
グラフィックプリミティブ: Adafruit GFX ライブラリは、fillScreen()、fillRect()、drawRect()、fillCircle()、setCursor()、print()、setTextSize() などの関数を提供します。これらにより、図形やテキストを簡単に描画できます。
ダブルバッファリング（概念）: 新しいボールを描画する前に古いボールを消去します。これにより、残像を防ぎます。より高度なプロジェクトでは、フレームバッファを使用することもあります。
衝突検出: バウンドするボールのロジックは、ボールの中心が境界から BALL_R ピクセル以内にあるかどうかをチェックします。該当する場合、方向が反転します。
色深度: ILI9341 は 262K 色（18 ビット）をサポートしていますが、ライブラリは速度のために 16 ビット（65K 色）を使用します。color565() は RGB を 5-6-5 ビットにパックします。

よくある落とし穴とデバッグのヒント

バックライトが消えている: 画面が暗いままの場合は、ピン 7 が HIGH に設定されていることを確認してください。シミュレーターでは、LED ピンの配線が接続されているか確認してください。
ピンの誤接続: CS、DC、RST、MOSI、SCK がコードと一致しているか再確認してください。1 本の配線ミスで、出力が乱れたり、表示されなくなったりする可能性があります。
ライブラリがインストールされていない: Adafruit ライブラリがないとコードはコンパイルできません。ライブラリマネージャーを使用してインストールしてください。
SPI の競合: 他の SPI デバイスがある場合は、それらの CS ピンが同時にアクティブにならないようにしてください。ここでは、TFT のみが SPI を使用しています。
ボールが消える: ボールがプレイフィールドから消えた場合は、衝突判定の範囲を確認してください。条件では、ボールの半径を考慮するために FX + BALL_R + 1 を使用しています。