Search This Blog

Support my cause by downloading

Sunday, 17 June 2012

Android Mobile Game Development Part II, Creating surface using android view and drawing some object on touch

This is next step in game development after  Game Development Basic Part I is to creating some real action.
Mobile game development is some what difficult as you need to consider its limitation of graphics and screen size but we will take it as challenge
There are three way to create surface and drawing object like circle, Rectangle and image

1) Using View  this is simplest way to design surface and drawing object on this. But its some what slow in comparison of next two option. Highly useful when you are creating game like Chess which does not require large number frame per second to draw

2) Using surface view Second option and say better option in comparison of first. But notable thing is that it is not much complex to step first but improve our game performance

3) Using Open GL or say GLSurface View  that is derived from c and c++. Highly recommend when your game include so many graphics and animation. And your game need huge amount of memory

So i will start from option at the end of this article we will learn  with source code of project and video

I. How to create simple surface
II. How draw some object
III. How to implement Touch event on View
IV.Drawing shape on touch dynamically

Start with basic step create one project Creating Surface.

Step 2). create another class called  OnsurfaceToDraw.java 

in this class , we create rectangle and circle and line. read little bit about Paint , View , Touch event


package com.ahmad;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.SystemClock;
import android.view.MotionEvent;
import android.view.View;

public class OurSurfaceTodraw extends View {
    private Context context;

    public OurSurfaceTodraw(Context context) {
        super(context);
        this.context = context;
        setWillNotDraw(false);
        setFocusableInTouchMode(true);

    }
    long timedelay = SystemClock.currentThreadTimeMillis();
    @Override
    protected void onDraw(Canvas canvas) {
        // Setting canvas background
        setBackgroundColor(Color.WHITE);
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        // Drawing Line on canvas
        canvas.drawLine(50, 200, 0, 10, paint);
        if ((SystemClock.currentThreadTimeMillis() + 3) > timedelay) {
            paint.setColor(Color.BLACK);
            canvas.drawRect(100, 100, 140, 140, paint);
        }
        // Drawing Rectangle or square
        if ((SystemClock.currentThreadTimeMillis() + 6) > timedelay) {
            paint.setColor(Color.BLACK);
            canvas.drawRect(100, 100, 140, 140, paint);
        }
        // Drawing Rectangle or square
        if ((SystemClock.currentThreadTimeMillis() + 6) > timedelay) {
            paint.setColor(Color.BLACK);
            canvas.drawCircle(100, 250, 20, paint);
        }
        if (mDynamic.isEmpty()) {

        } else {
            paint.setColor(Color.RED);
            for (int i = 0; i < mDynamic.size(); i++) {
                canvas.drawRect(mDynamic.get(i), paint);
            }
        }
        super.onDraw(canvas);
      }

    private ArrayList<Rect> mDynamic = new ArrayList<Rect>();

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        int x = Math.round(event.getX());
        int y = Math.round(event.getY());
        Rect rect = new Rect(x, y, x + 30, y + 20);
        mDynamic.add(rect);
        invalidate();
        return super.onTouchEvent(event);
    }
}

Notable Line in above code are

 Drawing a circle,Rectangle and Line

 canvas.drawCircle(100, 250, 20, paint);
 canvas.drawRect(100, 100, 140, 140, paint);
 canvas.drawLine(50, 200, 0, 10, paint);

If we want to draw Rectangle dynamically then store all rectangle into one ArrayList and then draw by getting each element.

invalidate(); This will ensure that while you change something on touch it will draw to canvas

 Video will show how this out put will work


                             

 You can download complete source from below given link


                                  Download Source Code


Android News and source code