Creating 2D Car Racing Game in Android: 1. Setting up Game Startup

In this series, you will learn how to create 2D car racing game using OpenGL ES in Android, This part covers how to make game startup screen.


Topics Covered

About OpenGL ES


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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

OpenGL ES stands for Open Graphics Language for Embedded Systems. It is a subset of Computer graphics rendering API. Which is used for rendering 2D and 3D computer graphics. It is designed for embedded systems. More details…

Game Brief


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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Road Racer is the simple 2D racing game playing from top view.Like “Zero Road Race” or “High Speed Chase”

games

In this series you will learn, creating game setup, placing background (road) texture, adding player(car), assign acceleration, break controls to the car and finally adding background music to the game.

Creating New Android Project


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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Create New Android Project named “RoadRacer” and set the min sdk 8, targeted sdk API 14 and compile with API 14.

Creating 2D Car Racing Game

Set the main activity class name as “MainMenu.java” and its layout name as “main_menu.xml”.

Creating 2D Car racing game

Creating Game Start Screen - Main Menu


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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

To create Main Menu screen, we need some racing cars kind of background graphics and in the same design style start button graphics. So lets import some graphics in to the project.Drag and copy the “menu_bg.png”, start_btn_pressed.png” and “start_btn.png” into ‘res>drawable-hdpi’ folder provided with the article.

Now open main_menu.xml from the layout folder and set layout as a RelativeLayout. Now set the background image of the main menu using ImageView and set its

ource attribute as menu_bg.png. and set height width to “match_parent”. Also the background image must be scaled as per phone screen height width. so set scaleType attribute as “fitXY”. see the xml below.

Creating 'Start Race' button


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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

While pressed on “Start Race” button, the button state needs to be changed normal state to pressed state as we have already imported two button stages graphics.

Creating 2D Car Racing Game

Creating 2D Car Racing Game

To setup the states of the button, we need to create new xml name “start_btn_selector.xml” under res>drawable-hdpi. Now create two item nodes for the button states. Use the “start_btn_pressed.png” for pressed stage and “start_btn.png” for normal state of the button.

see the xml below.

Now setup ImageButton View for Start race button and set its rource attribute as “start_btn_selector” which we have created above. And position it to the bottom of the screen.

Complete layout xml

Now set the MainMenu Activity orientation as “Portrait” under Application node in AndroidManifest.xml. see below….

And Run the App…!

Creating 2D Car Racing Game in Android

If you notice, the start button having some kind of transparent white background in the above screenshot. To remove it, we need to write something in java file.

So lets open MainMenu.java. Now cast the ImageButton view by id and set its background alpha as 0.

No run the App again…!

Creating 2D Car Racing Game in Android

The transperent white background goes away.

Jump to Game 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:3978) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Now we need the screen for game play. So lets create new Activity named “GameActiviy.java” and extends it by Activiy class. See the code below.

Complete GameActivity.java

Add activity into AndroidManifest.xml under Application node and set orientation as “Portrait”.

Now in the MainMenu.java, set onClickListener to start_btn and under onClick method assign Intent to start GameActivity screen.

Complete MainMenu.java

In the next part of this series, we will learn how to setup Game Play OpenGL Drawing surface.

Download Part 1 Source

1 reply

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 *