Android mobile game development part III : drawing and moving image on android surface view

Saturday 7 July 2012

Android mobile game development part III : drawing and moving image on android surface view

Now we come closer to be able to make a simple 2D game in android. Before you start this new article which include

1) Create one canvas to draw bitmap or images on android surface view

2) Create dynamically unlimited images and move them on surface

Please see previous article to get more idea

Coordinate system in mobile gaming and creating some simple figure Like Square and Handle Touch event in android canvas

I have created same thing in two ways First using Surface View and View.First make one User Interface to select an option , how you want to draw? you can see the difference between performance by increasing number of images. So take one activity and make view like this.You need not worry as i posted full source code at the end

Now we will need two separate class one to draw in SurfaceView and another using view.

Here we go with surface view and simple draw some bitmap inside canvas . I have taken one ArrauList to save information of coordinate where bitmap need to be draw that are created when you touch the surface.

    private Vector<Integer> xCoordinate = new Vector<Integer>();
    private Vector<Integer> yCoordinate = new Vector<Integer>();
    private ArrayList<Integer> speed = new ArrayList<Integer>();

speed array is to decide of bitmap. here is code to draw bitmap

package com.ahmad;

import java.util.ArrayList;
import java.util.Random;
import java.util.Vector;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class MoveImageUsingSurfaceView extends SurfaceView implements
        SurfaceHolder.Callback {
    private Bitmap mBitmapMove;

    public MoveImageUsingSurfaceView(Context context) {
        super(context);
        mBitmapMove = BitmapFactory.decodeResource(context.getResources(),
                R.drawable.football);
        setFocusableInTouchMode(true);
        setWillNotDraw(false);
    }

    private int moving_speed = 5;
    private int left = 0, right = 0;

    @Override
    protected void onDraw(Canvas canvas) {
        setBackgroundColor(Color.GREEN);
        CheckCorner(canvas);
        super.onDraw(canvas);
    }

    /**
     * <P>
     * It will check corner and it will then reverse back
     * </P>
     * 
     * @param canvas
     */
    private void CheckCorner(Canvas canvas) {
        if (right > canvas.getHeight())
            moving_speed = -moving_speed;

        if (right < 0)
            moving_speed = -moving_speed;

        right = right + moving_speed;
        canvas.drawBitmap(mBitmapMove, left, right, new Paint());

        /**
         * <html><B> Drawing bitmap on touching screen<B></html>
         */
        if (xCoordinate.isEmpty()) {

        } else {
            int size = xCoordinate.size();
            for (int i = 0; i < size; i++) {
                int speedTemp = speed.get(i);
                canvas.drawBitmap(mBitmapMove, xCoordinate.get(i),
                        yCoordinate.get(i), new Paint());
                yCoordinate.set(i, (yCoordinate.get(i) + speedTemp));
                if (yCoordinate.get(i) > canvas.getHeight()) {
                    speedTemp = -speedTemp;
                }
                if (yCoordinate.get(i) < 0) {
                    speedTemp = -speedTemp;
                }
                speed.set(i, speedTemp);

            }
        }
        invalidate();
    }

    private Vector<Integer> xCoordinate = new Vector<Integer>();
    private Vector<Integer> yCoordinate = new Vector<Integer>();

    private ArrayList<Integer> speed = new ArrayList<Integer>();
    private int speedLimit = 30;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        Random random = new Random();
        int Speed = random.nextInt(speedLimit);
        xCoordinate.add(Math.round(event.getX()));
        yCoordinate.add(Math.round(event.getY()));
        speed.add(Speed);
        invalidate();
        return super.onTouchEvent(event);
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
        right = 0;
        left = width / 2;
    }
    @Override
    public void surfaceCreated(SurfaceHolder holder) {

    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

I am not able to post Video here, only screen shot will be here .In screen shot, image are blur because of motions.and obviously it will not show movement just import this project and run