Creating 2D Car Racing Game in Android: 4. Adding Player Car and Controller Graphics

In the part 3 how we have added road texture on OpenGL surface, In this part we will see how we to add more graphics with their scale and position setups on OpenGL SurfaceView.
You can continue from this part by download project file from part 3 source and import it in eclipse.
So let’s start adding graphics.


Topics Covered

Importing player car and controller graphics


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 add the Player Car and Controllers, first we need to import graphics into the our project. So, drag the all needed graphics into res>drawable-nodpi folder. i.e. player_car.png, accelerator.png and breaks.png.

Creating 2D Car Racing Game in Android
Creating 2D Car Racing Game in Android
Creating 2D Car Racing Game in Android

Creating Player Car 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 the player car class named TexCar and extend it by Texture class. Now Define its texture[] array and set the values of the array.

Adding Player Car on GLSurfaceView


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 Global.java from project and define a constant for Player Car Graphics resource.


If you noticed, to define width and height we are using scalef() method of GL10 class. That means if I wanted to define perfect square on screen using scalef(), how I can do this.
Let’s say a rectangle has scale x is 0.5 and scale y is 0.5 of the screen. Because of our phones and tablets screens are not square. In that case we well get the result as rectangle even we input same value to the both side of the rectangle to get perfect square. Because it will assign height and width by 50% of the screen. See the figure below.

Creating 2D Car Racing Game in Android

This means if we will try to draw the square image(128 x 128) on screen by passing same scale values of x and y and we will get the result as stretched image.
To solve this issue we have to write some math. So define the method getProportionateHeight() into Global.java and the logic to get proportionate height.


Now open the GameRenderer.java and Define variable car as TexCar.

Add following code snippet under onSurfaceCreated() method to load Car texture.

Now create DrawCar() function.

Notice the fourth line of code. We have called Global.getProportionateHeight(0.15f) method from Global class to get proportionate height of the car by passing y scale value of car texture as x scale value.
Now just call DrawCar() function into onDrawFrame() Class
And Run the project. Creating 2D Car Racing Game in Android

You will find the car graphics displayed properly.

Deciding Controllers Placement Position


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 placing Player controllers to control car we have to decide position of controls. In this scenario we have two controllers. i.e. Brake and Accelerator. But we can’t use these two controller by single hand/finger. For that we have to hold the phone by both hands and use the controllers by both hands thumbs.

Looking to the road background the position of the Brake will be Bottom right of the screen and the For Accelerator the Bottom Left corner will be better.

Creating Car Brakes and Accelerator 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

Now create the Car Brakes and Accelerator Class same as Car Class.
Because of the similar structure of the both class we will make on one class for both. So create class name TexController.
TexController.java

Adding Car Brakes and Accelerator on GLSurfaceView


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 graphics constants for Brakes and Accelerator Graphics under Global.java
Global.java


Go to the GameRenderer.java and Define two variables for Brakes and Accelerator as TexController

Now add following code snippets to load Brakes and Accelerator graphics under onSurfaceCraeted() function.

Create DrawBreaks() and DrawAccel() functions.

And finally call the above defined function into onDrawFrame() function.
Run the project and see the result. Creating 2D Car Racing Game in Android

Download Part 4 Source

3 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 *