{"id":479,"date":"2011-07-07T23:02:00","date_gmt":"2011-07-07T23:02:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-game-development-displaying-images-with-android.html"},"modified":"2012-10-21T20:01:33","modified_gmt":"2012-10-21T20:01:33","slug":"android-game-development-displaying","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2011\/07\/android-game-development-displaying.html","title":{"rendered":"Android Game Development – Displaying Images with Android"},"content":{"rendered":"
Before moving to the actual game loop let\u2019s display some graphics so we can get some measurements done. If you haven\u2019t checked it out please do as it is imperative that you understand how a thread updates the screen. You can check it out here<\/a>.<\/p>\n

Displaying an image using Android is extremely simple.
\nTo scale the problem down we will just display the image in the top left corner. We need an image to display. I prefer .png formats and I have just created one named droid_1.png. The size of the image is 20\u00d720 pixels. You can use whatever tool you like. I use Gimp or Photoshop.<\/p>\n

<\/a><\/div>\n

To make it available for your application just copy the image into the \/res\/drawable-mdpi<\/i><\/strong> directory (the easiest way is to drag and drop it there).
\nI have chosen mdpi which stands for normal screen medium density. To read on screen types check the android documentation<\/a>.<\/p>\n

Modify the MainGamePanel.java<\/i><\/strong> class and change the onDraw(Canvas canvas)<\/i><\/strong> method to look like this:<\/p>\n

protected void onDraw(Canvas canvas) {\r\n canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.droid_1), 10, 10, null);\r\n}\r\n<\/pre>\n
The drawBitmap<\/i><\/strong> method draws the droid_1<\/i><\/strong> image to the coordinates 10,10.
\nWe obtain the bitmap from the application resources by passing the id of our image (resource), which is droid_1<\/i><\/strong> in our case. When we copied the droid_1.png<\/i><\/strong> into the resource directory eclipse detected it and the plugin executed the necessary scripts in the background so we have the droid_1<\/i><\/strong> identifier in the R.java<\/i><\/strong> file. The R.java holds the resource identifiers.<\/p>\n
The thread suffered some changes too. Examine the new run()<\/i><\/strong> method.<\/p>\n
public void run() {\r\n  Canvas canvas;\r\n  Log.d(TAG, \"Starting game loop\");\r\n  while (running) {\r\n   canvas = null;\r\n   \/\/ try locking the canvas for exclusive pixel editing on the surface\r\n   try {\r\n    canvas = this.surfaceHolder.lockCanvas();\r\n    synchronized (surfaceHolder) {\r\n     \/\/ update game state\r\n     \/\/ draws the canvas on the panel\r\n     this.gamePanel.onDraw(canvas);\r\n    }\r\n   } finally {\r\n    \/\/ in case of an exception the surface is not left in\r\n    \/\/ an inconsistent state\r\n    if (canvas != null) {\r\n     surfaceHolder.unlockCanvasAndPost(canvas);\r\n    }\r\n   } \/\/ end finally\r\n  }\r\n }\r\n<\/pre>\n
In line 02<\/strong> we declare the canvas on which we will draw our image. The canvas is the surface\u2019s bitmap onto which we can draw and we can edit its pixels. In line 08<\/strong> we try to get hold of it and in line 12<\/strong> we trigger the panel\u2019s onDraw<\/i><\/strong> event to which we pass the obtained canvas. Note that it is a synchronised block which means that we have exclusivity on it and nothing can modify it while we are using it.
\nThe functionality is very simple and basic. On every execution of the game loop we get hold of the canvas and we pass it to the game panel to draw on it. The game panel just displays the image at coordinates 10,10. Now back to the FPS. If the number of times per second the image is displayed drops below 20, it starts to get noticeable by us humans. The challenge is to keep this rate above a set level and we will see how shortly.<\/p>\n
Try running the code and you should see our droid displayed close to the top left corner.<\/p>\n\n\n\n\n
<\/a><\/td>\n<\/tr>\n
Droid in top left corner<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Moving the Image<\/span><\/strong><\/p>\n
Now that we have displayed it, let\u2019s try moving it. How? We will use our finger. We will implement a simple drag and drop functionality. To pick up an image we will simply touch it and while our finger is on the screen we will update the image\u2019s coordinates accordingly. Once the touch is finished we leave the image there where the last touch was recorded.<\/p>\n
We need to create an object that will hold our image and the coordinates.
\nI have created Droid.java<\/i><\/strong> for this. Note that I have put the class into the net.obviam.droidz.model<\/i><\/strong> package.<\/p>\n
package net.obviam.droidz.model;\r\n\r\nimport android.graphics.Bitmap;\r\n\r\npublic class Droid {\r\n\r\n private Bitmap bitmap; \/\/ the actual bitmap\r\n private int x;   \/\/ the X coordinate\r\n private int y;   \/\/ the Y coordinate\r\n\r\n public Droid(Bitmap bitmap, int x, int y) {\r\n  this.bitmap = bitmap;\r\n  this.x = x;\r\n  this.y = y;\r\n }\r\n\r\n public Bitmap getBitmap() {\r\n  return bitmap;\r\n }\r\n public void setBitmap(Bitmap bitmap) {\r\n  this.bitmap = bitmap;\r\n }\r\n public int getX() {\r\n  return x;\r\n }\r\n public void setX(int x) {\r\n  this.x = x;\r\n }\r\n public int getY() {\r\n  return y;\r\n }\r\n public void setY(int y) {\r\n  this.y = y;\r\n }\r\n}\r\n<\/pre>\n
It is a plain class with some attributes and a constructor.
\nThe x<\/strong> and y<\/strong> are the coordinates of the droid. The bitmap holds the image that will be displayed as the droid. It is the graphical representation of it.
 
<\/div> <\/div><\/p>\n
So far nothing special. But to play around with it we need to add some state. To keep it simple, the droid has only 2 states. Touched<\/i> and untouched<\/i>. By touched<\/i> I mean when our finger touched the droid on the screen. We keep the touched state true<\/i> while we hold our finger down on the screen at the droid\u2019s position. Otherwise the droid remains untouched (state set to false<\/i>).<\/p>\n
Check out the new droid class.<\/p>\n
package net.obviam.droidz.model;\r\n\r\nimport android.graphics.Bitmap;\r\nimport android.graphics.Canvas;\r\nimport android.view.MotionEvent;\r\n\r\npublic class Droid {\r\n\r\n private Bitmap bitmap; \/\/ the actual bitmap\r\n private int x;   \/\/ the X coordinate\r\n private int y;   \/\/ the Y coordinate\r\n private boolean touched; \/\/ if droid is touched\/picked up\r\n\r\n public Droid(Bitmap bitmap, int x, int y) {\r\n  this.bitmap = bitmap;\r\n  this.x = x;\r\n  this.y = y;\r\n }\r\n\r\n public Bitmap getBitmap() {\r\n  return bitmap;\r\n }\r\n public void setBitmap(Bitmap bitmap) {\r\n  this.bitmap = bitmap;\r\n }\r\n public int getX() {\r\n  return x;\r\n }\r\n public void setX(int x) {\r\n  this.x = x;\r\n }\r\n public int getY() {\r\n  return y;\r\n }\r\n public void setY(int y) {\r\n  this.y = y;\r\n }\r\n\r\n public boolean isTouched() {\r\n  return touched;\r\n }\r\n\r\n public void setTouched(boolean touched) {\r\n  this.touched = touched;\r\n }\r\n\r\n public void draw(Canvas canvas) {\r\n  canvas.drawBitmap(bitmap, x - (bitmap.getWidth() \/ 2), y - (bitmap.getHeight() \/ 2), null);\r\n }\r\n\r\n public void handleActionDown(int eventX, int eventY) {\r\n  if (eventX >= (x - bitmap.getWidth() \/ 2) && (eventX <= (x + bitmap.getWidth()\/2))) {\r\n   if (eventY >= (y - bitmap.getHeight() \/ 2) && (y <= (y + bitmap.getHeight() \/ 2))) {\r\n    \/\/ droid touched\r\n    setTouched(true);\r\n   } else {\r\n    setTouched(false);\r\n   }\r\n  } else {\r\n   setTouched(false);\r\n  }\r\n\r\n }\r\n}\r\n<\/pre>\n
We added the touched<\/i><\/strong> field to keep track of the state of our droid. You will notice two more methods: public void draw(Canvas canvas)<\/i><\/strong> and public void handleActionDown(int eventX, int eventY)<\/i><\/strong>.
\nThese methods are discussed later.
\nNow let\u2019s have a look at the MainGamePanel.java<\/i><\/strong>. It changed quite a lot.<\/p>\n
package net.obviam.droidz;\r\n\r\nimport net.obviam.droidz.model.Droid;\r\nimport android.app.Activity;\r\nimport android.content.Context;\r\nimport android.graphics.BitmapFactory;\r\nimport android.graphics.Canvas;\r\nimport android.graphics.Color;\r\nimport android.util.Log;\r\nimport android.view.MotionEvent;\r\nimport android.view.SurfaceHolder;\r\nimport android.view.SurfaceView;\r\n\r\npublic class MainGamePanel extends SurfaceView implements\r\n  SurfaceHolder.Callback {\r\n\r\n private static final String TAG = MainGamePanel.class.getSimpleName();\r\n\r\n private MainThread thread;\r\n private Droid droid;\r\n\r\n public MainGamePanel(Context context) {\r\n  super(context);\r\n  \/\/ adding the callback (this) to the surface holder to intercept events\r\n  getHolder().addCallback(this);\r\n\r\n  \/\/ create droid and load bitmap\r\n  droid = new Droid(BitmapFactory.decodeResource(getResources(), R.drawable.droid_1), 50, 50);\r\n\r\n  \/\/ create the game loop thread\r\n  thread = new MainThread(getHolder(), this);\r\n\r\n  \/\/ make the GamePanel focusable so it can handle events\r\n  setFocusable(true);\r\n }\r\n\r\n @Override\r\n public void surfaceChanged(SurfaceHolder holder, int format, int width,\r\n   int height) {\r\n }\r\n\r\n @Override\r\n public void surfaceCreated(SurfaceHolder holder) {\r\n  \/\/ at this point the surface is created and\r\n  \/\/ we can safely start the game loop\r\n  thread.setRunning(true);\r\n  thread.start();\r\n }\r\n\r\n @Override\r\n public void surfaceDestroyed(SurfaceHolder holder) {\r\n  Log.d(TAG, \"Surface is being destroyed\");\r\n  \/\/ tell the thread to shut down and wait for it to finish\r\n  \/\/ this is a clean shutdown\r\n  boolean retry = true;\r\n  while (retry) {\r\n   try {\r\n    thread.join();\r\n    retry = false;\r\n   } catch (InterruptedException e) {\r\n    \/\/ try again shutting down the thread\r\n   }\r\n  }\r\n  Log.d(TAG, \"Thread was shut down cleanly\");\r\n }\r\n\r\n @Override\r\n public boolean onTouchEvent(MotionEvent event) {\r\n  if (event.getAction() == MotionEvent.ACTION_DOWN) {\r\n   \/\/ delegating event handling to the droid\r\n   droid.handleActionDown((int)event.getX(), (int)event.getY());\r\n\r\n   \/\/ check if in the lower part of the screen we exit\r\n   if (event.getY() > getHeight() - 50) {\r\n    thread.setRunning(false);\r\n    ((Activity)getContext()).finish();\r\n   } else {\r\n    Log.d(TAG, \"Coords: x=\" + event.getX() + \",y=\" + event.getY());\r\n   }\r\n  } if (event.getAction() == MotionEvent.ACTION_MOVE) {\r\n   \/\/ the gestures\r\n   if (droid.isTouched()) {\r\n    \/\/ the droid was picked up and is being dragged\r\n    droid.setX((int)event.getX());\r\n    droid.setY((int)event.getY());\r\n   }\r\n  } if (event.getAction() == MotionEvent.ACTION_UP) {\r\n   \/\/ touch was released\r\n   if (droid.isTouched()) {\r\n    droid.setTouched(false);\r\n   }\r\n  }\r\n  return true;\r\n }\r\n\r\n @Override\r\n protected void onDraw(Canvas canvas) {\r\n  \/\/ fills the canvas with black\r\n  canvas.drawColor(Color.BLACK);\r\n  droid.draw(canvas);\r\n }\r\n}\r\n<\/pre>\n
Line 28<\/strong> creates the droid<\/strong> object at the the coordinates 50,50<\/i>.
\nIt is declared as an attribute in line 20<\/strong>.<\/p>\n
In the onTouchEvent<\/i><\/strong> (method line 71<\/strong>) if the action is the touch of the screen (MotionEvent.ACTION_DOWN<\/i><\/strong>) we want to know if our finger landed on the droid. To do this is easy. We need to check if the event\u2019s coordinates are inside the droid\u2019s bitmap. In order not to clutter the onTouch<\/i><\/strong> event we just delegate this to the droid object. Now you can go back to the Droid.java<\/i><\/strong> class and check the handleActionDown<\/i><\/strong> method.<\/p>\n
public void handleActionDown(int eventX, int eventY) {\r\n  if (eventX >= (x - bitmap.getWidth() \/ 2) && (eventX <= (x + bitmap.getWidth()\/2))) {\r\n   if (eventY >= (y - bitmap.getHeight() \/ 2) && (y <= (y + bitmap.getHeight() \/ 2))) {\r\n    \/\/ droid touched\r\n    setTouched(true);\r\n   } else {\r\n    setTouched(false);\r\n   }\r\n  } else {\r\n   setTouched(false);\r\n  }\r\n\r\n }\r\n<\/pre>\n
It is very simple. If the action happened inside the area of our droid\u2019s bitmap we\u2019ll set its touched status to true<\/strong><\/p>\n
Going back to the onTouched<\/i><\/strong> method, notice that there is a code block (lines 81<\/strong>–86<\/strong>) that is executed when the event is of type MotionEvent.ACTION_MOVE<\/i><\/strong>. This event happens when our finger started to move on the screen. It is simple. We check if the droid is touched<\/i><\/strong> and if so we just update its coordinates accordingly.
\nThat is it. This was the update game state. We have updated the state of our sole object in the game. The touched state and the coordinates. Now it is time to display it.<\/p>\n
Check the onDraw<\/i><\/strong> method. This is triggered at every execution of the main loop inside the thread remember?
\nIt contains 2 lines. Line 99<\/strong> simply fills the canvas with black and line 100<\/strong> tells the droid to draw itself on the canvas provided. By doing this is like me giving you a paper to draw yourself onto it, and give the paper back to me so I can continue my drawing.<\/p>\n
Check Droid.java<\/i><\/strong> for the draw implementation. It is dead simple. It takes the bitmap it was instantiated with and draws it to the canvas at the coordinates the droid is at in that moment. Note that the coordinates of the droid are exactly in the center of the bitmap so we need to move the pointer to the top left corner of the image and draw it there. I\u2019m sure you won\u2019t find it hard to understand.<\/p>\n
That\u2019s it. Run it and have a play with it.<\/p>\n
Download he code for the project here (droidz.android.02.3-graphics.tar.gz)<\/a><\/p>\n
Reference:<\/strong> Displaying Images with Android<\/a> from our JCG<\/a> partner Tamas Jano from “Against The Grain<\/a>” blog.<\/p>\n
Do not forget to check out our new Android Game<\/i><\/strong> ArkDroid<\/a> (screenshots below)<\/span><\/span><\/i><\/strong>. You feedback will be more than helpful!<\/div>\n
<\/a><\/a><\/a><\/div>\n
Related Articles:<\/strong><\/div>\n