追加したGameViewに、16マスのグリッドを描いてみます。
まず、サイズをどうしたら良いのか、迷いました。だって、端末によってサイズ違いますよね？何か、統一された座標系みたいなのがあるのかとも思うのですが、そもそも縦横比が違ったりもしますよね。
どうすんのさ、と思ったら、こちらのページに解答がありました。
- 描画は決まったサイズでしておく
- 端末の画面サイズに合わせて、Canvasサイズごと調整する
なるほど、そういうやり方なんですね。
てなわけで、安心して16マス描いてみます。調整はまた今度。
手順
まず、と言いつつ今回には直接関係無いのですが、GameViewの親クラスをViewからSurfaceViewに変えておきます。アニメーションをするためには、こっちの方が都合良いみたいなので。
import android.view.SurfaceView; // Viewから変更
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;
import android.graphics.Point;
public class GameView extends SurfaceView {
private Paint paint = new Paint();
あと、必要なので Color と Point クラスを追加しました。
で、いよいよマスを描いていきます。
まずは、背景を白で塗っておきます。
public GameView(Context context){
super(context);
setBackgroundColor(Color.WHITE);
}
あと、枠の原点と幅を定義しておきます。
private Point gridOrg = new Point(50,50); // 枠の原点
private int gridWidth = 680; // 枠の幅
枠を描きます。
@Override
public void onDraw(Canvas canvas){
// グリッド表示
paint.setAntiAlias(true); // 線が滑らかになる
paint.setStyle(Paint.Style.STROKE); // 塗りつぶしなし
paint.setStrokeWidth(4); // 線幅
// 外枠
canvas.drawRect(
gridOrg.x,
gridOrg.y,
gridOrg.x + gridWidth,
gridOrg.y + gridWidth,
paint);
// タイトル
paint.setTextSize(48);
canvas.drawText(
"15 Game",
gridOrg.x,
gridOrg.y + gridWidth + 100,
paint );
}
これで実行すると、こんな感じ。
いい感じです。
格子の部分も描いてみます。
// 格子
int oneWidth = gridWidth/4;
for( int i = 0; i < 4; i++ )
{
// 横
canvas.drawLine(
gridOrg.x,
gridOrg.y + oneWidth * i,
gridOrg.x + gridWidth,
gridOrg.y + oneWidth * i,
paint);
// 縦
canvas.drawLine(
gridOrg.x + oneWidth * i,
gridOrg.y,
gridOrg.x + oneWidth * i,
gridOrg.y + gridWidth,
paint);
}
うまくいきました。Java がCライクであってくれて、ホントに助かります。なんだか、楽しくなってきました。
次回は、コマを・・・、どうやって描いたらいいんだろう。。悩みながら、進めます。
ソースコード
以下に公開しています。ご参考まで。
https://github.com/et79/Game15
コメント