{"id":1314,"date":"2012-05-03T13:00:00","date_gmt":"2012-05-03T10:00:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-game-development-with-libgdx-prototype-in-a-day-part-1b.html"},"modified":"2013-02-12T11:16:17","modified_gmt":"2013-02-12T09:16:17","slug":"android-game-development-with-libgdx_03","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2012\/05\/android-game-development-with-libgdx_03.html","title":{"rendered":"Android Game Development with libgdx – Prototype in a day, Part 1b"},"content":{"rendered":"
Creating the Game and Displaying the World<\/strong> <\/p>\n

To render the world onto the screen, we need to create a screen for it and tell it to render the world. In libgdx there is a convenience class called Game<\/code> and we will rewrite the StarAssault<\/code> class a subclass of the Game<\/code> class provided by libgdx. <\/p>\n

About Screens<\/strong> <\/p>\n

A game can consist of multiple screens. Even our game will have 3 basic screens. The Start Game<\/strong> screen, the Play Screen<\/strong> and the Game Over<\/strong> screen. Each screen is concerned with the things happening on it and they don\u2019t care about each other. The Start Game<\/strong> screen for example will contain the menu options Play<\/strong> and Quit<\/strong>. It has two elements (buttons) and it is concerned about handling the clicks\/touches on those elements. It renders tirelessly those two buttons and if the Play<\/strong> button is clicked\/touched, it notifies the main Game<\/strong> to load the Play Screen<\/strong> and get rid of the current screen. The Play Screen<\/strong> will run our game and will handle everything regarding the game. Once the Game Over state is reached, it tells the main Game<\/strong> to transition to the Game Over<\/strong> screen, whose sole purpose is to display the high scores and listen to clicks on the Replay button. <\/p>\n

Let\u2019s refactor the code and create just the main screen for the game for the time being. We will skip the start and game over screens.<\/p>\n

The GameScreen.java<\/code> <\/p>\n

package net.obviam.starassault.screens;\r\n\r\nimport com.badlogic.gdx.Screen;\r\n\r\npublic class GameScreen implements Screen {\r\n\r\n @Override\r\n public void render(float delta) {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void resize(int width, int height) {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void show() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void hide() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void pause() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void resume() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void dispose() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n}\r\n<\/pre>\n
The StarAssault.java<\/code> will become very simple.   <\/p>\n
package net.obviam.starassault;\r\n\r\nimport net.obviam.starassault.screens.GameScreen;\r\n\r\nimport com.badlogic.gdx.Game;\r\n\r\npublic class StarAssault extends Game {\r\n\r\n @Override\r\n public void create() {\r\n  setScreen(new GameScreen());\r\n }\r\n}\r\n<\/pre>\n
GameScreen<\/code> implements the Screen<\/code> interface which is very much like an ApplicationListener<\/code> but it has 2 important methods added.
\nshow()<\/code> \u2013 this is called when the main game makes this screen active
\nhide()<\/code> \u2013 this is called when the main game makes another screen active   <\/p>\n
StarAssault<\/code> has just one method implemented. The create()<\/code> does nothing more than to activate the newly instantiated GameScreen<\/code>. In other words, it creates it, calls the show()<\/code> method and will subsequently call its render()<\/code> method every cycle.   <\/p>\n
The GameScreen<\/code> becomes our focus for the next part as it is where the game will live. Remember that the game loop is the render()<\/code> method. But to have something to render we first need to create the world. The world can be created in the show()<\/code> method as we don\u2019t have any other screens that can interrupt our gameplay. Currently, the GameScreen<\/code> is shown only when the game starts.    <\/p>\n
We will add two members to the class and implement the render(float delta)<\/code> method.   <\/p>\n
 private World world;\r\n private WorldRenderer renderer;\r\n\r\n \/** Rest of methods ommited **\/\r\n\r\n @Override\r\n public void render(float delta) {\r\n  Gdx.gl.glClearColor(0.1f, 0.1f, 0.1f, 1);\r\n  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);\r\n  renderer.render();\r\n }\r\n<\/pre>\n
The world<\/code> attribute is the World<\/code> instance which holds the blocks and Bob.
\nThe renderer<\/code> is a class which will draw\/render the world onto the screen (I will reveal it shortly).
\nThe render(float delta)<\/code>
\nLet\u2019s create the WorldRenderer<\/code> class.
\nWorldRenderer.java<\/code>  <\/p>\n
package net.obviam.starassault.view;\r\n\r\nimport net.obviam.starassault.model.Block;\r\nimport net.obviam.starassault.model.Bob;\r\nimport net.obviam.starassault.model.World;\r\nimport com.badlogic.gdx.graphics.GL10;\r\nimport com.badlogic.gdx.graphics.OrthographicCamera;\r\nimport com.badlogic.gdx.graphics.glutils.ShapeRenderer;\r\nimport com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;\r\nimport com.badlogic.gdx.math.Rectangle;\r\n\r\npublic class WorldRenderer {\r\n\r\n private World world;\r\n private OrthographicCamera cam;\r\n\r\n \/** for debug rendering **\/\r\n ShapeRenderer debugRenderer = new ShapeRenderer();\r\n\r\n public WorldRenderer(World world) {\r\n  this.world = world;\r\n  this.cam = new OrthographicCamera(10, 7);\r\n  this.cam.position.set(5, 3.5f, 0);\r\n  this.cam.update();\r\n }\r\n\r\n public void render() {\r\n  \/\/ render blocks\r\n  debugRenderer.setProjectionMatrix(cam.combined);\r\n  debugRenderer.begin(ShapeType.Rectangle);\r\n  for (Block block : world.getBlocks()) {\r\n   Rectangle rect = block.getBounds();\r\n   float x1 = block.getPosition().x + rect.x;\r\n   float y1 = block.getPosition().y + rect.y;\r\n   debugRenderer.setColor(new Color(1, 0, 0, 1));\r\n   debugRenderer.rect(x1, y1, rect.width, rect.height);\r\n  }\r\n  \/\/ render Bob\r\n  Bob bob = world.getBob();\r\n  Rectangle rect = bob.getBounds();\r\n  float x1 = bob.getPosition().x + rect.x;\r\n  float y1 = bob.getPosition().y + rect.y;\r\n  debugRenderer.setColor(new Color(0, 1, 0, 1));\r\n  debugRenderer.rect(x1, y1, rect.width, rect.height);\r\n  debugRenderer.end();\r\n }\r\n}\r\n<\/pre>\n
The WorldRenderer<\/code> has only one purpose. To take the current state of the world and render its current state to the screen. It has a single public render()<\/code> method which gets called by the main loop (GameScreen<\/code>). The renderer needs to have access to the world<\/code> so we will pass it in when we instantiate the renderer. For the first step, we will render the bounding boxes of the elements (blocks and Bob) to see what we have so far. Drawing primitives in OpenGL is quite tedious but libgdx comes with a ShapeRenderer<\/strong> which makes this task very easy.
\nThe important lines are explained.<\/p>\n
#14<\/strong> \u2013 Declares the world<\/code> as a member variable.
\n#15<\/strong> \u2013 We declare an OrthographicCamera. We will use this camera to \u201clook\u201d at the world from an orthographic perspective. Currently the world is very small and it fits onto one screen, but when we will have an extensive level and Bob moves around in it, we will have to move the camera following Bob. It\u2019s analogous to a real life camera. More on orthographic projections can be found here<\/a>.
\n#18<\/strong> \u2013 The ShapeRenderer<\/code> is declared. We will use this to draw primitives (rectangles) for the entities. This is a helper renderer that can draw primitives like lines, rectangles, circles. For anyone familiar with canvas based graphics, this should be easy.
\n#20<\/strong> \u2013 The constructor which takes the world<\/code> as the parameter.
\n#22<\/strong> \u2013 We create the camera with a viewport of 10 units wide and 7 units tall. This means that filling up the screen with unit blocks (width = height = 1) will result in showing 10 boxes on the X axis and 7 on the Y.
\nImportant:<\/strong> This is resolution independent. If the screen resolution is 480\u00d7320, that means that 480 pixels represent 10 units, so a box will be 48 pixels wide. It also means that 320 pixels represent 7 units so the boxes on the screen will be 45.7 pixels tall. It won\u2019t be a perfect square. This is due to the aspect ratio. The aspect ratio in our case is 10:7.
\n#23<\/strong> \u2013 This lines positions the camera to look at the middle of the room. By default it looks at (0,0) which is the corner of the room. The camera\u2019s (0,0) is in the middle as you would expect from a normal camera. The following image shows the world and camera set-up coordinates.<\/p>\n
<\/a><\/div>\n
\n<\/div>\n
#24<\/strong> \u2013 The internal matrices of the camera are updated. The update method must be called every time the camera is acted upon (move, zoom, rotate, etc). OpenGL hidden beautifully.
\nThe render()<\/code> method:
\n#29<\/strong> \u2013 We apply the matrix from the camera to the renderer. This is necessary as we positioned the camera and we want them to be the same.
\n#30<\/strong> \u2013 We tell the renderer that we want to draw rectangles.
\n#31<\/strong> \u2013 We will draw the blocks so we iterate through all of them in the world.
\n#32 \u2013 #34<\/strong> \u2013 Extract the coordinates of the each block\u2019s bounding rectangle. OpenGL works with vertices (points) so for it to draw a rectangle have to know the coordinates for the starting point and the width. Notice that we work in camera coordinates which coincides with the world coordinates.
\n#35<\/strong> \u2013 Set the color of the rectangles to red.
\n#36<\/strong> \u2013 Draw the rectangle at the x1, y1<\/strong> with the given width<\/code> and height<\/code>.
\n#39 \u2013 #44<\/strong> \u2013 We do the same with Bob, but this time the rectangle is green.
\n#45<\/strong> \u2013 We let the renderer know that we\u2019re done drawing rectangles.   <\/p>\n
We need to add the renderer<\/code> and the world<\/code> to the GameScreen<\/code> (main loop) and see it in action.
\nModify the GameScreen<\/code> like this:   <\/p>\n
package net.obviam.starassault.screens;\r\n\r\nimport net.obviam.starassault.model.World;\r\nimport net.obviam.starassault.view.WorldRenderer;\r\n\r\nimport com.badlogic.gdx.Gdx;\r\nimport com.badlogic.gdx.Screen;\r\nimport com.badlogic.gdx.graphics.GL10;\r\n\r\npublic class GameScreen implements Screen {\r\n\r\n private World world;\r\n private WorldRenderer renderer;\r\n\r\n @Override\r\n public void show() {\r\n  world = new World();\r\n  renderer = new WorldRenderer(world);\r\n }\r\n\r\n @Override\r\n public void render(float delta) {\r\n  Gdx.gl.glClearColor(0.1f, 0.1f, 0.1f, 1);\r\n  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);\r\n  renderer.render();\r\n }\r\n\r\n \/** ... rest of method stubs omitted ... **\/\r\n\r\n}\r\n<\/pre>\n
The render(float delta)<\/code> method has 3 lines. The first 2 lines clear the screen with black and the 3rd line simply calls the renderer\u2019s render()<\/code> method.
\nThe World<\/code> and WorldRenderer<\/code> are created when the screen is shown.   <\/p>\n
To test it on both the desktop and Android, we have to create the launchers for both platforms.   Creating the Desktop and Android Launchers<\/strong>  <\/p>\n
We have created 2 more projects in the beginning.
\nstar-assault-desktop<\/code> and star-assault-android<\/code>, the latter being an Android project.
\nFor the desktop project is dead simple. We need to create a class with a main<\/code> method in it which instantiates an application provided by libgdx.
\nCreate the StarAssaultDesktop.java<\/code> class in the desktop project.   <\/p>\n
package net.obviam.starassault;\r\n\r\nimport com.badlogic.gdx.backends.lwjgl.LwjglApplication;\r\n\r\npublic class StarAssaultDesktop {\r\n public static void main(String[] args) {\r\n  new LwjglApplication(new StarAssault(), \"Star Assault\", 480, 320, true);\r\n }\r\n}\r\n<\/pre>\n
This is it. Line #7<\/strong> is where everything happens. It instantiates a new LwjglApplication<\/code> application passing in a new StarAssault<\/code> instance which is a Game<\/code> implementation. The 2nd and 3rd parameters tell the window\u2019s dimension. I opted for 480\u00d7320 because it is a resolution supported on many Android phones and I want to resemble it on the desktop. The last parameter tells libgdx to use OpenGL ES 2.
\nRunning the application as a normal Java program should produce the following result:<\/p>\n
<\/a><\/div>\n
\n<\/div>\n
If you are getting some errors, track back and make sure the set-up is correct and all the steps are followed, including checking gdx.jar at the export tab on the star-guard Project properties -> Build Path.
\n
\n<\/strong>
\nThe Android Version<\/strong>  
 
<\/div> <\/div><\/p>\n
In the star-assault-android<\/code> project there is a single java class called StarAssaultActivity<\/code>.
\nChange it to:
\nStarAssaultActivity.java<\/code>  <\/p>\n
package net.obviam.starassault;\r\n\r\nimport android.os.Bundle;\r\n\r\nimport com.badlogic.gdx.backends.android.AndroidApplication;\r\nimport com.badlogic.gdx.backends.android.AndroidApplicationConfiguration;\r\n\r\npublic class StarAssaultActivity extends AndroidApplication {\r\n    \/** Called when the activity is first created. *\/\r\n    @Override\r\n    public void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n  AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();\r\n  config.useAccelerometer = false;\r\n  config.useCompass = false;\r\n  config.useWakelock = true;\r\n  config.useGL20 = true;\r\n  initialize(new StarAssault(), config);\r\n    }\r\n}\r\n<\/pre>\n
Pay attention that the new activity extends AndroidApplication<\/code>.
\nIn line #13<\/strong> an AndroidApplicationConfiguration<\/code> object is created. We can set all types of configurations regarding the Android platform. They are self explanatory but note that if we want to use the Wakelock<\/code>, the AndroidManifest.xml<\/code> file also needs to be modified. This asks permission from Android to keep the device on and to prevent dimming the screen if we don\u2019t touch it.
\nAdd the following line to the AndroidManifest.xml<\/code> file somewhere inside the <manifest><\/code>tags.   <\/p>\n
    <uses-permission android:name=\"android.permission.WAKE_LOCK\"\/>\r\n<\/pre>\n
Also in line #17<\/strong> we tell Android to use OpenGL ES 2. This means we will be able to test it only on a device as the emulator does not support OpenGL ES 2. In case there is a problem with it, switch this to false<\/code>.
\nLine #18<\/strong> initialises the Android application and launches it.
\nHaving a device connected to eclipse, it gets directly deployed and below you can see a photo of the application running on a nexus one. It looks identical to the desktop version.<\/p>\n
<\/a><\/div>\n
The MVC Pattern<\/strong>  <\/p>\n
It\u2019s quite impressive how far we came in such a short time. Note the use of the MVC pattern. It\u2019s very efficient and simple. The models are the entities we want to display. The view is the renderer. The view draws the models onto the screen. Now we need to interact with the entities (especially Bob) and we will introduce some controllers too.
\nTo read more on the MVC pattern, check out my other article<\/a> or search for it on the net. It\u2019s very useful.  <\/p>\n
Adding Images<\/strong>  <\/p>\n
So far it\u2019s all nice but definitely we want to use some proper graphics. The power of MVC comes in handy and we will modify the renderer so it will draw images instead of rectangles.
\nIn OpenGL to display an image is quite a complicated process. First it needs to be loaded, turned into a texture and then mapped to a surface which is described by some geometry. libgdx makes this extremely easy. To turn an image from the disk into a texture is a one liner.
\nWe will use 2 images hence 2 textures. One texture for Bob and one for the blocks. I have created two images, a block and Bob. Bob is a copycat of the Star Guard chap. These are simple png files and I will copy them into the assets\/images<\/code> directory. I have two images: block.png<\/code> and bob_01.png<\/code>. Eventually Bob will become an animated character so I suffixed it with a number (panning for the future).
\nFirst let\u2019s clean up the WorldRenderer<\/code> a bit, namely, to extract the drawing of rectangles into a separate method as we will be using it for debug purposes.
\nWe will need to load the textures and render them accordingly to the screen.
\nTake a look at the new WorldRenderer.java<\/code>  <\/p>\n
package net.obviam.starassault.view;\r\n\r\nimport net.obviam.starassault.model.Block;\r\nimport net.obviam.starassault.model.Bob;\r\nimport net.obviam.starassault.model.World;\r\nimport com.badlogic.gdx.Gdx;\r\nimport com.badlogic.gdx.graphics.Color;\r\nimport com.badlogic.gdx.graphics.OrthographicCamera;\r\nimport com.badlogic.gdx.graphics.Texture;\r\nimport com.badlogic.gdx.graphics.g2d.SpriteBatch;\r\nimport com.badlogic.gdx.graphics.glutils.ShapeRenderer;\r\nimport com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;\r\nimport com.badlogic.gdx.math.Rectangle;\r\n\r\npublic class WorldRenderer {\r\n\r\n private static final float CAMERA_WIDTH = 10f;\r\n private static final float CAMERA_HEIGHT = 7f;\r\n\r\n private World world;\r\n private OrthographicCamera cam;\r\n\r\n \/** for debug rendering **\/\r\n ShapeRenderer debugRenderer = new ShapeRenderer();\r\n\r\n \/** Textures **\/\r\n private Texture bobTexture;\r\n private Texture blockTexture;\r\n\r\n private SpriteBatch spriteBatch;\r\n private boolean debug = false;\r\n private int width;\r\n private int height;\r\n private float ppuX; \/\/ pixels per unit on the X axis\r\n private float ppuY; \/\/ pixels per unit on the Y axis\r\n public void setSize (int w, int h) {\r\n  this.width = w;\r\n  this.height = h;\r\n  ppuX = (float)width \/ CAMERA_WIDTH;\r\n  ppuY = (float)height \/ CAMERA_HEIGHT;\r\n }\r\n\r\n public WorldRenderer(World world, boolean debug) {\r\n  this.world = world;\r\n  this.cam = new OrthographicCamera(CAMERA_WIDTH, CAMERA_HEIGHT);\r\n  this.cam.position.set(CAMERA_WIDTH \/ 2f, CAMERA_HEIGHT \/ 2f, 0);\r\n  this.cam.update();\r\n  this.debug = debug;\r\n  spriteBatch = new SpriteBatch();\r\n  loadTextures();\r\n }\r\n\r\n private void loadTextures() {\r\n  bobTexture = new  Texture(Gdx.files.internal(\"images\/bob_01.png\"));\r\n  blockTexture = new Texture(Gdx.files.internal(\"images\/block.png\"));\r\n }\r\n\r\n public void render() {\r\n  spriteBatch.begin();\r\n   drawBlocks();\r\n   drawBob();\r\n  spriteBatch.end();\r\n  if (debug)\r\n   drawDebug();\r\n }\r\n\r\n private void drawBlocks() {\r\n  for (Block block : world.getBlocks()) {\r\n   spriteBatch.draw(blockTexture, block.getPosition().x * ppuX, block.getPosition().y * ppuY, Block.SIZE * ppuX, Block.SIZE * ppuY);\r\n  }\r\n }\r\n\r\n private void drawBob() {\r\n  Bob bob = world.getBob();\r\n  spriteBatch.draw(bobTexture, bob.getPosition().x * ppuX, bob.getPosition().y * ppuY, Bob.SIZE * ppuX, Bob.SIZE * ppuY);\r\n }\r\n\r\n private void drawDebug() {\r\n  \/\/ render blocks\r\n  debugRenderer.setProjectionMatrix(cam.combined);\r\n  debugRenderer.begin(ShapeType.Rectangle);\r\n  for (Block block : world.getBlocks()) {\r\n   Rectangle rect = block.getBounds();\r\n   float x1 = block.getPosition().x + rect.x;\r\n   float y1 = block.getPosition().y + rect.y;\r\n   debugRenderer.setColor(new Color(1, 0, 0, 1));\r\n   debugRenderer.rect(x1, y1, rect.width, rect.height);\r\n  }\r\n  \/\/ render Bob\r\n  Bob bob = world.getBob();\r\n  Rectangle rect = bob.getBounds();\r\n  float x1 = bob.getPosition().x + rect.x;\r\n  float y1 = bob.getPosition().y + rect.y;\r\n  debugRenderer.setColor(new Color(0, 1, 0, 1));\r\n  debugRenderer.rect(x1, y1, rect.width, rect.height);\r\n  debugRenderer.end();\r\n }\r\n}\r\n<\/pre>\n
I\u2019ll point out the important lines:
\n#17<\/strong> & #18<\/strong> \u2013 Declared constants for the viewport\u2019s dimensions. It\u2019s used for the camera.
\n#27<\/strong> & #28<\/strong> \u2013 Declare the 2 textures that will be used for Bob and the blocks.
\n#30<\/strong> \u2013 The SpriteBatch<\/code> is declared. The SpriteBatch<\/code> takes care of all the texture mapping, displaying and so on for us.
\n#31<\/strong> \u2013 It\u2019s an attribute set in the constructor to know if we need to render the debug screen too or not. Remember, the debug rendering will just render the boxes for the game elements.
\n#32 \u2013 #35<\/strong> \u2013 these variables are necessary to correctly display the elements. The width<\/code> and height<\/code> hold the screen size in pixels and are passed in from the operating system at the resize<\/code> step. The ppuX<\/code> and ppuY<\/code> are the number of pixels per unit.
\nBecause we set the camera to have a view port of 10\u00d77 in world coordinates (meaning we can display 10 boxes horizontally and 7 boxes vertically) and we are dealing with pixels on the end result, we need to map those values to the actual pixel coordinates. We have chosen to work in a 480\u00d7320 resolution. That means that 480 pixels horizontally are equivalent of 10 units, meaning a unit will consists of 48 pixels on the screen.
\nIf we try to use the same unit for the height (48 pixels) we get 336 pixels (48 * 7 = 336). But we have only 320 pixels available and we want to show the whole 7 blocks height. Doing the same for the vertical part, we get that 1 unit vertically will be 320 \/ 7 = 45.71 pixels. We need to distort every image a bit to fit in our world.
\nIt\u2019s perfectly fine and OpenGL does that very easily. This happens when we change the aspect ratio on our TV set and sometimes the image gets elongated or squashed to fit everything on the screen, or we just simply choose the option to cut the image off but maintain the aspect ratio.
\nNote:<\/strong> we use float<\/code> for this, even if the screen resolution deals with ints, OpenGL prefers floats and so do we. OpenGL will work out the dimensions and where to place pixels.
\n#36<\/strong> \u2013 The setSize (int w, int h)<\/code> method will be called every time the screen is resized and it simply (re)calculates the units in pixels.
\n#43<\/strong> \u2013 The constructor changed just a little but it does very important things. It instantiates the SpriteBatch<\/code> and loads the textures (line #50<\/strong>).
\n#53<\/strong> \u2013 loadTextures()<\/code> does what it says: loads the textures. Look how incredibly simple it is. To create a texture, we need to pass in a file handler and it creates a texture out of it. The file handlers in libgdx are very helpful, as we don\u2019t differentiate between Android or deskop, we just specify that we want to use an internal<\/strong> file and it knows how to load it. Note that for the path we skipped assets<\/code> because assets<\/code> is used as a source directory, meaning everything from that directory gets copied into the root of the final bundle. So assets<\/code> acts as a root directory.
\n#58<\/strong> \u2013 the new render()<\/code> method contains just a few lines.
\n#59<\/strong> & #62<\/strong> \u2013 enclose a SpriteBatch<\/code> drawing block\/session. Every time we want to render images in OpenGL through the SpriteBatch<\/code> we have to call begin()<\/code>, draw our stuff and end()<\/code> when we\u2019re done. It is important to do that, otherwise it won\u2019t work. You can read more on SpriteBatch here<\/a>.
\n#60<\/strong> & #61<\/strong> \u2013 simply call 2 methods to render first the blocks and then Bob.
\n#63<\/strong> & #64<\/strong> \u2013 if debug<\/code> is enabled, call the method to render the boxes. The drawDebug<\/code> method was detailed previously.
\n#67 \u2013 #76<\/strong> \u2013 the drawBlocks<\/code> and drawBob<\/code> methods are similar. Each method calls the draw<\/code> method of the spriteBatch<\/code> with a texture. It is important to understand this.
\nThe first parameter is the texture (the image loaded from the disk).
\nThe second and third parameters tell the spriteBatch<\/code> where to display the image. Note that we use the conversion of coordinates from world coordinates to screen coordinates. Here is where the ppuX<\/code> and ppuY<\/code> are used. You can do the calculations by hand and see where the images get displayed. SpriteBatch<\/code> by default uses a coordinate system with the origin (0, 0) in the bottom left corner.   <\/p>\n
That\u2019s it. Just make sure you modify the GameScreen<\/code> class so the resize<\/code> gets called on the renderer and also to set the renderer\u2019s debug<\/code> to true<\/code>.
\nThe modified bits of GameScreen<\/code>  <\/p>\n
\/** ... omitted ... **\/\r\n public void show() {\r\n  world = new World();\r\n  renderer = new WorldRenderer(world, true);\r\n }\r\n\r\n public void resize(int width, int height) {\r\n  renderer.setSize(width, height);\r\n }\r\n\/** ... omitted ... **\/\r\n<\/pre>\n
Running the application should produce the following result:
\nwithout debug<\/p>\n
<\/a><\/div>\n
and with debug rendering<\/p>\n
<\/a><\/div>\n
Great! Give it a try on Android too and see how it looks.  <\/p>\n
Processing Input \u2013 on Desktop & Android<\/strong>  <\/p>\n
We\u2019ve come a long way but so far the world is static and nothing interesting is going on. To make it a game, we need to add input processing, to intercept keys and touches and create some action based on those.
\nThe control schema<\/strong> on the Desktop is very simple. The arrow<\/strong> keys will move Bob to the left and right, z<\/strong> will make Bob jump and x<\/strong> will fire the weapon. On Android we will have a different approach. We will designate some buttons for these functions and will lay it down on the screen and by touching the respective areas we will consider one of the keys pressed.   <\/p>\n
To follow the MVC pattern<\/strong>, we\u2019ll separate the class that controls Bob and the rest of the world from the model and view classes. Create the package net.obviam.starassault.controller<\/code> and all controllers will go there.
\nFor the start we will control Bob by key presses. To play the game we to track the status of 4 keys: move left, move right, jump and fire. Because we will use 2 types of input (keyboard and touch-screen), the actual events need to be fed into a processor that can trigger the actions.
\nEach action is triggered by an event.
\nThe move left<\/strong> action is triggered by the event when the left arrow <\/strong>key is pressed or a certain area of the screen is touched.
\nThe jump<\/strong> action is triggered when the z<\/strong> key is pressed and so on.
\nLet\u2019s create a very simple controller called WorldController<\/code>.
\nWorldController.java<\/code>  <\/p>\n
package net.obviam.starassault.controller;\r\n\r\nimport java.util.HashMap;\r\nimport java.util.Map;\r\nimport net.obviam.starassault.model.Bob;\r\nimport net.obviam.starassault.model.Bob.State;\r\nimport net.obviam.starassault.model.World;\r\n\r\npublic class WorldController {\r\n\r\n enum Keys {\r\n  LEFT, RIGHT, JUMP, FIRE\r\n }\r\n\r\n private World  world;\r\n private Bob  bob;\r\n\r\n static Map<Keys, Boolean> keys = new HashMap<WorldController.Keys, Boolean>();\r\n static {\r\n  keys.put(Keys.LEFT, false);\r\n  keys.put(Keys.RIGHT, false);\r\n  keys.put(Keys.JUMP, false);\r\n  keys.put(Keys.FIRE, false);\r\n };\r\n\r\n public WorldController(World world) {\r\n  this.world = world;\r\n  this.bob = world.getBob();\r\n }\r\n\r\n \/\/ ** Key presses and touches **************** \/\/\r\n\r\n public void leftPressed() {\r\n  keys.get(keys.put(Keys.LEFT, true));\r\n }\r\n\r\n public void rightPressed() {\r\n  keys.get(keys.put(Keys.RIGHT, true));\r\n }\r\n\r\n public void jumpPressed() {\r\n  keys.get(keys.put(Keys.JUMP, true));\r\n }\r\n\r\n public void firePressed() {\r\n  keys.get(keys.put(Keys.FIRE, false));\r\n }\r\n\r\n public void leftReleased() {\r\n  keys.get(keys.put(Keys.LEFT, false));\r\n }\r\n\r\n public void rightReleased() {\r\n  keys.get(keys.put(Keys.RIGHT, false));\r\n }\r\n\r\n public void jumpReleased() {\r\n  keys.get(keys.put(Keys.JUMP, false));\r\n }\r\n\r\n public void fireReleased() {\r\n  keys.get(keys.put(Keys.FIRE, false));\r\n }\r\n\r\n \/** The main update method **\/\r\n public void update(float delta) {\r\n  processInput();\r\n  bob.update(delta);\r\n }\r\n\r\n \/** Change Bob's state and parameters based on input controls **\/\r\n private void processInput() {\r\n  if (keys.get(Keys.LEFT)) {\r\n   \/\/ left is pressed\r\n   bob.setFacingLeft(true);\r\n   bob.setState(State.WALKING);\r\n   bob.getVelocity().x = -Bob.SPEED;\r\n  }\r\n  if (keys.get(Keys.RIGHT)) {\r\n   \/\/ left is pressed\r\n   bob.setFacingLeft(false);\r\n   bob.setState(State.WALKING);\r\n   bob.getVelocity().x = Bob.SPEED;\r\n  }\r\n  \/\/ need to check if both or none direction are pressed, then Bob is idle\r\n  if ((keys.get(Keys.LEFT) && keys.get(Keys.RIGHT)) ||\r\n    (!keys.get(Keys.LEFT) && !(keys.get(Keys.RIGHT)))) {\r\n   bob.setState(State.IDLE);\r\n   \/\/ acceleration is 0 on the x\r\n   bob.getAcceleration().x = 0;\r\n   \/\/ horizontal speed is 0\r\n   bob.getVelocity().x = 0;\r\n  }\r\n }\r\n}\r\n<\/pre>\n
#11 \u2013 #13<\/strong> \u2013 define an enum<\/code> for the actions Bob will perform. Each keypress\/touch can trigger one action.
\n#15<\/strong> \u2013 declare the World<\/code> that is in the game. We will be controlling the entities found in the world.
\n#16<\/strong> \u2013 declare Bob<\/code> as a private member and it is just a reference to Bob<\/code> in the game world, but we will need it as it\u2019s easier to refer to it than retrieving it every time we need him.
\n#18 \u2013 #24<\/strong> \u2013 it\u2019s a static HashMap<\/code> of the keys and their statuses. If the key is pressed, it\u2019s true<\/code>, false<\/code> otherwise. It is statically initialised. This map will be used in the controller\u2019s update<\/code> method to work out what to do with Bob.
\n#26<\/strong> \u2013 This is the constructor that takes the World<\/code> as the parameter and gets the reference to Bob as well.
\n#33 \u2013 #63<\/strong> \u2013 These methods are simple callbacks that are called whenever an action button was pressed or a touch on a designated area happened. These methods are the ones that get called from whatever input we\u2019re using. They simply set the the value of the respective pressed keys in the map. As you can see, the controller is a state machine too and its state is given by the keys<\/code> map.
\n#66 \u2013 #69<\/strong> \u2013 the update<\/code> method which gets called every cycle of the main loop. currently it does 2 things: 1 \u2013 processes the input and 2 \u2013 updates Bob. Bob has a dedicated update<\/code> method which we will see later.
\n#72 \u2013 #92<\/strong> \u2013 the processInput<\/code> method polls the keys<\/code> map for the keys and sets the values on Bob accordingly. For example lines #73 \u2013 #78 <\/strong> check if the key is pressed for the movement to the left and if so, then sets the facing for Bob to the left, his state to State.WALKING<\/code> and his velocity to Bob\u2019s speed but with a negative sign. The sign is because on the screen, left the negative direction (origin is in the bottom left and points to the right).
\nThe same thing for the right. There are some extra checks if both keys are pressed or none and in this case, Bob becomes State.IDLE<\/code> and his horizontal velocity will be 0<\/code>.   <\/p>\n
Let\u2019s see what changed in Bob.java<\/code>.   <\/p>\n
 public static final float SPEED = 4f; \/\/ unit per second\r\n\r\n public void setState(State newState) {\r\n  this.state = newState;\r\n }\r\n\r\n public void update(float delta) {\r\n  position.add(velocity.tmp().mul(delta));\r\n }\r\n<\/pre>\n
Just changed the SPEED<\/code> constant to 4 units (blocks) per second.
\nAlso added the setState<\/code> method because I forgot it before.
\nThe most interesting is the newly acquired update(float delta)<\/code> method, which is called from the WorldController<\/code>. This method simply updates Bob\u2019s position based on his velocity. For simplicity we do only that without checking his state and because the controller takes care to set the velocity for Bob according to his facing and state. We use vector math here and libgdx helps a lot.
\nWe simply add the distance travelled in delta<\/code> seconds to Bob\u2019s current position<\/code>. We use velocity.tmp()<\/code> because the tmp()<\/code> creates a new object with the same value as velocity<\/code> and we multiply that object\u2019s value with the elapsed time delta<\/code>. In Java we have to be careful on how we\u2019re using references as velocity<\/strong> and position<\/strong> are both Vector2<\/strong> objects. More on vectors here http:\/\/en.wikipedia.org\/wiki\/Euclidean_vector<\/a>.   <\/p>\n
We have almost everything, we just need to call the correct events when they happen. libgdx has an input processor which has a few callback methods. Because we are using the GameScreen<\/code> as the playing surface, it makes sense to use it as the input handler too. To do this, the GameScreen<\/code> will implement the libgdx InputProcessor<\/code>.
\nThe new GameScreen.java<\/code>  <\/p>\n
package net.obviam.starassault.screens;\r\n\r\nimport net.obviam.starassault.controller.WorldController;\r\nimport net.obviam.starassault.model.World;\r\nimport net.obviam.starassault.view.WorldRenderer;\r\n\r\nimport com.badlogic.gdx.Gdx;\r\nimport com.badlogic.gdx.Input.Keys;\r\nimport com.badlogic.gdx.InputProcessor;\r\nimport com.badlogic.gdx.Screen;\r\nimport com.badlogic.gdx.graphics.GL10;\r\n\r\npublic class GameScreen implements Screen, InputProcessor {\r\n\r\n private World    world;\r\n private WorldRenderer  renderer;\r\n private WorldController controller;\r\n\r\n private int width, height;\r\n\r\n @Override\r\n public void show() {\r\n  world = new World();\r\n  renderer = new WorldRenderer(world, false);\r\n  controller = new WorldController(world);\r\n  Gdx.input.setInputProcessor(this);\r\n }\r\n\r\n @Override\r\n public void render(float delta) {\r\n  Gdx.gl.glClearColor(0.1f, 0.1f, 0.1f, 1);\r\n  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);\r\n\r\n  controller.update(delta);\r\n  renderer.render();\r\n }\r\n\r\n @Override\r\n public void resize(int width, int height) {\r\n  renderer.setSize(width, height);\r\n  this.width = width;\r\n  this.height = height;\r\n }\r\n\r\n @Override\r\n public void hide() {\r\n  Gdx.input.setInputProcessor(null);\r\n }\r\n\r\n @Override\r\n public void pause() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void resume() {\r\n  \/\/ TODO Auto-generated method stub\r\n }\r\n\r\n @Override\r\n public void dispose() {\r\n  Gdx.input.setInputProcessor(null);\r\n }\r\n\r\n \/\/ * InputProcessor methods ***************************\/\/\r\n\r\n @Override\r\n public boolean keyDown(int keycode) {\r\n  if (keycode == Keys.LEFT)\r\n   controller.leftPressed();\r\n  if (keycode == Keys.RIGHT)\r\n   controller.rightPressed();\r\n  if (keycode == Keys.Z)\r\n   controller.jumpPressed();\r\n  if (keycode == Keys.X)\r\n   controller.firePressed();\r\n  return true;\r\n }\r\n\r\n @Override\r\n public boolean keyUp(int keycode) {\r\n  if (keycode == Keys.LEFT)\r\n   controller.leftReleased();\r\n  if (keycode == Keys.RIGHT)\r\n   controller.rightReleased();\r\n  if (keycode == Keys.Z)\r\n   controller.jumpReleased();\r\n  if (keycode == Keys.X)\r\n   controller.fireReleased();\r\n  return true;\r\n }\r\n\r\n @Override\r\n public boolean keyTyped(char character) {\r\n  \/\/ TODO Auto-generated method stub\r\n  return false;\r\n }\r\n\r\n @Override\r\n public boolean touchDown(int x, int y, int pointer, int button) {\r\n  if (x < width \/ 2 && y > height \/ 2) {\r\n   controller.leftPressed();\r\n  }\r\n  if (x > width \/ 2 && y > height \/ 2) {\r\n   controller.rightPressed();\r\n  }\r\n  return true;\r\n }\r\n\r\n @Override\r\n public boolean touchUp(int x, int y, int pointer, int button) {\r\n  if (x < width \/ 2 && y > height \/ 2) {\r\n   controller.leftReleased();\r\n  }\r\n  if (x > width \/ 2 && y > height \/ 2) {\r\n   controller.rightReleased();\r\n  }\r\n  return true;\r\n }\r\n\r\n @Override\r\n public boolean touchDragged(int x, int y, int pointer) {\r\n  \/\/ TODO Auto-generated method stub\r\n  return false;\r\n }\r\n\r\n @Override\r\n public boolean touchMoved(int x, int y) {\r\n  \/\/ TODO Auto-generated method stub\r\n  return false;\r\n }\r\n\r\n @Override\r\n public boolean scrolled(int amount) {\r\n  \/\/ TODO Auto-generated method stub\r\n  return false;\r\n }\r\n}\r\n<\/pre>\n
The changes:
\n#13<\/strong> \u2013 the class implements the InputProcessor<\/code>
\n#19<\/strong> \u2013 the width and height of the screen used by the Android touch events.
\n#25<\/strong> \u2013 instantiate the WorldController<\/code> with the world.
\n#26<\/strong> \u2013 set the this screen as the current input processor for the the application. libgdx treats this as a global input processor so each screen has to set a different one if they don\u2019t share the same. In this case the screen itself handles the input.
\n#47 & #62<\/strong> \u2013 we set the active global input processor to null<\/code> just for cleanup.
\n#68<\/strong> \u2013 the method keyDown(int keycode)<\/code> is triggered whenever a key is pressed on the physical keyboard. The parameter keycode<\/code> is the value of the pressed key and this way we can poll it and in case it\u2019s a desired key, do something. This is exactly what\u2019s happening. Based on the keys we want, we pass on the event to the controller. The method also returns true<\/code> to let the input processor know that the input was handled.
\n#81<\/strong> \u2013 the keyUp<\/code> is the exact inverse of the keyDown<\/code> method. When the key is released, it simply delegates to the WorldController<\/code>.
\n#111 \u2013 #118<\/strong> \u2013 this is where it gets interesting. This happens only on touch-screens and the coordinates are passed in along with the pointer and button. The pointer is for multi-touch and represents the id of the touch it captures.
\nThe controls are utterly simple and are made just for simple demo purposes. The screen is divided into 4 and if the touch falls int to lower left quadrant, it is treated as a move left action trigger and passes the same event as the desktop to the controller<\/code>.
\nExactly the same thing for the touchUp.   <\/p>\n
Warning:<\/strong> \u2013 This is very buggy and unreliable, as the touchDragged is not implemented and whenever the finger is dragged across quadrants it will mess up things. This will be fixed of course, the purpose is to demonstrate the multiple hardware inputs and how to tie them together.  <\/p>\n
Running the application on both desktop and Android will demonstrate the controls. On desktop the arrow keys and on Android by touching the lower corners of the screen will move Bob.
\nOn desktop you will notice that using the mouse to simulate touches will also work. This is because  touchXXX<\/code> also handles mouse input on desktop. To fix this add the following line to the beginning of  touchDown<\/code> and  touchUp<\/code> methods:  <\/p>\n
  if (!Gdx.app.getType().equals(ApplicationType.Android))\r\n   return false;\r\n<\/pre>\n
This returns false<\/code> if the application is not Android and does not execute the rest of the method. Remember that false<\/code> means that the input was not handled.<\/p>\n
<\/a><\/div>\n
As we can see, Bob has moved. <\/p>\n
Short Recap<\/strong>  <\/p>\n
So far we have covered quite a bit of game development and we already have something to show.
\nGradually we have introduced working pieces into our app and step by step we have achieved something.   <\/p>\n
We still need to add:   <\/p>\n