Arduino(6) ブロック崩しを作ってみる(3)

前回までで、ブロック崩しのグラフィックスは大体出来上がりました。
今回はこのブロック崩しを、実際に遊べる状態にしていきます。

遊べるゲームにするには「入力装置」が必要です。
ラケットを動かすためには、回転型の「ノブ」がいいですね。
そのような入力装置には可変抵抗器(ポテンショメータ)か、ロータリーエンコーダが使えます。

また、ゲームにはやはり「サウンド」も欲しいところです。
Arduinoなどのマイコンで一番お手軽に使えるサウンド出力は圧電ブザーです。
消費電力が非常に小さいので、どんなマイコンでも利用できます。

Arduinoでは、LCDと同じく、これらのデバイスを拡張ポートに「外付け」にします。
入力装置は可変抵抗器、サウンド出力は圧電ブザーをつなぐとして、それぞれアナログ入力、デジタル出力が1つずつ必要になります。

しかし、今回使ったaitendoのLCD「UL024TF」は、下の画像にあるように、Arduino UNOの拡張ポートをほとんど使ってしまっています。
未使用のポートは、アナログ入力のできるA5、デジタル入出力のD0とD1だけです。
ただしD0とD1はシリアルポートと兼用で、PCからプログラムを書き込む時にも使われますので、デバイスを接続するとプログラムが書き込めなくなってしまいます。

UL024TF-468-pinout.png

どうするかですが、SDカードからの出力を読み取るD12をサウンド用に使います。
ブロック崩しではSDカードは使用しませんので、問題は出ません。
ただし、SDカードをカードホルダに挿したままでプログラムを動かさないほうが良いでしょう。

というわけでA5に可変抵抗、D12に圧電ブザーをつなげば入力とサウンドが実現できそうです。

接続イメージは下図のようになります。
これはとりあえずの回路ですが、このままだとアナログ入力のA5を間違ってデジタル出力モードに設定して、可変抵抗を介してGNDへつながっている状態でHigh状態にすると壊れてしまいますので、A5と可変抵抗の間(図の緑のラインの途中)に保護用に1KΩの抵抗を追加するとより安心です。

arduino06-00.png

ちなみにこのような図は、Fritzingというツールで描くのが定番になっているようです。

Fritzing Download

今回初めて使ってみましたが、部品ライブラリがArduino向けに充実していますし、使いやすいソフトでした。
メニューもある程度は日本語化されています。

さて、上図のようにArduinoに可変抵抗器や圧電ブザーを直接配線できればいいのですが、実際には液晶シールドがArduino UNOにかぶさって、拡張ポートを完全にふさいでしまっています。
そのため、他のパーツを接続することができません。

対処の常套手段としては、2階建てになっている基板の間に、もう1枚基板を入れて3階建てにします。
間に挟む基板は、試作用基板「プロトタイプシールド」や、ピンの信号を横方向に引き出せる「ウイングシールド」ないし「スクリューシールド」を使います。
これはTFT LCDのオリジナルを開発したAdafruitでも推奨されている方法です。

しかし、今回は使うピンが少なく、ちょっと試してみるには大げさですので、手元にあったパーツを使ってもう少し簡易な方法を考えてみました。

用意するものは、Arduinoのピン配列に合わせた「ピンソケット」と、ICの足にひっかけて信号を取り出す「ICクリップ」です。

ピンソケットは、Arduinoの基板の拡張ポートに使われているものと同じで、ピンを差し込むことができるソケットです。
6ピンが1つ、8ピンが2つ、10ピンが1つ必要です。
ピンの部分が10mm以上のものでなければなりません。
私が使ったのは、aitendoでArduinoシールド自作用に販売されている「ピンソケットセット」です。

arduino06-01.jpg

ICクリップは、クリップのお尻を押すとカギ状の端子が出てきて、ICのピンに引っ掛けることができます。
バネが入っていて、手を離すとカギが引っ込み、ICのピンに固定されます。

arduino06-02.jpg

arduino06-03.jpg

購入する場合は、コード付きのICクリップが手間がなくて良いです。
「ICテストリード」「プローブ付きジャンパワイヤ」などの名称で販売されています。
両端ともICクリップになっているものが使いやすいでしょう。

では使用方法です。
ショートによる故障を避けるため、USBケーブルはArduinoから外してください。

まず、ピンソケットをArduinoの拡張ポートに取り付けます。
このとき、ピンはソケットに完全には入らず、少し余ります。
この余った部分にICクリップを引っ掛けて信号を取り出そうというわけです。

arduino06-04.jpg

LCDは、取り付けたピンソケットにそのまま取り付けることができます。

arduino06-05.jpg

可変抵抗器は、手元にあった1KΩのものを使いました。
1KΩ~100KΩくらいであれば、どんな値のものでも構いませんが、「Bカーブ」のものを使いましょう。
記載がない場合は、型番に「1KB」とか「B1K」とか、「B」の文字が含まれているものを選びます。

余談ですが「Bカーブ」は角度と抵抗値が比例しますが、「Aカーブ」は角度に対して抵抗値が「等比級数的に」変化します。
例えば20度回転して抵抗値が半分になったら、次の20度では抵抗値がさらに半分になります。
音量調節や明るさ調節などではAカーブを使うほうが人間の感覚にマッチします。

可変抵抗器は、Arduino UNOのA5、5V、GNDの各ピンに以下の写真のように接続します。

arduino06-06.jpg
arduino06-07.jpg

圧電ブザーは、ビニールコードのあるタイプと、基板実装用に硬い裸のリード線が出ているタイプがありますが、この手の実験用にはビニールコードつきのほうが扱いやすいです。
基板実装用タイプはブレッドボードで使うには便利です。

圧電ブザーは極性があります。
プラスのほうを12番ピン、マイナスのほうをGNDに接続します。

arduino06-08.jpg

以上で回路が組みあがりました。
プログラムのほうは、アナログポートからの入力はanalogRead命令、サウンド出力はtone命令が使えますので、ごく簡単な追加・修正で済みます。

まず使用するポートを定義しておきます。

#define GAMEPORT A5
#define SOUNDPORT 12

ラケットの移動の部分は以下のようになります。

  RacketDraw(racket,tft,BLACK);
racket=map(analogRead(GAMEPORT), 0, 1023, -5, SCRNWIDTH-RACKETSIZE+5);
racket=constrain(racket, 0, SCRNWIDTH-RACKETSIZE);
RacketDraw(racket,tft,WHITE);

赤い部分が修正箇所です。
前回は自前で定義したMAX・MINというマクロを使っていましたが、Arduinoの標準のconstrain関数を使うように変更しました。
なお、難易度調整のため、loopの中のdelayの引数は前回の倍の32にしています。

次にサウンドですが、音の高さの定義はIDEのスケッチの例題「toneMelody」(「02.Digital」に含まれています)の中の”pitches.h”で定義されている数値を引用しました。

#define NOTE_C3  131
#define NOTE_CS3 139
#define NOTE_D3  147
#define NOTE_DS3 156
#define NOTE_E3  165
#define NOTE_F3  175
#define NOTE_FS3 185
#define NOTE_G3  196
#define NOTE_GS3 208
#define NOTE_A3  220
#define NOTE_AS3 233
#define NOTE_B3  247
#define NOTE_C4  262

実際に使ったのはC3(ラケットに当たったとき)とC4(ブロックに当たったとき)だけです。

ラケットに当たったときの音は、loop関数内の以下の部分で出しています。

  if (ball.y == RACKETLINE) {
if (ball.x >= racket && ball.x < racket+RACKETSIZE) {
ball.vy = -ball.vy;
tone(SOUNDPORT,NOTE_C3,80);
}
}

ブロックに当たったときの音も、loop関数内で出しています。
まず、ブロックに当たったかどうかをbooleanで返すように、game_ongoing関数を修正しました。

boolean game_ongoing()
{
int8_t block;
boolean blockErased;

blockErased = false;
do {
block=BlocksHit(ball.x,ball.y,&ball.vx,&ball.vy);
if (block >= 0) {
exist[block] = false;
BlocksEraseOne(block);
blockErased = true;
}
} while (block > 0);
return blockErased;
}

その上で、この戻り値がtrueだったら音を出すようにしています。

  switch (gameStatus) {
case GAME_RESTART:
if (game_restart()) {
gameStatus = GAME_ONGOING;
}
break;
case GAME_ONGOING:
if (game_ongoing())
tone(SOUNDPORT,NOTE_C4,40);
if (BlocksLeft() == 0) {
gameStatus=GAME_RESTART;
}
break;
}

これでブロック崩しは完成です。
ゲームとしては、いろいろな拡張が考えられると思います。

たとえば

・ミスする回数に制限をつける
・ブロックを消した数に応じてだんだんスピードを早くする
・ブロックの並び方をステージによって変化させる
・ボールの跳ね返る方向を、ラケットのどの位置に当たったかで変化させる
・ボールやラケットを1ピクセル単位で動かす

などができそうです。

最後に、スケッチファイルと動作の様子のビデオを載せておきます。

Arduino(5) ブロック崩しを作ってみる(2)

前回に続き、今回はブロック崩しのメインとなる、ブロックとボールの衝突処理を実装します。

まずブロックの画面上での配置です。

画面は30×40に分割します。これは前回書いたとおりです。
描画のとき以外は、全てこの30×40の座標系の上で処理を行います。

ブロックのサイズは3×2とします。
これを横方向に10個、縦方向に5個並べます。
ブロックの総数は50個となります。

各ブロックは、下図のように番号で表します。

arduino04-1.jpg

ブロックが存在している・いないを表すために、論理型の配列existを定義します。
例えばexist[k]==trueなら、k番のブロックは消されずに残っています。

#define BLOCKWIDTH 3
#define BLOCKHEIGHT 2
#define BLOCKTOP 3
#define BLOCKBOTTOM 12
#define BLOCKLINES ((BLOCKBOTTOM-BLOCKTOP+1)/BLOCKHEIGHT)
#define NBLOCKS (BLOCKLINES*SCRNWIDTH/BLOCKWIDTH)

boolean exist[NBLOCKS];

関数BlocksInit()は、この配列の全要素をtrueで初期化します。
関数BlocksLeft()は、全要素中のtrueの個数を返します。
BlocksLeftの結果が0であれば、ステージをクリアしたことになります。

void BlocksInit()
{
int8_t i;

for(i=0; i<NBLOCKS; i++) {
exist[i] = true;
}
}

uint8_t BlocksLeft()
{
int8_t i;
int8_t leftBlocks;

leftBlocks = 0;
for (i=0; i<NBLOCKS; i++){
if (exist[i])
leftBlocks++;
}
return leftBlocks;
}

次に、ブロックの描画と消去です。

使用しているLCDは240×320ピクセルですので、1×1の領域は8×8ピクセルとなります。
プログラム内での座標を描画用座標を変換するマクロTOSCRNを定義します。
また、ブロックの各行の色を配列colorsに格納しておきます。

#define TOSCRN(v) (v<<3)
uint16_t colors[BLOCKLINES]={RED,GREEN,BLUE,YELLOW,MAGENTA};

ブロック崩しでは最初に全てのブロックを表示し、ゲーム開始後はボールが当たったブロックを一つずつ消していきます。
関数BlocksDrawAllは全てのブロックを描画します。
関数BlocksEraseOne(n)は、n番のブロックを消去します。

void BlocksDrawAll(){
int8_t x,y;
int8_t w,h;
int8_t c;
int8_t i;

w=TOSCRN(BLOCKWIDTH);
h=TOSCRN(BLOCKHEIGHT);
c=0;
i=0;
for(y=BLOCKTOP; y<=BLOCKBOTTOM; y += BLOCKHEIGHT) {
for(x=0; x<SCRNWIDTH; x += BLOCKWIDTH) {
if (exist[i++]) {
tft.fillRect(TOSCRN(x), TOSCRN(y), w, h, colors[c]);
}
}
c++;
}
}

void BlocksEraseOne(int8_t block) {
int8_t x,y;
int8_t w,h;
int8_t rows;

w=TOSCRN(BLOCKWIDTH);
h=TOSCRN(BLOCKHEIGHT);
rows = SCRNWIDTH/BLOCKWIDTH;
x = (block % rows) * BLOCKWIDTH;
y = (block / rows) * BLOCKHEIGHT + BLOCKTOP;
tft.fillRect(TOSCRN(x), TOSCRN(y), w, h, BLACK);
}

そしていよいよ、ブロックとボールの衝突の処理です。

まず、ブロックとボールが衝突したかどうかの判定は、比較的簡単です。
ボールが移動しようとしている位置にブロックが存在していれば、そのブロックと衝突したと判定できます。

一方、衝突したあと、ボールを跳ね返らせる処理は、やや複雑です。
ぶつかる瞬間のボールとブロックの位置関係により、下図のような場合があることが判ります。
それぞれに応じた跳ね返り方向を設定することが必要です。

arduino04-2.jpg

今回はボールの跳ね返りを以下のように決定しています。

ボールの移動方向を(vx,vy)とすると、

(1)ボールを(vx,0)だけ移動するとブロックに衝突するならば、水平方向に跳ね返る。
(2)ボールを(0,vy)だけ移動するとブロックに衝突するならば、垂直方向に跳ね返る。
(3)ボールを(vx,vy)だけ移動するとブロックに衝突するならば、水平かつ垂直方向に跳ね返る。
(4)以上をボールが跳ね返らなくなるまで繰り返す。

(1)(2)は同時に起こる場合がある(上図の右上のパターン)ので、(4)の処理が必要になります。

関数BlocksFindは、与えられた座標のブロック番号を返します。
ブロックが存在していても存在していなくても動作は同じです。
関数BlocksHitは、ボールの座標と移動ベクトルから、ブロックとの衝突有無を判断します。
衝突していなければ、-1を返します。
衝突していた場合は、衝突したブロックの番号を返すと共に、ボールの跳ね返る方向へ移動ベクトルの値を書き換えます。

int8_t BlocksFind(uint8_t x, uint8_t y)
{
if (x > SCRNWIDTH) {
return -1;
}
if ((y < BLOCKTOP)||(y > BLOCKBOTTOM)) {
return -1;
}
uint8_t rows=SCRNWIDTH/BLOCKWIDTH;
return (y-BLOCKTOP)/BLOCKHEIGHT*rows + x/BLOCKWIDTH;
}

int8_t BlocksHit(uint8_t x, uint8_t y, int8_t *vx, int8_t *vy)
{
int8_t block;

block = BlocksFind(x + *vx, y);
if ((block >= 0) && exist[block]) {
*vx = -*vx;
return block;
}
block = BlocksFind(x, y + *vy);
if ((block >= 0) && exist[block]) {
*vy = -*vy;
return block;
}
block = BlocksFind(x + *vx, y + *vy);
if ((block >= 0) && exist[block]) {
*vx = -*vx;
*vy = -*vy;
return block;
}
return -1;
}

最後に、ゲームの状態遷移です。

ブロックを全部消したら、ゲームを再開する処理が必要になります。
このため、ゲームには

●ゲーム中
●ステージクリア後のゲーム再開待ち

の二つの状態を持たせます。

#define GAME_ONGOING 1
#define GAME_RESTART 0

uint8_t gameStatus;

また、ゲーム再開の処理では、プレイヤーを混乱させないようボールの座標はリセットしないことにします。
すると、ブロックを描画したい領域からボールが出ていくまでは、再開処理を行えなくなります。
ゲーム再開待ち状態では、ボールがブロックの描画領域よりも画面下方にあり、かつ移動方向がも下向きとなったときにブロックの描画を行います。

関数game_restartがこの処理を行います。
この関数は、ブロックを描画できたときにtrue、まだボールが出て行くのを待っている場合はfalseを返します。
関数game_ongoingはボール とブロックの衝突判定を行い、衝突したらそのブロックを消去します。

boolean game_restart()
{
if ((ball.y > BLOCKBOTTOM) && (ball.vy >0)) {
BlocksInit();
BlocksDrawAll();
return true;
} else {
return false;
}
}

void game_ongoing()
{
int8_t block;

do {
block=BlocksHit(ball.x,ball.y,&ball.vx,&ball.vy);
if (block >= 0) {
exist[block] = false;
BlocksEraseOne(block);
}
} while (block > 0);
}

そして、loop()の中で、状態遷移の管理を行います。

void loop()
{
switch (gameStatus) {
case GAME_RESTART:
if (game_restart()) {
gameStatus = GAME_ONGOING;
}
break;
case GAME_ONGOING:
game_ongoing();
if (BlocksLeft() == 0) {
gameStatus=GAME_RESTART;
}
break;
}
(以下は前回と同じなので略)

最後にスケッチファイルと、動作の様子のビデオを置いておきます。

Arduino(4) ブロック崩しを作ってみる(1)

Arduinoでカラー液晶に表示ができるようになったので、ゲームを作ってみたいと思います。

といっても、ArduinoはCPUパワーもありませんし、描画はLCDのコントローラ任せなので、こちらも期待できません。
というわけで、比較的描画量の少ないゲームとして、「ブロック崩し」を選んでみました。

Arduinoのプログラミング言語は「Arduino言語」と呼ばれていますが、実態はほぼC言語で、それにArduino特有のお約束事がついている感じです。

もっとも基本的なお約束は、プログラム(Arduinoがスケッチと呼んでいるもの)は2つの関数setupとloopを定義するものである、ということです。
setup()が最初に1回呼ばれ、そのあとloop()が繰り返し呼び出されます。
(従って、通常loop()自体はループ1回分の処理しか行いません。)

基本的な事柄は

Arduino 日本語リファレンス

を見てください。
setupとloopと一般的なC言語におけるmain関数との関係については

Studio Gyokimae

が参考になります。

今回は、まずはボールを画面の中で動かすところを作ってみます。

IDEのメニューから「新規ファイル」を選ぶと、以下のような雛形が現れます。

void setup() {
// put your setup code here, to run once:

}

void loop() {
// put your main code here, to run repeatedly:

}

この二つの関数を埋めればよいわけですが、今回は、setup()で必要な処理はLCDと変数の初期化だけです。
LCDの初期化は前回のgraphicstestなどのサンプルスケッチのsetup()をそのまま流用します。

loop()では、ボールが画面の端へ行ったら跳ね返るようにします。
ゲームではおなじみの処理ですね。
ついでですので、ラケットも描いて、ラケットはボールの位置に自動追従するようにしてみましょう。

プログラムはこんな感じです。
青い部分はサンプルスケッチからコピーしてきている部分です。
赤い部分がボールの処理、ピンクの部分はラケットの処理の部分です。


#include     // Core graphics library
#include  // Hardware-specific library

#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
// optional
#define LCD_RESET A4

// Assign human-readable names to some common 16-bit color values:
#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

#define RACKETSIZE 8
#define RACKETLINE 37
#define SCRNWIDTH 30
#define SCRNHEIGHT 40

typedef struct
{
uint8_t x,y;
int8_t vx,vy;
} Ball;

#define BallInit(ball) ball = {.x = SCRNWIDTH-1, .y = SCRNHEIGHT-SCRNWIDTH, .vx = -1, .vy = 1}
#define BallDraw(ball,tft,color) tft.fillRect(ball.x<<3, ball.y<<3, 8, 8, color)
#define RacketDraw(racket,tft,color) tft.fillRect(racket<<3, (RACKETLINE+1)<<3, RACKETSIZE<<3, 8, color)

#define MAX(a,b)  (((a) > (b)) ? (a) : (b))
#define MIN(a,b)  (((a) < (b)) ? (a) : (b))

int16_t racket=(SCRNWIDTH-RACKETSIZE)>>1;
Ball ball;

void setup(void) {
  tft.reset();
uint16_t identifier = tft.readID();
tft.begin(identifier);
tft.fillScreen(BLACK);

  BallInit(ball);
}


void loop()
{
  BallDraw(ball, tft, BLACK);
ball.x += ball.vx;
if (ball.x >= SCRNWIDTH - 1 || ball.x < 1) { ball.vx = -ball.vx; } ball.y += ball.vy; if (ball.y == RACKETLINE) { if (ball.x >= racket && ball.x < racket+RACKETSIZE) { ball.vy = -ball.vy; } } if (ball.y == 0) { ball.vy = -ball.vy; } if (ball.y > SCRNHEIGHT) {
BallInit(ball);
}
BallDraw(ball, tft, YELLOW);

  RacketDraw(racket,tft,BLACK);
racket=(ball.x)-(RACKETSIZE>>1);
racket=MAX(0, racket);
racket=MIN(racket, SCRNWIDTH-RACKETSIZE);
RacketDraw(racket,tft,WHITE);

delay(16);
}

今回は全ての処理を8ドット単位で行うことにしました。
LCDは240×320ピクセルですが、これを30×40の画面として使うことになります。
このほうが、将来いろいろな解像度の液晶に移植しやすいのではないかと考えたためです。

そのため、座標系は画面の左上(USBジャックのある側が上)を原点として、

X軸:0..29
Y軸:0..39

となります。

ボールの変数は、位置を表す(x,y)、それに水平・垂直方向の移動量を現す(vx,vy)が必要です。
Arduino言語はC言語ですので、構造体が使えます。
ということでBall型を定義しました。

しかし残念なことに、「構造体typedefした型を引数とする関数」はスケッチの中では定義できません。(typedefせずにstructのままなら引数で渡せます。)
これを行うには、構造体をtypedefを別ファイルで定義するか、typedef後に関数のプロトタイプを明示的に宣言する(→解説必要があるようです。
そこで、とりあえず初期化と描画の2つの処理を、関数ではなくマクロとして定義しました。

なお、Arduino言語ではクラス定義も(一応)行えますが、今回は使っていません。
クラス定義も構造体同様に「ライブラリ」として、ファイルを分けて定義しなければならないためです。

構造体とそれを扱う関数、あるいはクラス定義、については別ファイル(.c、.cpp、.hの拡張子を持つファイル)でライブラリとして定義し、スケッチからはインクルードして使用せよというのがArduinoの思想のようです。

最後の delay関数は、msec単位でのウエイトを行います。約1/60秒ということになります。
loop()を抜けると、またloop()の先頭から実行されます。