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.
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

Be ready for next articles




 Game Development Part II how to draw image and move them in android

 Game Development Part III how to move background Like racing game

 Game Development Part IV how to move background Like racing game

 Game Development Part IV Changing All previous work to surface View

 Game Development Part III how to detect collision and killing enemy Game Demo