ラベル Android タッチイベント 描画 の投稿を表示しています。 すべての投稿を表示
ラベル Android タッチイベント 描画 の投稿を表示しています。 すべての投稿を表示

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を設定しているクラスファイルで、配列にして呼び出し設定をすると完成する。

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

完成品



2011年5月11日水曜日

ランダムクラスを使って色の変更を行う

ランダム処理を使って色の変更を行う。

ただ色の変更を行っても面白くないので、画面にタッチしながら色の変更をする仕組みを作る。

色の変更について。
ランダムクラスを使って色の変更をする仕組み。

Androidの色の描画は、PaintクラスのsetColor()メソッドで指定する。
このsetColor()メソッドの引数の中身にColorクラスを入れて、Colorクラスの
色の定義がされているメソッドやrgb()メソッド、又はargb()メソッドで数字を指定して
使用する方法があるが今回の場合は、rgb()メソッドを使用して作る。

rgb(int red,int green,int blue)メソッドの引数は、int型の数字を使用して色を設定する。
Androidの色の数字は、赤、緑、青ともに0~255の数字が当てられている。

この数字をランダムクラスに使用する。

ランダムクラスの設定
上記の色の数字を入れるのではなく、0~255なので、0番~255番の色が
あるという考え方になるので、256個あるということになる。

ランダムクラスのnextInt(int n)メソッドを使用し、この引数に256と言う数字を
入れることによって、ランダムに0番~255番の色が出力される。

作り方
まず、色の変更のみの場合

int型の変数
nextInt()メソッドで得た値を代入し、rgb()メソッドで使用する
private int red,green,blue;

ランダムクラスのインスタンス変数
private Random random;

コンストラクタの中身
ランダムのインスタンスの作成
random=new Random();

色を変更させるメソッドの作成
public void changeColor() {
この中でnextInt()メソッドを使う
//red
red=random.nextInt(256);
//green
green=random.nextInt(256);
//blue
blue=nextInt(256);
}

描画設定
public void draw(Canvas canvas) {
//色の設定
//changeColor()メソッドで記述したコードのred,green,blueを
//rgb()メソッドの引数に当てる
Paint paint=new Paint();
paint.setColor(Color.rgb(rec,green,blue));

//画面の色を変えるだけ
paint.setStyle(Paint.Style.Fill);
Rect rect=new Rect(0,0,getWidth(),getHeight);
canvas.drawRect(rect,paint);
}

SurfaceViewを使用しているので、
runメソッドの中身に上記で記述したdrwa()メソッドを呼び出す。
public void run() {
Canvas canvas;
while(thread!=null) {
//ダブルバッファリングのロック処理
canvas=holder.lockCanvas();
//色番号の変更
changeColor();
//描画
draw(canvas);
//ダブルバッファリングのアンロック処理
holder.unlockCanvasAndPost(canvas);
try {
Thread.sleep(30);
}catch(InterruptedException e) {
e.printStackTrace();
}
}
}

これで、取り合えず、画面全部の色がランダムに変わる。

タッチイベントを使って作る
今度は、タッチして何か落書きをしながら色をランダムに変える仕組みを作る。

タッチイベントで文字を書いたり絵を描いたりする設定については割愛する。
変更するのは、changeColor()メソッドをタッチイベントのメソッドの中に記述すること、それから、
Paint paint=new Paint();
paint.setColor(Color.rgb(rec,green,blue));
をfor(int i=0;i<draw.size();i++) {}
のブロック内に記述する事の2つ。
※上記で作った画面全体を使って色の変更を設定したRectクラスと、
drawRect()は削除しておく。
(タッチイベントで描画する方法はタッチイベントで文字を書いたり絵を描いたりするを参照)

これで、描画している最中に色が変化するようになる。
が、今回の設定だと描画している最中に前に描画した色まで変化する。

Android reference クラス:Color・・・メソッド:rgb(int red, int green, int blue)
Android reference クラス:Random・・・メソッド:nextInt(int n)
Android reference クラス:Paint・・・メソッド:setColor(int color)

その他、ランダム設定関連
Androidでゲーム シューティングゲームっぽい物。その2:敵1体をランダムに出現させる

その他、タッチイベント関連
タッチイベントで文字を書いたり絵を描く
タッチした方向に描画した円を発射する
タッチした方向に描画した円を発射する。その2
Androidでゲーム ブロック崩し編 3回目:板画像のタッチ操作
Androidでゲーム ブロック崩し編 4回目:タッチ操作が出来る範囲と出来ない範囲を作る
タッチイベントを使って、画像を回転させる
Androidのタッチイベントを使ってアニメーションを動作させる
完成品

2011年5月5日木曜日

タッチイベントを使って、画像を回転させる

Androidの画像を回転させる方法には、RotateAnimationクラスを使用する方法や、canvasクラスを使用する方法などがあるが、今回のタッチイベントを使って画像を回転させるのは、canvasクラスのrotateメソッドを使用して回転させる。


タッチイベントのMotionEvent.ACTION_MOVEで、回転させる時の角度を計算する。
こんな感じ
double rotate

touchX=event.getX();
touchY=event.getY();

rotate+=Math.atan2(touchY-getHeight/2,touchX-getWidth()/2);

そして、このrotateをcanvasクラスで呼び出したrotateメソッドの引数にて使用する。

canvas.rotate((int)rotate,getWidth()/2,getHeight()/2);

この、rotateメソッドの引数は
引数(角度,回転軸のX、回転軸のY)

画像の回転で注意しなくてはいけないのは、画像が回転しているのでは無く、canvasそのものが回転している、という事で、javaの時のGraphics2Dの時と同じ。

なので、画像の中心で回転しているように見せるには、rotateメソッドの引数の回転軸XとYそれぞれ
画面の幅と高さをそれぞれ1/2したものを入れている。



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

2011年5月4日水曜日

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

前回作った物をちょっと改良して、物理的な要素を加え、自由落下運動っぽいことをして
画面下に来たら反発して、ボールのような動きをやってみようと思う。





















自由落下運動とは
重力だけを受けている物体が初速0で真下に落下する運動

落下する物体の運動は等加速度直線運動で、落下しながらスピードを増していく。

今回、画面下に来たら、反発して図のような動きをさせてみる。

自由落下に必要な計算は、
vy+=g*t






















座標上、下向きに動作する場合は、Y座標なので、y方向に重力を加え、また、これに等加速度運動を入れるので、時間を掛けてあげる。

そして、反発係数をいれる。
反発係数は、画面の右端、左端、画面下側に描画した円が来た時、vx,vyにそれぞれ、0.9を掛けている。
vx*=0.9;
vy*=0.9;

画面の端に来たときの処理は、こんな感じ

        if(x<0) {
        x=0;
          //移動方向を反転
        vx*=-1;
        vx *=0.9;
        }

        if(x>panel.getWidth()-r) {
        x=panel.getWidth()-r;
        //移動方向を反転
     vx*=-1;
        vx *=0.9;
        }

        if(y<0) {
        y=0;
        //移動方向を反転
     vy*=-1;
        vy *=0.9;
        }

        if(y>panel.getHeight()-r) {
        y=panel.getHeight()-r;
        //移動方向を反転
     vy*=-1;
        vy *=0.9;
        }




その他のタッチイベント関連
タッチイベントを使って、画像を回転させる
タッチイベントで文字を書いたり絵を描く
タッチした方向に描画した円を発射する
Androidでゲーム ブロック崩し編 3回目:板画像のタッチ操作
Androidでゲーム ブロック崩し編 4回目:タッチ操作が出来る範囲と出来ない範囲を作る
ランダムクラスを使って色の変更を行う
Androidのタッチイベントを使ってアニメーションを動作させる

2011年5月3日火曜日

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

Androidのタッチした方向に描画した円を発射するには、発射されるスタートの座標値から
タッチした座標値を求める。
















①スタートの座標値から、タッチした座標値の角度を考える
この場合の角度を求めるには、アークタンジェントを使う。

このアークタンジェントを求めるには、Mathクラスのatan2(double y,double x)を使用する。
これに当てはめると
double angle=Math.atan2(発射位置のy-タッチした位置のy,発射位置のx-タッチした位置のx)となる。

この、atan2()メソッドは極座標に変換するするもの。













②今度は速度を求める。
角度を求めたので、今度は求めた角度を使って速度を求める。
この速度を求めるには、タッチした座標値と発射する座標値をxとyそれぞれ分けて、
それに運動量を掛けると求められる。
この考え方はベクトルの分解と言う考え方を使う。

そうすると
double 速度x=Math.cos(angle)*運動量
double 速度y=Math.sin(angle)*運動量

から、速度を求めることが可能となる。















あとは、タッチイベントの処理メソッド内で発射する座標値とタッチする座標値を
Pointクラスを使用してそれぞれ求めることで発射することが出来る。

JavaTM Platform Mathクラスのatan2メソッド
Android Reference Mathクラスのatan2メソッド


2011年5月1日日曜日

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

タッチイベントを使って、画面を指でなぞったら字が書けたり絵が描けたりする。

SurfaceViewを使って作ってみる。

内容は、画面をなぞったら描画できるだけに限定し、他の設定は行わない。
(他の設定:保存したら画面に描画した物を消したりする)

まず、座標の位置を保管する方法を考える。

座標の位置を保管する物を作る。
使用するのは、ArrayList。

JavaのArrayList<E>クラスは、サイズが拡張可能な配列型データ構造

ArrayListの使い方
ArrayListクラスは大きさが決まっていない配列。
ArrayListを使うには、まずArraListクラスのオブジェクトを作成する。
デフォルトは初期容量 10 で空のリストを作成。
大きさは変更可能、サイズは足りなくなれば自動的に拡張される。

J2SE5.0以降は下記のように作成
ArrayList<型> 変数名 = new ArrayList<型>();
クラスの後ろに"<"と">"に囲まれて型を指定する部分がある。
この記述方法は、J2SE5.0から新しく導入されたGenerics機能と呼ばれるもの。

画面にタッチしたら、タッチしたポイントに描画する為にもう1つ必要なことがある。
タッチした座標値をこのArrayListを使って、どのように設定するか。

設定方法
①タッチした座標値を取得する
使う物はPointクラス。
最初、event.getX()とevent.getY()で得た座標値をxとyの変数に代入
x=event.getX()
y=event.getY()

そして、このxとyをPointの引数に入れる。
Point point=new Point(x,y);

②ArrayListを作る
インスタンスの作成
ArrayList<Point> draw=new ArrayList<Point>();
タッチイベントで、Pointを作った所でadd()メソッドを呼び出し、登録する
draw.add(point)

③描画処理
描画処理内にてfor()文を使用し、繰り返し処理を行う。
for(int i=0;i<draw;i++) {
ここでも、Pointクラスを呼び出す。
ArrayListに登録されている座標値を引っ張り出す支持を設定する。
引っ張り出すメソッドはget()メソッド。

こんな感じに記述
Point point=draw.get(i);

後は、描画する図形のメソッドの引数にて使用する。
canvas.drawCircle(point.x, point.y, r, paint);
}

JavaTM PlatformStandard Ed. 6 クラス:ArrayList<E>
Android Reference ArrayList<E>




その他のタッチイベント関連
タッチイベントを使って、画像を回転させる
ランダムクラスを使って色の変更を行う
Androidのタッチイベントを使ってアニメーションを動作させる