Viewをループ処理をする

1.開発目標

このページの目標は、Viewを使って、画面に表示される画像を動かすことです。このためには、ループ処理ができれば十分です。

2.ループ処理を行う

ループ処理を行うには、普通ならwhile文を使います。でも、ViewのonDrawメソッドは終了時にすべての処理を行うので、この中でwhile文を使っても描画が行われるのはonDrawが終わったときの1回だけです。これでは画像が動きません。そこで、onDrawからonDrawを呼び出すことで、ちょっと強引にループさせます。

SampleView.java

package sample.android.usingview;

import android.content.Context;
…略…

class SampleView extends View {
    Paint paint = new Paint();
    
    //画像読み込み
    Resources res = this.getContext().getResources();
    Bitmap grass = BitmapFactory.decodeResource(res, R.drawable.grass);
    Bitmap goburin = BitmapFactory.decodeResource(res, R.drawable.goburin);
    
    public SampleView(Context context) {
        super(context);
    }
    
    @Override
    public void onDraw(Canvas c) {
        //描画処理
        c.drawBitmap(grass, 0, 0, paint);
        c.drawBitmap(goburin, 250, 150, paint);
        
        //ループ処理(onDrawを実行)
        invalidate();
    }
}

3.画像を動かす

ループ処理が実装できたので、ループの中で変数を変化させて、その変数を画像座標に指定すれば、画像が動きます。

SampleView.java

package sample.android.usingview;

import android.content.Context;
…略…

class SampleView extends View {
    Paint paint = new Paint();
    int playerX = 250;
    int playerVX = 10;
    
    //画像読み込み
    Resources res = this.getContext().getResources();
    Bitmap grass = BitmapFactory.decodeResource(res, R.drawable.grass);
    Bitmap goburin = BitmapFactory.decodeResource(res, R.drawable.goburin);
    
    public SampleView(Context context) {
        super(context);
    }
    
    @Override
    public void onDraw(Canvas c) {
        //数値処理
        playerX += playerVX;
        if(playerX<0 || 480<playerX) playerVX *= -1;
        
        //描画処理
        c.drawBitmap(grass, 0, 0, paint);
        c.drawBitmap(goburin, playerX, 150, paint);
        
        //ループ処理(onDrawを実行)
        invalidate();
    }
}

4.ループ速度を調節する

現在ループは全力で動いています。Viewは元々ループ処理が得意ではないので、このままでも速くはないですが、少し余裕を持たせることもできます。

SampleView.java

package sample.android.usingview;

import android.content.Context;
…略…

class SampleView extends View {
    Paint paint = new Paint();
    int playerX = 250;
    int playerVX = 10;
    
    //画像読み込み
    Resources res = this.getContext().getResources();
    Bitmap grass = BitmapFactory.decodeResource(res, R.drawable.grass);
    Bitmap goburin = BitmapFactory.decodeResource(res, R.drawable.goburin);
    
    public SampleView(Context context) {
        super(context);
    }
    
    @Override
    public void onDraw(Canvas c) {
        //数値処理
        playerX += playerVX;
        if(playerX<0 || 480<playerX) playerVX *= -1;
        
        //描画処理
        c.drawBitmap(grass, 0, 0, paint);
        c.drawBitmap(goburin, playerX, 150, paint);
        
        //ループ処理(onDrawを実行)
        invalidate();
        
        //ウェイト処理
        try {
            Thread.sleep(100);
        } catch (InterruptedException e) {
        }
    }
}

5.開発結果

これで画像が動いて表示されるはずです。実行してみます。

静止画では分からないですが、行ったり来たりしています。だいぶ面白くなりましたが、勝手に動いているだけです。次回は、画面をタッチすることで動きを変えてみます。