[Android] インベーダー・ゲームを作る (1) シンプル

[Android] インベーダー・ゲームを作る (1) シンプル
================================================================================

インベーダー・ゲームを作ってみる。

ゲームの概要：
・画面上部にインベーダーがあり、これが左右に動く（端まで行ったら折り返す程度）
・画面下部に砲台があり、ユーザーのタッチムーブ(ドラッグ)によって左右に動く
・画面をタッチすると、砲台から弾が上部向けてに発射する
・弾がインベーダーに当たると得点する

ゲーム自体は、ImageView クラスを継承したクラス CanvasView を作って、それの上で行
う。


▲ アクティビティ

□ Invader01Activity.java
---
package jp.marunomaruno.android.invader;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class InvaderActivity extends Activity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TextView scoreView = (TextView) findViewById(R.id.score);
        CanvasView canvasView = (CanvasView) findViewById(R.id.canvasView);
        canvasView.setScoreView(scoreView);
    }
}
---


▲ ビュー

ゲーム自体は、ImageView クラスを継承したクラス CanvasView を作って、それの上で行
う。

CanvasView は以下のようなメンバーからなる。

定数
---
int     BLOCK_SIZE          描画のときのブロックの大きさ
int     BULLET_COLOR        弾の色
int     BULLET_HEIGHT       弾の描画高
int[][] BULLET_IMAGE        弾の図形イメージ
int     BULLET_MOVING_UNIT  弾の移動する単位(ピクセル)
int     BULLET_WIDTH        弾の描画幅
int     DIRECTION_LEFT      移動方向 左
int     DIRECTION_RIGHT     移動方向 右
int     DRAWING_INTERVAL    描画間隔(ミリ秒)
int     GUN_COLOR           砲台の色
int     GUN_HEIGHT          砲台の描画高
int[][] GUN_IMAGE           砲台の図形イメージ
int     GUN_MOVING_UNIT     弾の移動する単位(ピクセル)
int     GUN_WIDTH           砲台の描画幅
int     INVADER_COLOR       正常時のインベーダーの色
int     INVADER_HEIGHT      インベーダーの描画高
int     INVADER_HITL_COLOR  当たったときのインベーダーの色
int[][] INVADER_IMAGE       インベーダーの図形イメージ
int     INVADER_MOVING_UNIT インベーダーの移動する単位(ピクセル)
int     INVADER_WIDTH       インベーダーの描画幅
int     NOT_VISIBLE         非表示
---

フィールド
---
private  int       bulletPointX        弾の x 座標
private  int       bulletPointY        弾の y 座標
private  int       gunPointX           砲台の x 座標
private  int       gunPointY           砲台の y 座標
private  int       invaderColor        インベーダーの表示色
private  int       invaderMovingUnit   インベーダーの移動方向
private  int       invaderPointX       インベーダーの x 座標
private  int       invaderPointY       インベーダーの y 座標
private  int       score               得点
private  TextView  scoreView           得点を表示するビュー
---

public メソッド
---
TextView getScoreView()                   scoreView を取得する。
void     setScoreView(TextView scoreView) scoreView を設定する。
void     shot()                           弾を発射する。
---

private メソッド
---
void  clearScreen(Canvas canvas)           canvasをクリアする。
void  drawBullet(Canvas canvas, int x, int y, int color)  弾を描画する。
void  drawGun(Canvas canvas, int x, int y, int color)     砲台を描画する。
void  drawImage(Canvas canvas, Paint paint, int x, int y, int[][] image)
                                                          図形を描画する。
void  drawInvader(Canvas canvas, int x, int y, int color) インベーダーを描画する。
void  drawScore(int score)                 スコアを表示する。
void  init()                               すべてのコンストラクターで共通の処理。
boolean isBorder(int x, int width)         端かどうかを判断する。
boolean isHit()                            端が当たったかどうかをを判断する。
void  moveGun(int x)                       砲台の位置をずらす。
---

オーバーライドしているメソッド
---
void    onDraw(Canvas canvas) 
void    onSizeChanged(int w, int h, int oldw, int oldh) 
boolean onTouchEvent(MotionEvent event) 
---


□ CanvasView.java
---
package jp.marunomaruno.android.invader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * インベーダー・ゲーム。
 *
 * @author marunomaruno
 * @version 1.0, 2012-03-06
 */
/**
 * @author marunomaruno
 *
 */
public class CanvasView extends ImageView {

    // 描画イメージ
    /**
     * 描画のときのブロックの大きさ
     */
    public static final int BLOCK_SIZE = 20; // (1)
    /**
     * 非表示
     */
    public static final int NOT_VISIBLE = -1;
    /**
     * 描画間隔(ミリ秒)
     */
    public static final int DRAWING_INTERVAL = 50;

    // インベーダー関係
    /**
     * インベーダーの図形イメージ
     */
    public static final int[][] INVADER_IMAGE = {
            { 0, 0, 0, 1, 0, 1, 0, 0, 0 },
            { 1, 0, 1, 1, 1, 1, 1, 0, 1 },
            { 1, 1, 1, 0, 1, 0, 1, 1, 1 },
            { 0, 0, 1, 1, 1, 1, 1, 0, 0 },
            { 0, 0, 1, 1, 0, 1, 1, 0, 0 },
            { 0, 0, 1, 0, 0, 0, 1, 0, 0 },
    };    // (2)

    /**
     * インベーダーの描画幅
     */
    public static final int INVADER_WIDTH = INVADER_IMAGE[0].length
            * BLOCK_SIZE;// (3)
    /**
     * インベーダーの描画高
     */
    public static final int INVADER_HEIGHT = INVADER_IMAGE.length * BLOCK_SIZE;// (4)

    /**
     * 正常時のインベーダーの色
     */
    public static final int INVADER_COLOR = Color.GREEN;
    /**
     * 当たったときのインベーダーの色
     */
    public static final int INVADER_HITL_COLOR = Color.RED;

    /**
     * インベーダーの移動する単位(ピクセル)
     */
    public static final int INVADER_MOVING_UNIT = 1;
    /**
     * 移動方向 左
     */
    public static final int DIRECTION_LEFT = -1;
    /**
     * 移動方向 右
     */
    public static final int DIRECTION_RIGHT = 1;

    // 砲台関係
    /**
     * 砲台の図形イメージ
     */
    public static final int[][] GUN_IMAGE = {
            { 0, 0, 1, 1, 0, 0 },
            { 1, 1, 1, 1, 1, 1 },
    };

    /**
     * 砲台の描画幅
     */
    public static final int GUN_WIDTH = GUN_IMAGE[0].length * BLOCK_SIZE;
    /**
     * 砲台の描画高
     */
    public static final int GUN_HEIGHT = GUN_IMAGE.length * BLOCK_SIZE;

    /**
     * 弾の移動する単位(ピクセル)
     */
    public static final int GUN_MOVING_UNIT = 5;

    /**
     * 砲台の色
     */
    public static final int GUN_COLOR = Color.BLUE;

    // 弾関係
    /**
     * 弾の図形イメージ
     */
    public static final int[][] BULLET_IMAGE = {
            { 1 },
    };

    /**
     * 弾の描画幅
     */
    public static final int BULLET_WIDTH = BULLET_IMAGE[0].length * BLOCK_SIZE;
    /**
     * 弾の描画高
     */
    public static final int BULLET_HEIGHT = BULLET_IMAGE.length * BLOCK_SIZE;

    /**
     * 弾の移動する単位(ピクセル)
     */
    public static final int BULLET_MOVING_UNIT = 5;

    /**
     * 弾の色
     */
    public static final int BULLET_COLOR = Color.GREEN;

    /**
     * 得点
     */
    private int score = 0;

    // インベーダーの設定
    /**
     * インベーダーの x 座標
     */
    private int invaderPointX = 0;
    /**
     * インベーダーの y 座標
     */
    private int invaderPointY = 0;
    /**
     *  インベーダーの移動方向
     */
    private int invaderMovingUnit = DIRECTION_RIGHT * INVADER_MOVING_UNIT; // (5)
    /**
     * インベーダーの表示色
     */
    private int invaderColor = INVADER_COLOR;

    // 砲台の設定
    /**
     * 砲台の x 座標
     */
    private int gunPointX;
    /**
     * 砲台の y 座標
     */
    private int gunPointY;

    // 弾の設定
    /**
     * 弾の x 座標
     */
    private int bulletPointX = NOT_VISIBLE; // 弾は最初は非表示
    /**
     * 弾の y 座標
     */
    private int bulletPointY = NOT_VISIBLE; // 弾は最初は非表示

    /**
     * 得点を表示するビュー
     */
    private TextView scoreView;

    public CanvasView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public CanvasView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CanvasView(Context context) {
        super(context);
        init();
    }

    /**
     * すべてのコンストラクターで共通の処理。
     */
    private void init() {
        score = 0; // 得点

        // インベーダーの設定
        invaderPointX = 0;
        invaderPointY = 0;
        invaderMovingUnit = DIRECTION_RIGHT * INVADER_MOVING_UNIT; 
                                                    // インベーダーの移動方向
        invaderColor = INVADER_COLOR;

        // 弾の設定
        bulletPointX = NOT_VISIBLE; // 弾は最初は非表示
        bulletPointY = NOT_VISIBLE; // 弾は最初は非表示

        System.out.printf("Canvas: (%d, %d)%n", getWidth(), getHeight()); // (6)
        System.out.printf("Invader: (%d, %d)%n", invaderPointX, invaderPointY);
        System.out.printf("Gun: (%d, %d)%n", gunPointX, gunPointY);
        System.out.printf("Bullet: (%d, %d)%n", bulletPointX, bulletPointY);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {    // (7)
        super.onSizeChanged(w, h, oldw, oldh);
        System.out.printf("onSizeChanged: (%d, %d)%n", w, h);

        // 砲台の設定
        gunPointX = (w - GUN_WIDTH) / 2;
        gunPointY = h - GUN_HEIGHT;

        System.out.printf("Gun: (%d, %d)%n", gunPointX, gunPointY);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 画面をクリアする
        clearScreen(canvas);

        // インベーダーを表示する
        drawInvader(canvas, invaderPointX, invaderPointY, invaderColor);
        invaderColor = INVADER_COLOR;

        // 弾を表示する
        drawBullet(canvas, bulletPointX, bulletPointY, BULLET_COLOR);

        // 砲台を表示する
        drawGun(canvas, gunPointX, gunPointY, GUN_COLOR);

        // インベーダーを指定方向に移動する
        invaderPointX = invaderPointX + invaderMovingUnit;

        // 左右の端にぶつかったら反転する
        if (isBorder(invaderPointX, INVADER_WIDTH)) {
            invaderMovingUnit = -invaderMovingUnit;
        }

        // 弾を移動する
        bulletPointY = bulletPointY - BULLET_MOVING_UNIT;

        // 弾が当たったら得点する
        if (isHit()) {
            score++;
            invaderColor = INVADER_HITL_COLOR;
            bulletPointX = NOT_VISIBLE; // 弾の表示を消す
            bulletPointY = NOT_VISIBLE; // 弾の表示を消す
            // 得点を表示する
            drawScore(score);
        }

        // 指定ミリ秒分ウエイトする
        try {
            Thread.sleep(DRAWING_INTERVAL);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: // 指をタッチした
            assert true; // 何もしない
            break;

        case MotionEvent.ACTION_MOVE: // 指を動かしている    // (8)
            moveGun((int) event.getX());
            break;

        case MotionEvent.ACTION_UP: // 指を離した    // (9)
            shot();
            break;

        default:
            assert true; // 何もしない
            break;
        }

        invalidate();

        return true;
    }

    /**
     * 端が当たったかどうかをを判断する。
     *
     * @return 当たったときは true
     */
    private boolean isHit() {
        return bulletPointY >= 0    // 弾が表示されている
              && (bulletPointY + BULLET_HEIGHT < invaderPointY + INVADER_HEIGHT)
              && (invaderPointX < bulletPointX)
              && (bulletPointX + BULLET_WIDTH < invaderPointX + INVADER_WIDTH); 
                                                                       // (10)
    }

    /**
     * 端かどうかを判断する。
     *
     * @param x
     *            X座標
     * @param width
     *            図形の幅
     * @return 端のときは true
     */
    private boolean isBorder(int x, int width) {
        return (x < 0) || (x > getWidth() - width);
    }

    /**
     * canvasをクリアする。
     */
    private void clearScreen(Canvas canvas) {
        invalidate();
    }

    /**
     * インベーダーを描画する。
     *
     * @param x
     *            X座標
     * @param y
     *            Y座標
     * @param color
     *            図形の色
     */
    private void drawInvader(Canvas canvas, int x, int y, int color) {
        Paint paint = new Paint();
        paint.setColor(color);
        drawImage(canvas, paint, x, y, INVADER_IMAGE);
    }

    /**
     * 弾を描画する。
     *
     * @param x
     *            X座標
     * @param y
     *            Y座標
     * @param color
     *            図形の色
     */
    private void drawBullet(Canvas canvas, int x, int y, int color) {
        Paint paint = new Paint();
        paint.setColor(color);
        drawImage(canvas, paint, x, y, BULLET_IMAGE);
    }

    /**
     * 砲台を描画する。
     *
     * @param x
     *            X座標
     * @param y
     *            Y座標
     * @param color
     *            図形の色
     */
    private void drawGun(Canvas canvas, int x, int y, int color) {
        Paint paint = new Paint();
        paint.setColor(color);
        drawImage(canvas, paint, x, y, GUN_IMAGE);
    }

    /**
     * 図形を描画する。
     *
     * @param x
     *            X座標
     * @param y
     *            Y座標
     * @param image
     *            図形を表現した2次元配列
     */
    private void drawImage(Canvas canvas, Paint paint, int x, int y,
            int[][] image) {
        if (x == NOT_VISIBLE || y == NOT_VISIBLE) {
            return;
        }

        for (int i = 0; i < image.length; i++) {
            for (int j = 0; j < image[0].length; j++) {
                if (image[i][j] == 1) {
                    canvas.drawRect(x + j * BLOCK_SIZE, y + i * BLOCK_SIZE, x
                            + j * BLOCK_SIZE + BLOCK_SIZE, y + i * BLOCK_SIZE
                            + BLOCK_SIZE, paint);    // (11)
                }
            }
        }
    }

    /**
     * スコアを表示する。
     *
     * @param score
     *            スコア
     */
    private void drawScore(int score) {
        assert scoreView != null;

        scoreView.setText(Integer.toString(score));
    }

    /**
     * 弾を発射する。
     */
    public void shot() {
        bulletPointX = gunPointX + (GUN_WIDTH - BULLET_WIDTH) / 2;
        bulletPointY = gunPointY;
    }

    /**
     * 砲台の位置をずらす。
     *
     * @param x
     *            位置
     */
    private void moveGun(int x) {
        gunPointX = Math.max(Math.min(x, getWidth() - GUN_WIDTH), 0);
    }

    /**
     * scoreView を取得する。
     * @return scoreView オブジェクト
     */
    public TextView getScoreView() {
        return scoreView;
    }

    /**
     * scoreView を設定する。
     * @param scoreView
     */
    public void setScoreView(TextView scoreView) {
        this.scoreView = scoreView;
    }

}
---

(1)(2)(11) 図形の描画

ドット絵のように、単位となる四角(ブロック)を決めて、それの組み合わせで描画する。

単位となる四角の大きさを 20 と決める。

    public static final int BLOCK_SIZE = 20; // (1)

図形イメージは、2次元配列で定義する。このブロックを描画するところが 1 に設定して
いる。

    public static final int[][] INVADER_IMAGE = { // インベーダーの図形イメージ
			{ 0, 0, 0, 1, 0, 1, 0, 0, 0 },
			{ 1, 0, 1, 1, 1, 1, 1, 0, 1 },
			{ 1, 1, 1, 0, 1, 0, 1, 1, 1 },
			{ 0, 0, 1, 1, 1, 1, 1, 0, 0 },
			{ 0, 0, 1, 1, 0, 1, 1, 0, 0 },
			{ 0, 0, 1, 0, 0, 0, 1, 0, 0 },
    };    // (2)

ブロックの2次元配列を使って、描画するのは、drawRect() を使う。左上の座標が 
(x, y) になっている。

    canvas.drawRect(x + j * BLOCK_SIZE, y + i * BLOCK_SIZE, x
            + j * BLOCK_SIZE + BLOCK_SIZE, y + i * BLOCK_SIZE
            + BLOCK_SIZE, paint);    // (11)


(3)(4) 図形の幅と高さ

描画する図形の幅と高さを、BLOCK_SIZE と、図形の2次元配列から算出する。

    public static final int INVADER_WIDTH = INVADER_IMAGE[0].length
            * BLOCK_SIZE; // インベーダーの描画幅    // (3)
    public static final int INVADER_HEIGHT = INVADER_IMAGE.length * BLOCK_SIZE;
                                            // インベーダーの描画高    // (4)



(5) インベーダーの移動単位

移動方向(DIRECTION_RIGHT) と、移動単位(INVADER_MOVING_UNIT) を使って決める。
インベーダーは、最初は画面左上から出現して、右方向に移動する。

    private int invaderMovingUnit = DIRECTION_RIGHT * INVADER_MOVING_UNIT; // (5)


(6)(7) キャンバスのサイズ

コンストラクターの中からなので、この時点では幅・高さともに 0 である。

    System.out.printf("Canvas: (%d, %d)%n", getWidth(), getHeight());    // (6)

キャンバスの実際の幅・高さは、このオブジェクトが生成されないとできない。このため、

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {    // (7)

をオーバーライドして設定する。onSizeChanged() メソッドは、View のサイズが変更さ
れたときに、呼び出されるメソッド。

この onSizeChanged() を利用して、砲台の初期位置を設定する。
砲台は、画面下部の中央に出るようにする。


(8) 指の動きにあわせて砲台を移動する

    case MotionEvent.ACTION_MOVE: // 指を動かしている    // (8)
        moveGun((int) event.getX());


(9) 指を離したら、弾を発射する

    case MotionEvent.ACTION_UP: // 指を離した    // (9)
        shot();


(10) インベーダー枠の中に弾の枠が入ったらあたったことにする

    return bulletPointY >= 0    // 弾が表示されている
        && (bulletPointY + BULLET_HEIGHT < invaderPointY + INVADER_HEIGHT)
        && (invaderPointX < bulletPointX)
        && (bulletPointX + BULLET_WIDTH < invaderPointX + INVADER_WIDTH); // (10)


▲ レイアウト

□ res/layout/main.xml
---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <jp.marunomaruno.android.invader.CanvasView
        android:id="@+id/canvasView"
        android:layout_width="match_parent"
        android:layout_height="400px" />

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/scoreTitle"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>

</LinearLayout>
---


▲ リソース

□ res/values/strings.xml
---
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">インベーダー</string>
    <string name="scoreTitle">"得点: "</string>
</resources>
---

                                                                            以上