Beginning Android 2D Video Games

Android上で2Dゲーム作成を始めてみたい方へ

等速運動の表現

2Dゲームでは,画面上の物体の運動はすべてx座標とy座標で位置が決まる2次元の表現で表すことができます.
また,Androidゲームアプリを作成しようとする場合,SurfaceViewを継承したカスタムビューを作成することで,フレームアニメーション中でこの座標を書き換えて,描画対象物の位置を変化させます.

物体の運動は,運動方程式に従い,その移動に関しては,経過時間に対する距離(速さ)の公式で表すことが可能です.
これらの公式と座標面上の移動の様子を表したものが,下図のようになります.

f:id:hidenaoA:20130330233640p:plain

画面上の等速運動(実装例)

以下のコードでは,画面上に最大10個(メンバ変数nで規定)の円をdrawContents()メソッドの中で呼び出して表示しています.
円は画面タッチ毎に表示されるよう,onTouchEvent()メソッドでイベントを処理しています.
ここで描かれる円の中心座標をrun()メソッド中でフレーム毎にvelocity_yの要素である速さに従って書き換えることでY軸方向の等速運動を表現しています.

package jp.ac.bunkyo.a2dgames;

/**
 * 2Dゲームで等速で動く物体の描画を説明するActivity
 * @author Hidenao Abe (hidenao@shonan.bunkyo.ac.jp)
 */

/* Copyright 2013 Hidenao Abe (hidenao@shonan.bunkyo.ac.jp)

本ソースコードは,Apache License Version 2.0(「本ライセンス」)に基づいてライセンスされます。あなたがこのファイルを使用するためには、本ライセンスに従わなければなりません。本ライセンスのコピーは下記の場所から入手できます。
http://www.apache.org/licenses/LICENSE-2.0
適用される法律または書面での同意によって命じられない限り、本ライセンスに基づいて頒布されるソフトウェアは、明示黙示を問わず、いかなる保証も条件もなしに「現状のまま」頒布されます。本ライセンスでの権利と制限を規定した文言については、本ライセンスを参照してください。
(この日本語訳は,http://sourceforge.jp/projects/opensource/wiki/licenses%2FApache_License_2.0によるものです)
*/

import java.util.Random;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.Window;
import android.view.WindowManager;

public class MotionUni extends Activity {

	MUView m_view;

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		//Activityをフルスクリーン表示にする
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);

		super.onCreate(savedInstanceState);
		//setContentView(R.layout.activity_motion_uni);

		m_view = new MUView(this);
		setContentView(m_view);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.motion_uni, menu);
		return true;
	}

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        super.onOptionsItemSelected(item);
        switch(item.getItemId()){//itemを表示するため,res/menu/*.xmlにItem要素を追加すること
        case R.id.menu_finishing :
            //強制的にActivityを終了する
        	finish();
            return true;
        }
        return false;
    }

    @Override
    protected void onPause(){
    	super.onPause();
    	m_view.pause();

    	if(isFinishing()){
    		m_view.finish();
    	}
    }

    @Override
    protected void onResume(){ //Activityの開始・再開処理
    	super.onResume();
    	m_view.resume(); //スレッドの開始処理はActivityの開始・再開に合わせて実行する
    }

    @Override
    protected void onStop(){
    	super.onStop();
    	m_view.finish();
    	Thread.interrupted();
    }



    //高速なアニメーションなどに対応したSurfaceViewを継承したカスタムViewを作成
    class MUView extends SurfaceView implements Runnable, SurfaceHolder.Callback{

    	Paint paint; //Viewの持つCanvasへの描画機能(以下で紹介するのはごく一部)
    	Random rand; //乱数発生器
    	int screen_width, screen_height;

    	int bgColor=Color.WHITE;
    	Canvas canvas;
    	SurfaceHolder s_holder;

    	Thread renderThread;

    	Context pContext;

    	volatile boolean isRunning=false; //スレッドの実行制御を行うための変数

    	// 描画対象を管理するメンバ変数
    	int n=10; //任意数の描画対象を管理するには,配列ではなくListなどを利用する(ただし,アクセサ(set/get)は利用しないほうが良いとされる)
       	boolean[] isVisible = new boolean[n]; //描画範囲にあるかどうかかを判定する
    	int[] x = new int[n];       //描画位置のX座標
    	int[] y = new int[n];       //描画位置のY座標
    	int[] radial = new int[n];  //描画する円の半径
    	int[] velocity = new int[n];//描画する円の移動速度(任意数のピクセル/10msecを速度とする)


		public MUView(Context context) {
			super(context);

			pContext=context;

    		paint = new Paint();
    		rand = new Random();

    		for(int i=0; i<n; i++){
    			isVisible[i] = false;
    		}

       		s_holder = getHolder();

		}

		public void run(){ //ゲームロジック,描画位置を別スレッドで計算

			long prev = System.currentTimeMillis();
			long duration = 0;

			while(isRunning){

				if(! s_holder.getSurface().isValid()){ continue; }

				canvas = s_holder.lockCanvas();
				long loop_start = System.currentTimeMillis();

				if(canvas != null){

					drawContents(); //描画を実行

					//座標の更新(ゲームなら,描画前後でゲームロジック(のメソッド群)を実装)
					for(int i=0; i<n; i++){
						if(isVisible[i]){
							long now = System.currentTimeMillis();
							//y[i] = y[i] + velocity[i]/((int)(now-start)+1);
							y[i] = y[i] + velocity[i]*(int)((now - prev)+1)/100; //1/100倍速に
							if(y[i] > screen_height){ isVisible[i] = false; }
						}
					}


					s_holder.unlockCanvasAndPost(canvas);

					duration = loop_start - System.currentTimeMillis();
					prev = System.currentTimeMillis();

				}

	    		try{
	    			Thread.sleep(100 - duration);//次の描画まで100msecの間隔を空ける
	    			                  //(フレームレートを厳守するのであれば,sleepさせるのではなく,描画処理を一定間隔で呼び出すようにする)
	    		}catch(InterruptedException e){

	    		}



			}

		}

    	public void drawContents(){//描画を担当するメソッド

    		canvas.drawColor(bgColor); //キャンバスをbgColorで指定した色で塗りつぶす

    		screen_width=canvas.getWidth();
    		screen_height=canvas.getHeight();

    		//円の描画
    		paint.setStyle(Style.FILL); //塗りつぶし
    		paint.setColor(Color.BLUE); //色を指定
    		for(int i=0; i<n; i++){
    			if(isVisible[i]){
    				canvas.drawCircle(x[i],y[i],radial[i], //中心の座標(x, y),半径
    	    				paint);
    			}
    		}

    	}

		public void pause(){ //中断処理
	        isRunning = false;

	        //必要であれば,ゲームデータなどの一時保存を行う

	        while(true){
	        	try {
	        		renderThread.join();
	        		break;
	        	} catch (InterruptedException e) {
	        		Thread.currentThread().interrupt();
	        	}
	        }

		}

		public void finish(){ //終了処理メソッド
			synchronized (renderThread) {
	        	isRunning = false;
	        }

	        try {
	            renderThread.join();
	        } catch (InterruptedException e) {
	            Thread.currentThread().interrupt();
	        }

	        ((Activity)pContext).finish(); //Context経由でActivityを終了

		}

		public void resume(){
			isRunning = true;

			renderThread = new Thread(this);
			renderThread.start();
		}

		public boolean onTouchEvent(MotionEvent event) { //SurfaceViewにおいて画面タッチイベントを処理
			switch(event.getAction()){
			case MotionEvent.ACTION_DOWN: //指が画面に触れたとき
				for(int i=0; i<n; i++){
					if(isVisible[i] == false){
						isVisible[i] = true;
						x[i] = rand.nextInt(screen_width); //ランダムなX座標から描画を開始させる
						y[i] = 0;
						radial[i] = rand.nextInt(20)+1;
						velocity[i] = rand.nextInt(5)+1; //50~99までの任意数のピクセル/1msecを速度とする
						break;
					}
				}
				break;

			}
			return true;
		}

		@Override
		public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2,
				int arg3) {
			// TODO 自動生成されたメソッド・スタブ

		}

		@Override
		public void surfaceCreated(SurfaceHolder arg0) {

		}

		@Override
		public void surfaceDestroyed(SurfaceHolder arg0) {
			// TODO 自動生成されたメソッド・スタブ
			finish();

		}

    }


}

以下に実行画面を示します.
それぞれの円は画面下向きに動いていますが,タッチイベント処理時にランダムに指定した速さで運動していますので,落下運動では無く,「摩擦の無い平面上を滑らかに運動している」状態となります.

f:id:hidenaoA:20130330233641p:plain