URL:http://obviam.net/index.php/moving-images-on-the-screen-with-androi/previous post we’ve displayed an image and implemented a very simple drag functionality. Things we should know by now following the series:
- launch an Android application in full screen
- use a separate thread which controls the application (the game loop)
- load an image from the resources
- acquire the canvas and draw the image onto it
- handle basic touch gestures
If you remember the image is just a representation of the droid. So we will modify the droid object and we’ll add some abilities. Just one for the time being. Our droid is movable. It can move. This implies that it has speed. We will vest it with the ability of movement. To achieve this we will add a
move()method and this method will just update the
Ycoordinates based on its
Speedwill be a class in itself and the
Droidwill contain it. I will do a concrete implementation now but later on I will be using the Strategy Pattern.
We’ll use direction constants to determine the movement direction on the axis. The droid has a vertical and a horizontal speed and at each game update the coordinates are set considering the direction of the movement.
The droid will be allowed to move only on the area of the canvas. That is a rectangle and our 2D coordinate system. Unlike in the math classes the origin is in the top left corner. So for the droid to start from the top left corner of the screen its coordinates will be 0,0. To move in a diagonal line the speed will be
1for both the
Ycomponents of the speed vector. To move towards the bottom right the directions will be:
1 (right)for the
1 (down)for the
To have the droid move horizontally the speed of the
Yvector must be
0. A value of
Xwill make the droid travel at a 22.5 degrees to the X axis. Simple geometry.
Speedwe have the vector components (x and y) and the directions along with the getters and setters. The two methods (
toggleYDirection()just change the direction with one call. We’ll see later at collision detection (with the wall of the screen) that it is pretty useful.
The game loop (
MainThread.java) gets an important modification as it gets the game update method introduced. The following code snippet is the updated
run()method which has just one line added:
We will create the corresponding method in the
MainGamePanel. This method is in charge of updating the state of all the objects in the application. Currently only the droid. Because the droid is moving we will introduce a basic collision detection with the walls. The logic is simple. Check if the droid is moving towards left then check if the droid’s position is at the wall and if it is then change its direction. Bear in mind that the droid’s position is the center of the image so we need to use the image’s width and height to get the accuracy right.
We also update the position of the droid. To keep the update method simple we delegate the update of the droid’s position to the droid itself. So the droid will get an update method which will keep updating its position if the droid is not being picked up by a touch gesture. Check the previous post for this.
Check the code:
getHeight()return the width and height of the view. The panel is a view, remember?
I also changed the render’s name in the
MainThread.javaso now it is
onDraw. Just that I like it better as it follows the update -> render naming.
Run the application and you should see a screen like the following one with the droid moving in a 45 degrees angle and bouncing off the walls as it hits them. You can also drag the droid around.
To exit the application click (touch) the lower part of the screen.
Download the full source code and eclipse project here.