カジュアルゲームを作ろう！５

ゲームの一番重要な要素、絵の描画を解説します。

前回カジュアルゲームを作ろう！４でもソースファイル中に出てきていますがこのページで改めて解説します。

絵の描画は以下の４ステップです。

絵の名前を宣言(Bitmapクラスのオブジェクト)
絵のある場所を指定
１の絵の指定
描画

ゲームの場合、最後の４を繰り返すことになります。ではソースファイルで各ステップを見ていきましょう。

実際のソースファイルでは複雑なので説明のため背景に絞っています。


public class TamaireView extends View {

    // ステップ１　絵の名前の宣言
    //絵の入れ物を用意します。プログラムが動作している間常に保持しないとなりませんのでメソッドの外で宣言します。
    //このゲームの中では常に背景は変わらず一つしか存在しません。staticで宣言します。
    //描画するオブジェクトはBitmap型です。準備する絵の数だけ必要です。
    static private Bitmap imageBackGround;

    //コンストラクタです。ここで描画する絵の準備をします。
    TamaireView(Context context){
        super(context);
        // ステップ２　絵のある場所の指定　絵はプロジェクトのdrawableにpng形式で保存しておきます。
        // 絵の数によらず、絵の読み込みをするクラスで共通で使用します。
        Resources resources = this.getContext().getResources();

        // ステップ３　絵の指定
        // ステップ１で用意したimageBackGroundにステップ２で指定したresourcesの絵backgroundを指定します。
        // 用意する絵の数だけ必要です。
        imageBackGround = BitmapFactory.decodeResource(resources, R.drawable.background);

    }

    //カジュアルゲームを作ろう！３で説明していますがこのonDrawが一定周期で呼び出されます。
    @Override
    public void onDraw(Canvas canvas) {

    //背景を描画　第一引数はステップ１〜３で用意した絵です。第２，第３引数で座標を指定します。第４引数は透明化などオプションです。ここではnullで構いません。
    canvas.drawBitmap(imageBackGround,(int)(this.getWidth()/2-imageBackGround.getWidth()/2),
                                      (int)(this.getHeight()/2 - imageBackGround.getHeight()/2),null);
    }
}

Androidでは座標は左上が原点で(0,0)です。

絵の描画も絵の左上の頂点の座標を指定します。

機種ごとに解像度が異なるので画面サイズぴったりの絵を準備することはできないので①画面サイズの1/2だけオフセットし、②絵のサイズの1/2だけ戻します。イメージは下図のようになります。X方向だけ説明していますがY方向も同様です。

ここが


this.getWidth()/2-imageBackGround.getWidth()/2

this.getHeight()/2 - imageBackGround.getHeight()/2

の部分です。

ゲームは絵の中心で扱ったほうが楽になります。