In this chapter, we are going to clear up some common problems that can occur when you are working on your game's splash screen. The splash screen, sometimes referred to as a title card, is the first thing the player sees when starting your game.
The splash screen can consist of one, or many, different images. These images are typically displayed when some background setup processes are running, and can represent anything from the development houses that worked on the game to the distribution company or agent.
Unless you are creating a game with no player setup required, you can use Android to load these splash screens in the main activity thread, before the game thread even begins. The reason for this is simple. Most games prompt the player with a menu screen before the game starts. The menu screen can have options for anything from starting the game, to review scores, to logging into a web-based service. If your game will include this kind of menu system, you will want to start the menu in the main activity thread. You can then let the menu spawn the game thread when the player chooses to start the game.
The solutions presented in this chapter assume that you will be launching the game's splash screen(s) in the main activity thread, not the game thread. Also, as covered in Chapter 2, this splash screen and menu screen examples will be in landscape mode. Why make a distinction about this? If you launch the splash screen in the main game thread, you could use OpenGL ES to display the screen, and then use your game code to track what the player is doing in the menu. While completely acceptable, this solution is a little overkill. It is much easier to code, and to keep track of, a solution where the splash screen is loaded and taken care of within the main activity thread.
Problem
You are unable to display the name of the game while the game is loading in the background.
Solution
Use a splash screen to show information about the game while you perform other game-related functions in the background. The splash screen is generally an image that is displayed when your main Android activity is loaded. This means that you will load the image in the main activity thread, and start your game in a second thread.
How It Works
This solution is achieved in three easy steps. You will need to create a layout that displays the image you want to use as your splash screen. Then you will need to create a second Activity within your application that will represent your game. Finally, you will need to create a postDelayed() Handler()that will execute your background code and then start up your game thread when it is finished.
The end result is a game flow that follows this path: the main activity is started when the player launches your game, then a splash screen appears while your game does some housekeeping work in the background, and finally, when this housekeeping is complete, the activity launches directly into the game.
First create a layout that displays your splash screen image. The instructions for creating this layout were explained in Chapter 2. The code for the activity_main.xmlis shown in Listing 3-1. For a further explanation of what the code means, please see Chapter 2.
Listing 3-1. activity_main.xml
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="@string/splash_screen_description"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="@drawable/titlescreen" />
</RelativeLayout>
The image that is being displayed in the activity_main.xml file is show in Figure 3-1.
Figure 3-1. The game’s splash screen
Create a New Activity
Now that your layout has been created, you need to create a new Activity within your application that will represent your game’s main activity. The basic code for an Activity is shown in Listing 3-2.
Listing 3-2. The Basic Activity Code
public class SBGGame extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Place your game code here
}
}
Right now you have the main Activity (with a layout that represents your splash screen), and you have the Activity that represents your game’s main launching point. How to you get from the main Activity to the game Activity?
You are going to use a Handler() in the main Activity to delay the launch of the game Activity.
Create a postDelayed() Handler()
The Handler() has a method named postDelayed() that can be used to delay the start of another Activity intent. All of the housekeeping work that you need to perform can be done within the Handler(). Listings 3-3 through 3-6 will show you how.
In your main Activity, create a constant named GAME_THREAD_DELAYand set it to a value of 999000, as shown in Listing 3-3. This will represent a delay of 999 seconds before your game Activity is launched.
Listing 3-3. A Delayed Activity
public class MainActivity extends Activity {
static int GAME_THREAD_DELAY = 999000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Now create a new instance of Handler(). Use the postDelayed() method to delay the launch of a new thread after the GAME_THREAD_DELAY has expired, as shown in Listing 3-4.
Listing 3-4. Using postDelayed
public class MainActivity extends Activity {
static int GAME_THREAD_DELAY = 999000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
}
}, GAME_THREAD_DELAY);
}
}
Now place all of the housekeeping code, the code to launch the game Activity, and the code to kill the main Activity in the run() method of the new runnable object (see Listing 3-5).
Listing 3-5. Launching a New Activity
public class MainActivity extends Activity {
static int GAME_THREAD_DELAY = 999000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent gameMain = new Intent(MainActivity.this, SBGGame.class);
MainActivity.this.startActivity(gameMain);
//Perform all of your housekeeping activities here
MainActivity.this.finish();
}
}, GAME_THREAD_DELAY);
}
}
Finally, after all of the housekeeping activities are completed, change the GAME_THREAD_DELAY from 999 seconds to 1 second, forcing it to launch the game Activity, as shown in Listing 3-6. This gives you 999 seconds to perform all of your game’s preloading. Then, when you are finished preloading the game, you simply set the delay to 1 second to force launch the game Activity.
Listing 3-6. Shortening the Delay Timer
public class MainActivity extends Activity {
static int GAME_THREAD_DELAY = 999000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Thread() {
@Override
public void run() {
Intent gameMain = new Intent(MainActivity.this, SBGGame.class);
MainActivity.this.startActivity(gameMain);
//Perform all of your housekeeping activities here
GAME_THREAD_DELAY = 1000;
MainActivity.this.finish();
}
}, GAME_THREAD_DELAY);
}
}
3.2 Loading Multiple Images During a Splash Screen
Problem
You want to display multiple images in the splash screen while the game loads in the background.
Solution
Create a second layout, with a second splash screen image for the main Activity.
How It Works
This solution is going to build off of the solution to the last problem. In Problem 3.1, you created a Handler() in the main Activity. The Handler() performed some background tasks and then launched the game Activity when it was finished.
You are going to add a second layout to that solution that will be used to display a second image, or splash screen. The image that you will display in your second splash screen is shown in Figure 3-2.
Figure 3-2. The game’s second splash screen
The first step is to create a new layout named second_image that will display the image. You can copy the xml from your first layout (Listing 3-1) to make things easy for yourself (presented here again for reference).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="@string/splash_screen_two_description"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="@drawable/credits" />
</RelativeLayout>
Now, modify your main Activity to show use this layout, as shown in Listing 3-7.
Listing 3-7. Loading a New Layout
public class MainActivity extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SBGVars.context = this;
new Handler().postDelayed(new Thread() {
@Override
public void run() {
setContentView(R.layout.second_image);
}
}
}
When the Handler() delay expires, it will now display the second splash screen shown in Figure 3-2.
3.3 Fading In to and Out of a Splash Screen
Problem
The game's first splash screen should fade into the game’s menu for a more subtle opening.
Solution
Use animation and the overridePendingTransition()to fade from one splash screen image to another.
How It Works
For this solution to work correctly, you need to start with the menu screen created in the Chapter 2.
What you want to do in this solution is create an animation that will fade from the main Activity’s splash screen to the menu screen. This is not a hard task to accomplish; it requires the use of one method and a few layout files.
First, in the res/layout folder, create two new layout files; name one fadein.xml and the other fadeout.xml. The first will represent the layout for the animation that will fade an image into the display and the second will represent the layout for the animation that will fade an image out of the screen.
The code for the fadein.xml file should appear as shown in Listing 3-8.
Listing 3-8. fadein.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />
What this code says is that using the animation interpolator specified, move from a completely transparent (android:fromAlpha="0.0") to a completely opaque (android:toAlpha="1.0") state in one second (android:duration="1000").
In the fadeout.xml file, you are going to do roughly the same transition, only rather than going from transparent to opaque, you will go from opaque to transparent, as shown in Listing 3-9.
Listing 3-9. fadeout.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000" />
Now, within the Handler()that was explained in both Solutions 3.1 and 3.2, add a call to overridePendingTransition(), passing it a pointer to both the fadein.xml and fadeout.xml (see Listing 3-10).
Listing 3-10. Using overridePendingTransition()
public class MainActivity extends Activity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
new Handler().postDelayed(new Thread() {
@Override
public void run() {
Intent mainMenu = new Intent(MainActivity.this, SBGMenuScreen.class);
MainActivity.this.startActivity(mainMenu);
//Perform background tasks
GAME_THREAD_DELAY = 1000;
MainActivity.this.finish();
overridePendingTransition(R.layout.fadein,R.layout.fadeout);
}
}, GAME_THREAD_DELAY);
}
}
When you start your game, you should now see the first splash screen load up, followed by a smooth second fade transition to the menu screen.