Creating 2D Car Racing Game in Android: 3. Adding Road Track Texture

In the previous part, you have seen how we have created OpenGL drawing surface. In this part you will learn how to load texture and display it on screen.
Make sure your all of the textures needs to be a derivative of 128 x 128. that means power of 2. i.e. 64×64, 128×128, 256 x 256, ….. as well.
Also your all textures need to be under res>drawable-nodpi folder. If drawable-nodpi folder is not exist in resource folder then you can crate it.
So let’s start…..!


Topics Covered

Understanding Vertices, Indices and Textures


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

To map the texture you will need array to hold mapping coordinates of texture, an array to hold the coordinates of vertices, an array to hold indices of the vertices and an array of pointers to texture.

Creating 2D Car Racing Game in Android

Look at the brief about
Vertices: The vertices array list is the series of points which represent the x, y and z values of the each corner of the square by row format.
Indices: The indices array holds the definition of the face of the square. The square is broken in 2 faces. And the faces value represents in counter-clockwise order.
Textures: The textures array represents where the image corners will line up with the square and how it will cover it.

Creating Texture Class


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Create a new class name Texture.java. In this class we will load the image as texture and return it to the render by calling loadTexture() method.


Let’s define and create arrays to hold texture mapping coordinates information.

Now create constructor with texture list parameter and define buffer to populate with appropriate array.

Creating loadTexture() method


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Now define the loadTexture() method. The load texture will take the image pointer and load it into stream and then stream will load as texture into OpenGL. We will map the texture on vertices during drawing process.

Map the Texture


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Now time to write the method to draw the texture on the vertices. The draw() method will call each time when you needed and the loadTexture() method will call once when game will initialize.


Complete Texture.java class

Creating Road Texture class


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Before creating Road texture class. we need to import/copy the Road texture into res/drawable-nodpi folder.
road.png
Road

Now create the Global class to define global variables, constants and methods. Define some variables and constants which we want later in other classes.
Global.java


Open the MainMenu.java and add below code snippet under onCreate() method. So we can access application context from anywhere.

Now create the road class name TexRoad and extend it by Texture class which you created earlier.

Loading Road Texture on Screen


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3962) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Open the GameRenderer.java. Instantiate TexRoad class as road.


Add the below code under onSurfaceCreated() method to load Road texture.

Now create the DrawRoad() method to draw road by defining its scale, width height and the position.

And finally draw the road on each call of onDrawFrame() method of the renderer.
Run the code and see the output. Creating 2D Car Racing Game in Android

In the next part we will learn how to load Player Car.

Download Part 3 Source

9 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *