canvasで画像を表示する

Question

前提・実現したいこと

現在2Dアクションゲームを作成しています。
今は障害物となるブロックを表示するためにマップクラスを作っています。
2次元配列でブロック画像を配置しようとしてるのですが、その途中で詰まってしまったので、アドバイスをいただきたいです。

本に記載されているプログラムを参考にしながら作成しています。
そのプログラムでは、2次元配列のそれぞれの要素にblockオブジェクトを作成し、それぞれに乱数でtypeとして0か1の値を渡しています。typeが0の時はグレーの正方形、typeが1の時はブラックの正方形を表示します。

私が実現したいことは、このブラックの正方形の代わりにブロックの画像を表示させることです。

該当のソースコード

/*
2次元配列を利用し、ランダムに黒、グレーの正方形を表示する
（本に記載されていた元のプログラムです）
*/
package com.example.test;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;

import java.util.Random;

public class Map1 {
    private final int blockSize;
    private int horizontalBlockCount;
    private int verticalBlockCount;

    private final Block[][] blockArray;

    public Map1(int width, int height, int blockSize){
        this.blockSize = blockSize;
        this.horizontalBlockCount = width / blockSize;
        this.verticalBlockCount = height / blockSize;

        blockArray = createMap(0);
    }

    private Block[][] createMap(int seed){
        Random rand = new Random(seed);

        Block[][] array = new Block[verticalBlockCount][horizontalBlockCount];

        for(int y=0; y < verticalBlockCount; y++){
            for(int x=0; x<horizontalBlockCount; x++){
                int type = rand.nextInt(2);
                int left = x * blockSize + 1;
                int top = y * blockSize + 1;
                int right = left + blockSize - 2;
                int bottom = top + blockSize - 2;
                array[y][x] = new Block(type, left, top, right, bottom);
            }
        }
        return array;
    }

    void draw (Canvas canvas){
        int yLength = blockArray.length;
        for(int y = 0; y < yLength; y++){
            int xLength = blockArray[y].length;
            for(int x= 0; x < xLength; x++){
                blockArray[y][x].draw(canvas);
            }
        }
    }

    static class Block{
        private static final int TYPE_FLOOR = 0;
        private static final int TYPE_WALL = 1;

        private static final int COLOR_FLOOR = Color.GRAY;
        private static final int COLOR_WALL = Color.BLACK;

        private final int type;
        private final Paint paint;

        final Rect rect;

        private Block(int type, int left, int top, int right, int bottom){
            this.type= type;
            paint = new Paint();


            switch(type){
                case TYPE_FLOOR:
                    paint.setColor(COLOR_FLOOR);
                    break;
                case TYPE_WALL://この部分を黒の正方形ではなく、ブロック画像に変えたい
                    paint.setColor(COLOR_WALL);
                    break;
            }
            rect = new Rect(left, top, right, bottom);
        }

        private void draw(Canvas canvas){
            canvas.drawRect(rect,paint);
            }
        }
    }

試したこと

以下のように、画像を読み込みtypeが1の時はcanvasに画像を追加するように変更しました。
しかし、画像は表示されず、黒のままでした。

package com.example.test;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;

import java.util.Random;

public class Map1 {
    private final int blockSize;
    private int horizontalBlockCount;
    private int verticalBlockCount;
    private static Bitmap blockBitmap;//追加


    private final Block[][] blockArray;

    public Map1(int width, int height, int blockSize, Bitmap blockBitmap){//変更
        this.blockSize = blockSize;
        this.horizontalBlockCount = width / blockSize;
        this.verticalBlockCount = height / blockSize;
        this.blockBitmap = blockBitmap;

        blockArray = createMap(0);
    }

    private Block[][] createMap(int seed){
        Random rand = new Random(seed);

        Block[][] array = new Block[verticalBlockCount][horizontalBlockCount];

        for(int y=0; y < verticalBlockCount; y++){
            for(int x=0; x<horizontalBlockCount; x++){
                int type = rand.nextInt(2);
                int left = x * blockSize + 1;
                int top = y * blockSize + 1;
                int right = left + blockSize - 2;
                int bottom = top + blockSize - 2;
                array[y][x] = new Block(type, left, top, right, bottom);
            }
        }
        return array;
    }

    void draw (Canvas canvas){
        int yLength = blockArray.length;
        for(int y = 0; y < yLength; y++){
            int xLength = blockArray[y].length;
            for(int x= 0; x < xLength; x++){
                blockArray[y][x].draw(canvas);
            }
        }
    }

    static class Block{
        private static final int TYPE_FLOOR = 0;
        private static final int TYPE_WALL = 1;

        private static final int COLOR_FLOOR = Color.GRAY;
        private static final int COLOR_WALL = Color.BLACK;

        private final int type;
        private final Paint paint;
        private final Canvas canvas;

        final Rect rect;

        private Block(int type, int left, int top, int right, int bottom){
            this.type= type;
            paint = new Paint();
            canvas = new Canvas();


            switch(type){
                case TYPE_FLOOR:
                    paint.setColor(COLOR_FLOOR);
                    break;
                case TYPE_WALL:
                    canvas.drawBitmap(blockBitmap,0,0, paint);//追加
                    break;
            }
            rect = new Rect(left, top, right, bottom);
        }

        private void draw(Canvas canvas){
            canvas.drawRect(rect,paint);
            }
        }
    }

drawメソッドは変更していないため、ここの記述に問題があると考えているのですが、どのように変えたら良いかわかりません。
ご教授お願い致します。

Answer 1

Block の表示は draw メソッドによって行われています.
draw メソッド内におきまして, type により drawRect か drawBitmap かを切り替えればよいのではないでしょうか.

Comments

[entd270]

ご回答ありがとうございます。
drawメソッド内を以下のように変更しました。

private void draw(Canvas canvas){
switch(type){
case TYPE_FLOOR:
canvas.drawRect(rect,paint);
break;
case TYPE_WALL:
canvas.drawBitmap(blockBitmap,0,0, paint);
break;
}
}

しかし、2次元の配列とは無関係に、画面の（0,0）の座標にブロック画像が1つ表示されるだけでした。
Blockクラス内でもcanvasに対してdrawBitmapしているので、その辺りが間違っていると思うのですが、いかがでしょうか。

[jimbe]

drawBitmap のドキュメントをお読みになっていらっしゃいますか.
各引数にはちゃんと意味があります. テキトウに書けば動作もテキトウになります.
座標に 0,0 を指定すれば画像を 0,0 に表示するのは仕様通りです.

元の正方形はなぜきちんと指定座標に表示されたのでしょうか.
drawRect のドキュメントには正方形の座標の指定の仕方が書かれています.
その為に Block のコンストラクタで準備もしています.
それらを流用して drawBitmap の座標の指定にする必要があるのではないでしょうか.

先に追加された Block のコンストラクタ内の drawBitmap は何の意味もありませんので, 削除されたほうが安全かと思います.
コンストラクタ内で生成している Canvas は draw メソッドの引数の Canvas とは無関係で, 表示になんの影響もありません.

[entd270]

ご回答ありがとうございます。
勝手に、それぞれのブロックの(0,0)座標が支点になると思い込んでしまっていました。
ご指摘の通り、下のようにleftとtopを支点にしたところ思い通りに表示されました。本当に助かりました。おっしゃる通り、ドキュメントはあまり読んだことがなく、適当に書いてしまっていたので、今後は読もうと思います。

private Block(int type, int left, int top, int right, int bottom){
this.type= type;
paint = new Paint();
this.left = left;
this.top = top;

switch(type){
case TYPE_FLOOR:
paint.setColor(COLOR_FLOOR);
break;
}
rect = new Rect(left, top, right, bottom);
}

private void draw(Canvas canvas){
switch(type){
case TYPE_FLOOR:
canvas.drawRect(rect,paint);
break;
case TYPE_WALL:
canvas.drawBitmap(blockBitmap,left,top, paint);
break;
}
}