太鼓アプリの作成

開発するアプリ

開発で必要な素材

太鼓の画像

太鼓の音 taiko.wav

新規プロジェクトの立ち上げ

TaikoAppというプロジェクト名のアプリを作成する。

taiko.pngをres/drawableに、pon.wavをres/rawにコピーする。

MainActivity.java

package com.gclue.taicoapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // TaikoViewのインスタンス化.
        TaikoView mTaikoView = new TaikoView(this);

        // TaikoViewを画面に設定.
        setContentView(mTaikoView);
    }


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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        /*
        Handle action bar item clicks here. The action bar will
        automatically handle clicks on the Home/Up button, so long
        as you specify a parent activity in AndroidManifest.xml.
        */
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

TaikoView.java

package com.gclue.taicoapp;

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

/**
 * 太鼓の画像を表示するView.
 */
class TaikoView extends View {

    /** 太鼓画像データを保持する. */
    private Bitmap mTaikoImage;

    /** 太鼓画像の原点（左上）のx座標を保持する. */
    private int mTaikoX = 100;

    /** 太鼓画像の原点（左上）のy座標を保持する. */
    private int mTaikoY = 50;

    /**
     * コンストラクタ.
     * @param context コンテキスト
     */
    public TaikoView( Context context ) {
        super(context);

        // イベント取得できるようにFocusを有効にする.
        setFocusable( true );

        // Resourceインスタンスの生成.
        Resources res = this.getContext().getResources();

        // 画像の読み込み（/res/drawable/taiko.png）.
        mTaikoImage = BitmapFactory.decodeResource(res, R.drawable.taiko);
    }

    /**
     * 描画処理.
     */
    @Override
    protected void onDraw( Canvas canvas ) {

        // 背景色を設定する.
        canvas.drawColor( Color.BLACK );

        // Bitmapイメージの描画.
        Paint mPaint = new Paint();
        canvas.drawBitmap( mTaikoImage, mTaikoX, mTaikoY, mPaint );
    }
}

あたり判定

太鼓の中心点を求める数式

int mCenterX = mTaikoX + mTaikoImage.getWidth()/2;
int mCenterY = mTaikoY + mTaikoImage.getHeight()/2;

半径Rを求める数式

int mTaikoR = taikoImage.getWidth() / 2;

太鼓の中心点とタッチした座標の距離を求める数式

double distance = Math.sqrt( Math.pow( (mCenterX - mTouchX), 2 ) + Math.pow( (mCenterY - mTouchY), 2 ));

太鼓に手があたっていない場合の条件

太鼓に手があたっている場合の条件

あたり判定の実装

TaikoView.java

package com.gclue.taicoapp;

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

/**
 * 太鼓の画像を表示するView.
 */
class TaikoView extends View {

    /** 太鼓画像データを保持する. */
    private Bitmap mTaikoImage;

    /** 太鼓画像の原点（左上）のx座標を保持する. */
    private int mTaikoX = 100;

    /** 太鼓画像の原点（左上）のy座標を保持する. */
    private int mTaikoY = 50;

    /** サウンド再生データを保持する. */
    private MediaPlayer mMediaPlayer;

    /**
     * コンストラクタ.
     * @param context コンテキスト
     */
    public TaikoView( Context context ) {
        super(context);

        // イベント取得できるようにFocusを有効にする.
        setFocusable( true );

        // Resourceインスタンスの生成.
        Resources res = this.getContext().getResources();

        // 画像の読み込み（/res/drawable-hdpi/taiko.png）.
        mTaikoImage = BitmapFactory.decodeResource(res, R.drawable.taiko);

        // サウンドデータを読み込む(/res/raw/pon.mp3)
        mMediaPlayer = MediaPlayer.create( context, R.raw.taiko );
    }

    /**
     * 描画処理.
     */
    @Override
    protected void onDraw( Canvas canvas ) {

        // 背景色を設定する.
        canvas.drawColor( Color.BLACK );

        // Bitmapイメージの描画.
        Paint mPaint = new Paint();
        canvas.drawBitmap( mTaikoImage, mTaikoX, mTaikoY, mPaint );
    }

    /**
     * タッチイベント.
     *
     * @param event モーションイベント
     */
    @Override
    public boolean onTouchEvent( MotionEvent event ) {

        // 指が押された場合の処理.
        if ( event.getAction() == MotionEvent.ACTION_DOWN ) {

            // 指がタッチされたx,y座標の取得.
            int mTouchX = (int) event.getX();
            int mTouchY = (int) event.getY();

            // 太鼓の中心座標を計算
            int mCenterX = mTaikoX + mTaikoImage.getWidth()/2;
            int mCenterY = mTaikoY + mTaikoImage.getHeight()/2;

            // 太鼓の中心座標と指の距離を計算
            double mDistance = Math.sqrt(Math.pow( (mCenterX - mTouchX),2)+ Math.pow( (mCenterY - mTouchY),2));

            // 太鼓画像の半径
            int mTaikoR = mTaikoImage.getWidth()/2;

            // あたり判定
            if ( mDistance < mTaikoR ) {
                // サウンド再生
                mMediaPlayer.start();
            }
        }

        return true;
    }
}