SurfaceViewとCanvasで画面サイズに合わせて描画する方法 [Android]

SurfaceViewを使ってゲームを作った時に使った画面サイズに合わせて描画する方法をメモしておきます。

Androidでは様々な画面サイズの端末が存在するため、ゲームなどでの描画処理に一工夫が必要です。

まず、Canvas.scaleを使って画面サイズに合わせて全体を拡大縮小します。

これだけでは画面の左上に偏るので、画面の中心に描画されるようにcanvasを移動させます。

移動にはCanvas.translateを使います。

使用する関数
Canvas.scale(x方向の倍率, y方向の倍率)
Canvas.translate(x方向の移動量, y方向の移動量);

コード例

/** 最初にゲーム内の画面サイズを決めておく **/
final float VIEW_WIDTH = 600
final float VIEW_HEIGHT = 900;

決めた画面サイズをもとに倍率を計算します。縦横比が異なる場合は小さい方に合わせます。

/** SurfaceCreatedに記述 **/
float scaleX = getWidth() / VIEW_WIDTH;
float scaleY = getHeight() /  VIEW_HEIGHT;
scale = scaleX > scaleY ? scaleY : scaleX;
// onCreate内ではgetWidth()が0を返すので上手くいかない。

この倍率から、拡大・縮小して描画します。

/** 描画部分で記述 **/
Canvas c = holder.lockCanvas();
c.translate(getWidth() - VIEW_WIDTH)/2*scale, (getHeight() - VIEW_HEIGHT)/2*scale); // 画面の中央になるように移動させる
c.scale(scale, scale); // 端末の画面に合わせて拡大・縮小する

// 描画処理

holder.unlockCanvasAndPost(c);

また、ゲームを作る場合は、これだけではゲームのタッチ入力を取得するときに問題が起きます。

タッチ入力の座標は拡大・縮小されないため、ここにズレが生じるからです。

そこで、タッチ入力の座標に関しても倍率を使って調整する必要があります。

/** (例) イベント部分で記述 **/
public boolean onTouch(View v, MotionEvent event) {
		touchedX = event.getX() / scale;
		touchedY = event.getY() / scale;
}