Search This Blog

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



                                                      Download Source Code

        Article May you like on this site

Bitmap operation like re sizing , rotating etc ,

Displaying Bitmap efficiently without getting Error of memory overflow

Next article will be on how to detect collision and create one simple game of enemy killing

3 comments:

  1. Hello, I want to subscribe for this weblog to obtain most
    recent updates, thus where can i do it please help.
    Feel free to visit my site : decaptchers

    ReplyDelete

Feedback always help in improvement. If you have any query suggestion feel free to comment and Keep visiting my blog to encourage me to blogging

Android News and source code