Karim Amin's Blog

Yeah I complain. So what!

LibGdx Tutorial #3 Setting up a testing class for our tutorials »« LibGDX Tutorial #1

LibGDX Tutorial #2 My first sample app

Hi, welcome to Tutorial #2 of my LibGdx tutorials. We are going to continue from where we left off in tutorial #1 and actually draw something on the screen. In this tutorial, we will add functionality to the HelloLibGdx application so that whenever the mouse is clicked or the screen touched, the message “Hello from LibGdx” will be displayed.

If you have not done so, either run through tutorial #1 or grab the code from here.  Ready?  Let’s begin.

 

I. Reviewing the main Application Listener class

If you go into the java project and open up the HelloLibGDX class, you will see the following functions (may not be in this  order):

  • public void create() {}
  • public void dispose() {}
  • public void pause() {}
  • public void resize() {}
  • public void resume() {}
  • public void render() {}
Their functions are pretty obvious.  The create function is called when the application listener is created.  Dispose called when it’s destroyed.  Pause is called when your application is paused.  Resize and resume are called when you’re application is resized or resumed from a paused state.  The final function render is where all the work of your application is done.  It’s called when it’s time to display something on the screen.
So for this application, we are going to add some code to the render function.
First, let’s create some member variables and constants to hold information about the text we’re going to output.  Place these a the top of your class.
	private static final String textToDisplay = "Hello From LibGdx";
	private SpriteBatch spriteBatch;
	private BitmapFont font;
	private float textWidth;
	private float textHeight;
	private Vector<Point> v;
And inside the create function add
		spriteBatch  = new SpriteBatch();
		font = new BitmapFont();
		textWidth = font.getBounds(textToDisplay).width;
		textHeight = font.getBounds(textToDisplay).height;
		v = new Vector<Point>();
The first line is just a a string constant that has the text we wish to output.
The next line creates a “SpriteBatch” object.  This object is used to batch multiple “draw” calls into a single draw call.  Calling draw on something is expensive (in terms of time) and the less you call this function, the better.
The next line creates a BitmapFont object.  Bitmap fonts is an old technique for rendering text on the screen for games.  Typically, an image that consists of rows of characters (called a glyph)  is read by the BitmapFont object and outputs the characters based off the text passed to it.  The resulting graphic be scaled, flipped and colored.
The next two lines calculate the width and height of our text in pixels beforehand.  We don’t want to do this every time our “render” function is called.
Finally we need to store the list of points touched so that we can redraw the text each time the screen is “refreshed”.  When the screen is refreshed, the buffer is cleared out which removes everything that you see.  So we store the points in a list so that we can later draw them again.
Next, we want to add a simple nested class to hold our points
	class Point {
		public int x;
		public int y;
		public Point(int x, int y) {
			this.x = x;
			this.y = y;
		}
	}
With all that set, we’re ready to draw our text.  So let’s modify the “render” function to output our text.

First we want to determine if the mouse button is held down (if a desktop application) or if a finger is touching the screen (android application).    We do this with a call to

		Gdx.input.isTouched();
This function checks to see if either the mouse has been clicked on the screen or if a finger has touched the screen.  If so, we need to grab the coordinates of the screen that was touched.  We do this by calling
Gdx.input.getX() for  the X coordinates
Gdx.input.getY() for the Y coordinates
Both these functions return an integer for the coordinates.
Once we get these two values, all we do is add the point to our list of points by
			positions.add(new Point(x,y));
After this, we start our drawing.  We first want to clear the screen.  The next two calls handle this.
		Gdx.graphics.getGL10().glClearColor(0, 0, 0, 0);
		Gdx.graphics.getGL10().glClear(Gdx.gl10.GL_COLOR_BUFFER_BIT);
The first sets what color we want to set the clear to be using RGBA notation.  The following function actually clears the screen to that particular color.  In our example, the screen is cleared to the color black (You’re left with just a black screen).
Following that, we need to output our text.
First, we tell sprite batch to start “recording” our draw calls.  We do this by specifying.
		spriteBatch.begin();
Then we need to loop through our list of points and draw them to the sprite batch.
		for (int i = 0; i < positions.size(); i++) {
			font.draw(spriteBatch, textToDisplay, positions.get(i).x - textWidth/2, Gdx.graphics.getHeight() - positions.get(i).y + textHeight / 2);
		}
One thing to note is that our coordinate system starts in the upper left corner and ends in the bottom right for the touch events but but for drawing we get the normal coord. system (lower left) starting to top right (end).  Thus we fix this by subtracting the y coordinate from the height of the window.  To make sure our text is centered exactly, we shift the x coordinates to the left by half the text width and we add (cause the system is in reverse) half the height.
Finally, we tell the sprite batch to render it’s buffer with a call to
		spriteBatch.end();
And that’s it!  If you run your program, you should see this whenever you click the mouse or touch the screen.

Figure 2-1

 

As usual, the project files for this tutorial are attached here.  Again, I did not store the libgdx jars in the zip to cut down on space.


October 8, 2011 at 3:26 pm