canvas
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:
Reference: Moving Images on the Screen with Android from our JCG partner Tamas Jano at the “Against The Grain” blog.