リバーシっぽいものを表示する

開発目標

このページの目標は、Viewを使ってリバーシっぽいものを表示することです。そのために画像を用意して表示します。これで雰囲気が出るはずです。

画像を用意する

お絵かきソフトでリバーシっぽい画像を作ります。これを使ってくれてもOKです。

*board.gif*
*black.gif*
*white.gif*
*light.gif*

画像は、[ res ]→[ drawable-hdpi ]の中に入れます。ここに入れた画像は、480pxでちょうどいっぱいに表示されます。その他の解像度でも適当にリサイズしてくれるので、[ drawable-ldpi ]とかは空でOKです。

フォルダ構成

[ HariboteReversi ]
    [ src ]
    [ gen ]
    [ Android 1.6 ]
    [ assets ]
    [ res ]
        [ drawable-hdpi ]
            black.gif
            board.gif
            icon.png
            light.gif
            white.gif
        [ drawable-ldpi ]
        [ drawable-mdpi ]
        [ layout ]
        [ values ]
    AndroidManifest.xml
    default.properties
    proguard.cfg

画像を読み込む

Viewに、用意した画像を読み込みます。

ReversiView.java

package com.hp3200.boco.reversi;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.MotionEvent;
import android.view.View;

class ReversiView extends View {
    //画像読み込み
    private Resources res = this.getContext().getResources();
    private final Bitmap IMG_BOARD = BitmapFactory.decodeResource(res, R.drawable.board);
    private final Bitmap IMG_BLACK = BitmapFactory.decodeResource(res, R.drawable.black);
    private final Bitmap IMG_WHITE = BitmapFactory.decodeResource(res, R.drawable.white);
    private final Bitmap IMG_LIGHT = BitmapFactory.decodeResource(res, R.drawable.light);
    
    public ReversiView(Context context) {
        super(context);
    }
    
    //描写処理
    @Override
    public void onDraw(Canvas c) {
    }
    
    //タッチ入力処理
    public boolean onTouchEvent(MotionEvent me) {
        return true;
    }
}

ゲーム画面を表示する

読み込んだ画像を使って、リバーシのゲーム画面を表示します。後のことを考えて、変数とか定数を作っておきます。

ReversiView.java

package com.hp3200.boco.reversi;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.View;

class ReversiView extends View {
    private Paint paint = new Paint();
    //画像読み込み
    private Resources res = this.getContext().getResources();
    private final Bitmap IMG_BOARD = BitmapFactory.decodeResource(res, R.drawable.board);
    private final Bitmap IMG_BLACK = BitmapFactory.decodeResource(res, R.drawable.black);
    private final Bitmap IMG_WHITE = BitmapFactory.decodeResource(res, R.drawable.white);
    private final Bitmap IMG_LIGHT = BitmapFactory.decodeResource(res, R.drawable.light);
    
    private final int PLAYER = 1;
    private final int COM = 2;
    
    private int[] board = new int[100];
    
    public ReversiView(Context context) {
        super(context);
    }
    
    //描写処理
    @Override
    public void onDraw(Canvas c) {
        int i;
        
        //ボードを表示
        c.drawBitmap(IMG_BOARD, 0, 0, paint);
        for(i=11;i<=88;i++) {
            if(board[i]==PLAYER) c.drawBitmap(IMG_BLACK, 48*(i%10), 48*(i/10), paint);
            if(board[i]==COM) c.drawBitmap(IMG_WHITE, 48*(i%10), 48*(i/10), paint);
        }
    }
    
    //タッチ入力処理
    public boolean onTouchEvent(MotionEvent me) {
        return true;
    }
}

ページを分ける

後のことを考えて、ViewのonDraw()とonTouchEvent()をswitch文でページ分けします。

ReversiView.java

package com.hp3200.boco.reversi;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.View;

class ReversiView extends View {
    private Paint paint = new Paint();
    //画像読み込み
    private Resources res = this.getContext().getResources();
    private final Bitmap IMG_BOARD = BitmapFactory.decodeResource(res, R.drawable.board);
    private final Bitmap IMG_BLACK = BitmapFactory.decodeResource(res, R.drawable.black);
    private final Bitmap IMG_WHITE = BitmapFactory.decodeResource(res, R.drawable.white);
    private final Bitmap IMG_LIGHT = BitmapFactory.decodeResource(res, R.drawable.light);
    
    private final int TITLE = 0;
    private final int PLAYER = 1;
    private final int COM = 2;
    private final int TURN = 3;
    private final int REVERS = 4;
    private final int CONTROL = 5;
    private final int PASS = 6;
    private final int RESULT = 7;
    
    private int[] board = new int[100];
    private int page = TITLE;
    
    public ReversiView(Context context) {
        super(context);
    }
    
    //描写処理
    @Override
    public void onDraw(Canvas c) {
        int i;
        
        //ボードを表示
        c.drawBitmap(IMG_BOARD, 0, 0, paint);
        for(i=11;i<=88;i++) {
            if(board[i]==PLAYER) c.drawBitmap(IMG_BLACK, 48*(i%10), 48*(i/10), paint);
            if(board[i]==COM) c.drawBitmap(IMG_WHITE, 48*(i%10), 48*(i/10), paint);
        }
        
        switch(page) {
        case TITLE:
            break;
        case TURN:
            break;
        case PLAYER:
            break;
        case COM:
            break;
        case REVERS:
            break;
        case CONTROL:
            break;
        case PASS:
            break;
        case RESULT:
            break;
        }
    }
    
    //タッチ入力処理
    public boolean onTouchEvent(MotionEvent me) {
        //タッチされた時
        if(me.getAction()==MotionEvent.ACTION_DOWN) {
            switch(page) {
            case TITLE:
                break;
            case PLAYER:
                break;
            case COM:
                break;
            case PASS:
                break;
            case RESULT:
                break;
            }
        }
        return true;
    }
}

開発結果

リバーシっぽいものが表示されるはずです。実行してみます。

リバーシっぽいものが表示されました。次回は、画面タッチで石が置けるようにします。