Moving Images on Screen

In this example we shall show you how to create and display moving Images on the screen in your Android Application.

For example let’s have a moving image that will move through the screen and it bounces back when it hits the edge of the screen.

This is an example of a very basic animation that you might want to include in your application.
 
 
 
 
 
To create that kind of animation one should perform the following steps:

• create a Speed class containing all the necessary information concerning the speed of the image, eg the direction, the horizontal and vertical velocity
• create an update function that will perform collision detection and draw the position of the image at any given moment

as demonstrated in the code snippet(s) that follow.

package net.obviam.droidz.model.components;

public class Speed {

	public static final int DIRECTION_RIGHT	= 1;
	public static final int DIRECTION_LEFT	= -1;
	public static final int DIRECTION_UP	= -1;
	public static final int DIRECTION_DOWN	= 1;

	private float xv = 1;	// velocity value on the X axis
	private float yv = 1;	// velocity value on the Y axis

	private int xDirection = DIRECTION_RIGHT;
	private int yDirection = DIRECTION_DOWN;

	public Speed() {
		this.xv = 1;
		this.yv = 1;
	}

	public Speed(float xv, float yv) {
		this.xv = xv;
		this.yv = yv;
	}

	public float getXv() {
		return xv;
	}
	public void setXv(float xv) {
		this.xv = xv;
	}
	public float getYv() {
		return yv;
	}
	public void setYv(float yv) {
		this.yv = yv;
	}

	public int getxDirection() {
		return xDirection;
	}
	public void setxDirection(int xDirection) {
		this.xDirection = xDirection;
	}
	public int getyDirection() {
		return yDirection;
	}
	public void setyDirection(int yDirection) {
		this.yDirection = yDirection;
	}

	// changes the direction on the X axis
	public void toggleXDirection() {
		xDirection = xDirection * -1;
	}

	// changes the direction on the Y axis
	public void toggleYDirection() {
		yDirection = yDirection * -1;
	}
}

public void run() {
	Canvas canvas;
	Log.d(TAG, "Starting game loop");
	while (running) {
		canvas = null;
		// try locking the canvas for exclusive pixel editing
		// in the surface
		try {
			canvas = this.surfaceHolder.lockCanvas();
			synchronized (surfaceHolder) {
				// update game state
				this.gamePanel.update();
				// render state to the screen
				// draws the canvas on the panel
				this.gamePanel.render(canvas);
			}
		} finally {
			// in case of an exception the surface is not left in
			// an inconsistent state
			if (canvas != null) {
				surfaceHolder.unlockCanvasAndPost(canvas);
			}
		}	// end finally
	}
}

public void update() {
	// check collision with right wall if heading right
	if (droid.getSpeed().getxDirection() == Speed.DIRECTION_RIGHT
			&& droid.getX() + droid.getBitmap().getWidth() / 2 >= getWidth()) {
		droid.getSpeed().toggleXDirection();
	}
	// check collision with left wall if heading left
	if (droid.getSpeed().getxDirection() == Speed.DIRECTION_LEFT
			&& droid.getX() - droid.getBitmap().getWidth() / 2 <= 0) {
		droid.getSpeed().toggleXDirection();
	}
	// check collision with bottom wall if heading down
	if (droid.getSpeed().getyDirection() == Speed.DIRECTION_DOWN
			&& droid.getY() + droid.getBitmap().getHeight() / 2 >= getHeight()) {
		droid.getSpeed().toggleYDirection();
	}
	// check collision with top wall if heading up
	if (droid.getSpeed().getyDirection() == Speed.DIRECTION_UP
			&& droid.getY() - droid.getBitmap().getHeight() / 2 <= 0) {
		droid.getSpeed().toggleYDirection();
	}
	// Update the lone droid
	droid.update();
}

 
This was an example of how to create an display moving images in the Screen in Android.

Related Article:

• Android Game Development – Moving Images on Screen

Reference: Moving Images on the Screen with Android from our JCG partner Tamas Jano at the “Against The Grain” blog.