2Byte研究所: Androidのタッチイベントを使ってアニメーションを動作させる

画面をタッチしたらアニメーションを動作させる。

アニメーションは、前回爆発エフェクトを作ったので、今回は、タッチしたら雷エフェクトを
表示させてみようと思う。

雷画像は、拡張子がpngの画像で、ゲームとかで使えそうな画像を用意して、動作させた。

作る時に注意することは、タッチしてアニメーションを動作させてる最中にもう一回タッチしても、
前回タッチした分のアニメーションが消えないようにすること。
（動作を維持させる）
それから、タッチイベントにはスライドさせる動作もあるので、その時に連続して表示させる
仕組みを作り、且つ、動作を維持させる。

①アニメーションを維持させる
アニメーションを維持させる仕組みとして、今回試してみた方法は、タッチしたときにフラグを
trueにしてフラグがtrueの時に変数に１代入する。変数に１が入っている時に、
画像を枚数分だけカウントをインクリメントし、そして、描画用のフラグ変数をtrueにして、
カウントの値と画像の枚数が一致（最後の枚数まで回った時）した場合、描画用の
フラグ変数をfalseにする。

これによって、最初にタッチして表示されたアニメーションが、次にタッチして時に消えることなく
最後まで、表示し続けることになる。

設定したコードは
変数の設定
//動作維持用のカウント変数
private int count0
//画像出力用のカウント変数
private int count1
//描画用のフラグ変数
private boolean flg1
//タッチしたときのフラグ変数
private boolean flg2
//カウントをリセットするためのフラグ変数
private boolean flg3;

コンストラクタの中身
/*動作維持用カウント変数*/
//初期状態は０
count0=0;

/*一応count変数の初期化*/
count1=NUM_IMAGES;

/*画像出力用のフラグ変数*/
flg1=false;

/*フラグの初期化*/
flg2=false;
flg3=false;

描画用メソッドの中身
/**
* 描画
* @param canvas
*/
public void draw(Canvas canvas) {
/*画像の出力*/
//flg1がtrueの場合
//カウントしたぶんだけ出力する
if(flg1==true) {
canvas.drawBitmap(img[count1],x,y,null);
}

動作を維持させる為のメソッドとアニメーションで表示させる画像をカウントするためのメソッド
/**
* カウントをするメソッド
*/
public void count_Up() {
//タッチしている時
if(flg2==true) {

//動作維持用のカウント変数に
//1を代入
count0=1;
}

//動作維持用カウント変数に１が入っていたら
if(count0==1) {
//アニメーションカウント変数を回す
count1++;
//描画フラグをtrueにする
flg1=true;
}

//count1とNUM_IMAGESが同じになったら
if(count1==NUM_IMAGES) {
//flg1をfalse
//flg1をfalseにして、countのインクリメントを止める
flg1=false;
//flg3をtrue
//flg3をtrueにして、リセットの準備態勢に入る
flg3=true;
}

}

カウントをリセットするのとフラグを初期化するメソッド
/**
* カウントをリセットする
*/
public void reset_Count() {
//flg3がtrueの時に
if(flg3==true) {
//count1に０を代入
//カウント開始時の状態に戻る
count1=0;
//動作維持用のカウント変数に０を入れる
count0=0;

//フラグを初期状態にする
flg1=false;
flg3=false;
}
}

②連続して表示させる
タッチイベントで画面をスライドしたらアニメーション画像が連続して表示させる。
大まかな流れは
画像を保管する場所を作る
↓
画面がタッチされたら
↓
保管場所からタッチした座標値にセットする
↓
アニメーションが表示される
↓
画像の枚数分表示される
↓
保管場所に戻る

と、言う流れになる。

保管場所の作成
保管場所はPointクラスを使用する
こんな感じ
private static final Point point=new Point(-100,-100);
ポイントの位置はは画面から見えない座標値に設定

コンストラクタの中身
タッチした場所にセットする
こんな感じ
x=point.x;
y=point.y;

描画メソッドの中身
保管している場所に有る場合は抜けるように設定しておく
/**
* 描画
* @param canvas
*/
public void draw(Canvas canvas) {
if(isStorage())
return;
/*画像の出力*/
//flg1がtrueの場合
//カウントしたぶんだけ出力する
if(flg1==true) {
canvas.drawBitmap(img[count1],x,y,null);
}

アニメーション画像の枚数分まで行ったら、保管している場所に移動させる
/**
* カウントをするメソッド
*/
public void count_Up() {
//タッチしている時
if(flg2==true) {

//動作維持用のカウント変数に
//1を代入
count0=1;
}

//動作維持用カウント変数に１が入っていたら
if(count0==1) {
//アニメーションカウント変数を回す
count1++;
//描画フラグをtrueにする
flg1=true;
}

//count1とNUM_IMAGESが同じになったら
if(count1==NUM_IMAGES) {
//flg1をfalse
//flg1をfalseにして、countのインクリメントを止める
flg1=false;
//flg3をtrue
//flg3をtrueにして、リセットの準備態勢に入る
flg3=true;
//保管場所に移動
point();
}

}

これらで使用する為に作ったメソッド
/**
* アニメーションが終了したら
* 保管庫に移動
*/
public void point() {
x=point.x;
y=point.y;
}

/**
* 保管庫の有無
*
* 有る場合
* @return true
*
* 無い場合
* @return false
*/
public boolean isStorage() {
if(x==point.x&&y==point.y) {
return true;
}
return false;
}

連続して表示されるためには、これだけでは出来ない。
SurfaceViewを設定しているクラスファイルで、配列にして呼び出し設定をすると完成する。

その他、タッチイベント関連

タッチイベントで文字を書いたり絵を描く

タッチした方向に描画した円を発射する

タッチした方向に描画した円を発射する。その２

Androidでゲーム　ブロック崩し編　３回目：板画像のタッチ操作

Androidでゲーム　ブロック崩し編　４回目：タッチ操作が出来る範囲と出来ない範囲を作る

タッチイベントを使って、画像を回転させる
ランダムクラスを使って色の変更を行う

爆発エフェクト
Androidでゲームシューティングゲームっぽい物。その４：弾と敵が衝突したら、爆発エフェクトを動作させる

完成品