2011年5月12日木曜日

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

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

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

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

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

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

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

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

コンストラクタの中身
/*動作維持用カウント変数*/
//初期状態は0
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;
}

//動作維持用カウント変数に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に0を代入
//カウント開始時の状態に戻る
count1=0;
//動作維持用のカウント変数に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;
}

//動作維持用カウント変数に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を設定しているクラスファイルで、配列にして呼び出し設定をすると完成する。

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

完成品



1 件のコメント:

  1. はじめまして。
    いつも参考にさせていただいております。
    Andoirdのゲーム開発の勉強をしているのですが、
    エフェクトの制御が思い通りにできず苦慮しております。
    よろしければ参考までにエフェクトの2ファイルのソースをみせていただけませんでしょうか。

    以下のアドレスまでメールをいただければ幸いです。
    naosan2012あっとgmail.com

    返信削除