Loading Screen
1. Loading Screen
2. Starting Off
3. Updating the Loading Screen
4. Post Loading Screen
5. Your Changes
1) Loading Screen
The first screen a player sees when they start your game is the Loading Screen. This is the screen that will typically show a graphic of the game and start loading the art and sound assets for the game. This screen often has some type of loading bar to show you how close the full game is to being completely loaded. In this tutorial, we'll build a loading screen for the basic game that you can use in other projects as well.
2) Starting Off
The first thing we'll do in this class, is set some basic vars and objects. Here's the constructor for the Loading Screen:
public LoadingScreen(final BasicGame game) {
this.game = game;
assetMgr = game.assetMgr;
this.bar = game.bar;
camera = new OrthographicCamera();
camera.setToOrtho(false, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
titleImage = game.assetMgr.getImg("badlogic.jpg");
// color values for the screen background
red = 74;
green = 137;
blue = 242;
bar.setLocation(200, 50);
// delay for after the lifebar fills. Otherwise, it only shows a full lifebar for 1 frame
loadingDoneDelay = 500;
loadingDoneStartTime = 0;
startedLoading = false;
renderer = new Renderer(game);
} // END loading screen
First off we load game objects into local var for ease of retrieval. Then we set the camera for viewing our game. Next we use the asset manager to load the image we'd like to display on the loading screen. Then we set the values for the color background on this screen. Finally, we initialize a loading bar and set some vars we'll use later in this class.
3) Updating the Loading Screen
This is where the "meat" of this class is. The update method is called continuously, and this is where the assets for the game are loaded. Note that this tutorial assumes you've already gone through the tutorial on using the Asset Manager. If you haven't done that yet, you should go through it now.
Okay, so now that you have a firm grasp of the Asset Manager we can go through the update method. The first thing we'll do is queue up the assets to be loaded into the game. Here's the first part of that code:
if(!startedLoading) {
startedLoading = true;
assetMgr.loadImages();
assetMgr.loadNums();
assetMgr.loadSound();
What this does is check to see if we've started loading the assets. If we haven't started loading them yet, we change the flag (so we only execute this code once) and then have the assetMgr queue the images, number images, and sounds.
The next time we hit this update method the startedLoading var will be true (as we just set it in the code above) and we'll fall into the else clause, which you can see below:
} else {
// update the loading of assets until it is done
assetMgr.manager.update();
bar.update(assetMgr.manager.getProgress());
// if we've finished loading but haven't displayed the full bar, set the startTime var
if(assetMgr.manager.getProgress() == 1 && loadingDoneStartTime == 0f)
loadingDoneStartTime = TimeUtils.millis();
// once we've finished loading delay so the full bar is on the screen for a bit of time
if(assetMgr.manager.getProgress() == 1 &&
TimeUtils.millis() - loadingDoneStartTime > loadingDoneDelay) {
goToPostLoadingScreen();
} // END if
} // END else
The first thing that happens is that the asset manager continues loading the assets, which is what happens on the manager.update line. Then we update the visual percent bar that I used to give a visual representation of how much how the assets have loaded and how fast they are loading. The bar isn't strictly necessary, but if you'd like to use it you can see my tutorial on how to do the bar here.
Next, we check the progress of the load with the following code:
if(assetMgr.manager.getProgress() == 1 && loadingDoneStartTime == 0f)
loadingDoneStartTime = TimeUtils.millis();
What this does is check to see if the assets have fully loaded. If they have fully loaded and we haven't set the var for loading done, we set that var. The next if statement is below:
if(assetMgr.manager.getProgress() == 1 &&
TimeUtils.millis() - loadingDoneStartTime > loadingDoneDelay) {
goToPostLoadingScreen();
This code again checks to see if the assets have completed loading. If they have and The amount of time we set earlier has elapsed after the loading has completed, then we go to the "Post Loading Screen". We do this because when this code isn't in the method, the fully loaded percent bar is only displayed for 1 frame and then goes away. So you only really can see the bar "almost full" before is vanishes. This code keeps the bar on the screen for a half a second after it completely fills so you can see the bar full when it has finished.
4) Post Loading Screen
Once all of the assets are loaded, then we'll go to the "Post Loading Screen". This screen is whatever screen you want to the user to see when all of your art and sounds are loaded. In many games this is some type of selection screen to choose an avatar, play style, etc.
So here we first load the assets in the game into vars we can use:
game.man = new Man(assetMgr, 0, 0);
game.inputs = new Inputs();
game.gDigits = new GraphicDigits(assetMgr);
game.scoreArea = new ScoreArea(assetMgr, game.gDigits);
These lines initialize the major objects used in the game and will change based on what you have in your game. The next line will basically be the same:
game.setScreen(new PreGameScreen(game));
This line changes the current screen. So basically once the time has elapsed and the assets have loaded we go to the screen specified here.
5) Your Changes
For the most part, you can use this Loading Screen as is for your games. The only part that really needs to be changed is the method "goToPostLoadingScreen" as you need to specify your objects here and need to specify what screen you'd like the game to go to from here.