Full LibGDX Game Tutorial – Scene2D

Sharing is caring!

Full LibGDX Game Tutorial – Scene2D

Welcome to part 9 of our Full LibGDX Game Tutorial. This part will focus on the using updating out loading screen to use scene2D. 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 8, you can continue on.

We have already gone over a few items from scene2D before when we created our preference screen. Those were the stage, tables and text buttons. This time we will be creating our own scene2d actor to replace the current loading bar parts. An Actor is an object that exists on your stage, it can be used to display images, react to clicks or other events and have its own logic. The tables and text buttons from our previous tutorial parts were actors.

Let’ s start by making a new class and calling it LoadingBarPart and having it extend the Actor class.

Our LoadingBarPart will contain a texture (the dash) and an animation (flameAnimation) which we will then draw. In order for our LoadingBarPart to have these, we will need to add them to our constructor.

Here we added the AtlasRegion which is our texture and an Animation which is the flame animation to our constructor. We then set the width and height as the stage will control the displaying of our actor and without these, our stage will not know how to layout our actor correctly. Finally, we set the actor to be invisible so the loading bar is not displayed full at the start.

So now we have an actor with the texture and animation but it still doesn’t know how to draw itself so we need to override the draw method. Sometimes you might want to override a method from a parent class but you don’t know what methods are available, for this, there is a handy menu option in eclipse that lets you specify which methods you want to override and that is in the source menu.

Just highlight the class name either by double clicking or clicking and dragging then use the menu source > Override/Implement Methods… option to select the methods you want to override. We will override the draw and act methods.

So now you have your methods update the draw method to this:

Here we have implemented a super call with “super();” This tells the parent class(Actor) to run the draw method from the parent class as usual. This means that any actions inside the Actor’s draw method will be run before the actions we have added in our draw method. This is here incase there are any actions that effect how the actor is drawn. Next, we tell our batch to draw the dash image in the x and y location of the actor sized at 30px x 30px. Next, we set the blend function to make the flame animation which is drawn next to be blended with the currently drawn image. Now we draw the animation using the current frame variable (which we will add in our act method after this). Finally, we reset the blend function of the sprite batch.

Now update the act method to match this:

Again we call the Super method to make sure the actor’s act method is called before we start making changes. We then update the stateTime with the delta so our animation knows when the next frames should be changed and use the state time with our animation to get the actual currentFrame Texture. This is our actor complete and we can start on updating our loading screen.

Scene2D Loading Screen

In our loading screen we will move all the code for getting texture into its own method so our code is more organised. In you loading screen create a new method called loadAssets and add move the current loading asset code into this new method. You will end up with something like this below:

This code should be self-explanatory now as we have gone over this in earlier parts of this tutorial. Now we can load all our assets in one method but it isn’t being called yet so we will add it to our constructor like so:

We have loaded our images now and can focus on displaying them. We will be using a table with an inner table. This is called nesting which is when you place an item inside another item. You can nest a lot of things in programming such as if statements and objects etc. We will be nesting out table with an inner table called loadingTable. Update your show method to the following:

Here we create an image actor called titleImage(yes, Image is a type of scene2d actor) and then we create our main table called table(another scene2d actor). We set it up the same as we did in previous lessons. Next, we added a new table called loadingTable. This will be the table which holds the 10 loading bar parts. Finally, after that, we add the title image and loadingTable to our main table and our main table to the stage so now everything is added to the stage or something within the stage.

The last thing we need to do is to update our render code so that the loading bar parts are set to visible when we have loaded a certain amount of progress. So let’s update our render code now:

Here we have added an if statement to check if the current loading stage is less than or equal to 5. We then find the actor that relates to this stage and set it to visible. Let’s break down this code a bit so we can understand what’s happening.

First, we get all the cells of the loadingTable with “loadingTable.getCells()” which is basically all the boxes in our table, one for each actor we added. Next, we get a single cell with “.get((currentLoadingStage-1)*2)” which is the current loading stage -1 (minus 1 because we increased the loading stage just before this check) and multiplied by 2 because we have 10 parts of a loading bar and only 5 stages. Then we get the actor in that cell and set them to visible with “getActor().setVisible(true);“. So every time the loadingStage increases 2 new loadingBarParts will be shown. This isn’t an ideal solution to showing a progress bar as the loading will be shown in chunks. A better solution would use the value returned by the manager.update() method to show a bar at a certain percentage of the current loading, however, this way was used to give you a better understanding on scene2D and how all the actors within it can be accessed.

If you run this code now you will probably notice the animation and the dash are not overlapped. This is because I updated the dash image to remove the white space that was making the dash have a large empty portion at the top of the image which was making it harder to align. To fix this you will need to use the following image:

Here are a couple more images we will be adding as well.

Now you have the images add them to your packed texture like you did previously in your loading pack. If you run your game now you will see that dash and the animation line up.

We are now going to add the background image and the copyright image to the loading screen.

Adding a background

In your game, you may not like the fact the loading screen is on a black background and may want to add a background of your own. So let’s go over how to do that now. with your background image added to your packed loading textures update the loadAssets method to load the 2 new textures:

As the table is set to fill parent already we can set this table’s background image and it will fill the screen like we want so let’s use that to disp[lay our background image:

and update our table to show the copyright images too:

Now we have it all added we should be able to run the game and end up with the following loading screen.

Yay, loading screen is complete for now but our menu screen is all blue and our loading screen is all orange and red. This isn’t very good so let’s update our skin so it matches the colour scheme a bit more. This is actually a pretty simple. All we need to do is adjust the hue of our skin from a blue colour to red/orange. I will be using photoshop to do this but you can use whatever program you want or you could just download the updated skin image below and replace your current image in the android/assets/skin folder:

 

Our loading screen is done and our menu screen now has matching colours let’s add the background image from our loading screen to our menu screen so they match. Simply add the background loading code to our menu screen the same as we did in the loading screen:

and set the background image to the table like we did in the loading screen:

You should now get a menu screen the same as below:

That’s it for part 9, as usual, you can download the full project from stormyvids. In part 10 of this tutorial, we will replace the model code we have currently with some more game oriented code and go over controlling our player.

← Loading Screen

— Contents —

Entities and Ashley ECS →

Sharing is caring!