Full LibGDX Game Tutorial – Loading Screen

Sharing is caring!

Full LibGDX Game Tutorial – Loading Screen

Welcome to part 8 of our Full LibGDX Game Tutorial. This part will focus on the using the texture packer to pack all your images into an atlas and creating a loading screen. If you haven’t seen the earlier parts of this tutorial I advise you to start at Full LibGDX Game Tutorial – Project setup as this tutorial continues from these earlier parts. For those of you who have come from part 7, you can continue on.

This is what we hope to achieve by the end of part 8. Note the loading bar loads really fast as we’re not loading many sounds, images or music yet.

[embedyt] http://www.youtube.com/watch?v=VxRODvLh1ME[/embedyt]

Texture Packer

The first thing we’re going to go over is the texture packer and how to use it to pack all your textures. For a quick guide on the texture pack and the settings I use you can visit the texture packer guide. We are going to divide our images into two sets. One for the game and one for the loading screen. This means we can quickly load the few images for our loading screen then use those images in our loading screen to show the progress of the loading for the game images.

The first thing you want to do is create this folder structure:

This will keep your loading images and game images separate as your loading images will be updated a lot less than your game images and you need your loading images separate so they load fast. Now you have this folder structure add all your current game images to the game folder. You can download the folder structure with images from here. If you haven’t already got the texture packer you can get it from www.aurelienribon.com and once downloaded open it up.

Press the … button and navigate to the input/loading folder and click open to set the input folder. Now do the same for the output directory and select the output folder. Next copy the settings from the image above. Since we will be adding images later and we will want to have all these settings again we should save these settings. This is done with the save project button on the top. So select “save project” and save the file as game.project in the output folder. Now anytime you need to add images to your atlas you can put the images in the input/game folder and load the game.project file and all your settings will be populated and all you will have to do is click Pack’em all to create the new files. Do the same for your loading images so you will have 2 projects and Pack’em all for both.

Now copy the game.atlas and game.png files and place them in your android assets/images folder. Now add the loading.atlas, loading.png and loading2.png to your assets/images folder and we’re ready to update our AssetManager to load these files.

Here we have replaced the old loading of images in our asset manager with the new versions that use the TextureAtlas class instead of the old texture class.

Loading Screen

Now we need to update our loading screen to load these images. Put the following code into your show method of the loading screen to load them when the screen is first shown.

Now we need a SpriteBatch to draw our images to the loading screen so add this to the constructor:

Here we also set the blend function replaced the default blend function which overwrites previous images with a new blend function which adds the two images together. Before we can start drawing images to the screen we need some code to differentiate between the stages of loading. Update your render method in the loading screen to the following:

This code will need the queue methods added to the assetManager but can be left empty for now as there are no fonts or particle effects to load yet. e.g:

We will also need the following fields added to our loading screen to make it work:

We can move on to displaying a cool animation bar for our loading progress. If you’ve looked at the images we packed you will have noticed a folder called flames that has 16 images. This is a flame animation we will use to overlay over our flame dash image to display the loading progress. First, we add the code to load the animation:

We have just created a new animation of our flames. The first parameter is the duration of the frame, the second is the frame images and the third is the play mode. Now we have our animation we want to draw a dash and the animation over it for each stage that we complete of our loading stages. For that, we need a new method:

This method takes the stage value and the current frame value. The stage value is the current stage the of the loading process we are in. The second one is the current frame of the animation. As an animation is made up of a lot of individual images we need to tell it which one should be displayed. Then we loop through the drawing process for each stage and use the i variable to increase the horizontal position by 50 per stage. This should give use a line of dashes and animations like the video at the start of this tutorial. Now, all we need to do is get the current frame and run our method. This is done by adding the stateTime field in our show method:

and updating our render method:

So now when you open the game you should get the same loading screen as the video above which then goes to the menu screen. You will notice now that when you start the game it crashes with an error regarding the missing texture for the player. If you don’t receive this error it is due to you having the old player png images still in the folder. Those should be deleted now as we are moving into using packed images, so delete those if you are getting the error.

We will now update our application screen to use the asset manager to get the images. In your MainScreen class update your constructor to the following:

You will also need to change the playerTex from a Texture to an AtlasRegion and you’re done. All images are loaded from the asset manager, all sounds and music are too.

In the next part, we will improve our loading screen by using scene2D to display things a little nicer with labels. For now though here’s a zip of the current project.

 

← Rendering And Asset Manager

— Contents —

Scene2D →

Sharing is caring!