In this part we will pay more attention on how the game looks and feels. If you haven’t already, I suggest you to go and check out the other parts (Part 1 & Part 2).

We will build two more screens for the game, one will be the starting screen(menu) from where we can start the game and the other one will be the ending screen which will be triggered when the player loses all of his lives (this screen will have a button that will redirect the player to the starting screen).

This is how the screens will look like:

First, let’s look at the menu screen. This will just implement the Screen interface like GameScreen does. So create a new class in the screen package called MenuScreen:

This will only draw the background image on the screen, but no worries, we will make some functionality in a moment. Before that let’s update the FoodMain class so it creates the menu screen instead of the game – that way we can test the menu to see if it works.

Now if we run the game we should see the background image only. The game is still there, don’t worry, we have to call it somehow. The best method is to create some buttons and build an actual menu. If you look in the picture above, you will see that the screen will have three items on it: the title, play button and exit button. Let’s go ahead and do that.

Update the MenuScreen with the code below. I will explain how everything works after it.

Let’s begin with the show() method because that is the place we create all the things that appear on the screen. Notice that we used a Stage. This acts like an actual stage and all the items that are placed in it will be actors. Doing this will keep all the items together and when we render them on screen, we actually render only the stage. After we instantiated the stage we set the input processor to work with the stage and you will see later why. After that we created an atlas like we did in GameRenderer.

Another new thing is the skin which contains the style of the buttons(font, images). Notice that the skin uses a file called menuSkin.json and the atlas. Using a json file when dealing with styles is very handy because you don’t have to waste memory instantiating a lot of objects that will do the same thing and it will also keep the code clean. Now let’s take a look at the json file and I will explain how it works (the file is in the assets folder under ui).

As you can see we actually create our objects in a json file. First, we set the color, which is not really used in our code, but the skin demands a color. After that we create a font using the file menu.fnt located in the assets folder. The third object is a style used for the labels(in our case the heading text). This is not used in the menu screen because I changed the font in the last minute to make it look better, but it will be used in the end screen for the text. The last object is the button style which makes our buttons look fancy. You can see that there are the up and down properties which signifies the touch action. When we touch a button the style will change a bit to animate the action. The animation is also helped by the last two properties which moves the button a bit so it looks like it’s being pressed. Using a json file is not compulsory, but it can keep the code in a better shape.

Going on with the code in MenuScreen we can see that we created a table which uses the above skin. The table is used to place the items on the screen making it easier to align them. For example if we have a column with three rows and we put an item in each row, they will appear nicely one below the other. We set the table to take the whole screen using the setBounds method.

After this we are creating the items that go inside the table. There are two buttons, buttonPlay and buttonExit. For each of them we set the text and the skin, we set the padding to 20 so the text doesn’t take the whole space in the button, and we added a ClickListener. This function listens for the click event and triggers an action when the user clicks. Clicking buttonPlay will take us to the GameScreen and clicking the buttonExit will close the application. This is the reason why we set the input processor for the stage; the buttons are located on the stage and so is the input processor.

Next, we create the heading and for this we need a font, a label style and a label. We load the font from our assets folder, then we create a LabelStyle with the font and a color(black) and then we create a Label with the text we want in it and the style the text will be using.

In the end we add all our items in the table and then we add the table inside the stage. When adding the items inside a table we must create a row ourselves after each addition. Also, if you want to assign more space for a row you just modify the number in the spaceBottom method. Notice that before we add the table to the stage we have a line table.debug(); this is used if we want to actually see the table borders on the screen to see how big each row is. To see the borders you just have to uncomment this line inside the render() method:

The render was updated with just two lines for drawing the stage – stage.act(delta) and stage.draw().

If you run the game now you should see the menu screen with a title and two buttons:

The ending screen is almost similar. The only difference that we have only one button and we have a different header. Create a new class called EndScreen.java inside the screen package:

To call the ending screen we have to update our GameRenderer class to call it when the player runs out of lives. We do that by modifying the if statement inside the render() method like this:

Now we have a nice flow for our game. When we first enter the game we can see the menu screen which gives us the option of exiting the application or start the game, then we play the game until we run out of lives and then the ending screen will appear telling us what was the score and offering the option of trying again.

All is left to do is to improve the game a bit, so we’ll have to look at the GameRenderer again. We will add a flash when the user touches bad food, add some particle effects that will also act when the user touches any type of food, add some sound effects and a score counter.

Add these global declarations inside GameRenderer.java:

In the loadItems() method we add these at the end:

We use the gameFont for the score counter. We then have eatSound for the good food and ewSound for the bad food, shape is used for the flash which will basically be just a white rectangle that will take the whole screen for a short period of time. We load the particles afterwards, set the position to 0,0 (doesn’t really matter where we initialize the position) and start the effect. Notice that we used a file called mist.p for the effect; this file was created using a tool available here: https://code.google.com/p/libgdx/wiki/ParticleEditor. I won’t go into details on how to use this tool because you can find all the necessary information on the linked website. When using the effect.load() method we also have to specify the folder the effect is in because the effect is also using a particle image and if you go into assets/effects you will see that there is a particle.png file.

Let’s go ahead and modify the render() method now.

Add these two lines in the render fields section(or at the beginning of the class):

Now we have to update our code so that we register the effects and play the sounds when we touch a food item. Modify the collision section accordingly:

In this section we updated the cases. When we get a food item we set the position of the effect to the position of the food, we start the effect and add it to the effects list we declared at the beginning of the code. We use the list to draw all the effects on the screen(we’ll get to that in a moment). Another thing we do is to update the boolean value of flash to true so we can check if we should display the flash or not. We also play the sounds by just calling the play() method, easy isn’t it?

After we do this, we check the effects list to see if any of the effects finished the animation so we can remove them:

The isComplete() method checks if the effect has ended or not and returns a boolean value.

The last modification we have to make involves the drawing of the effects and flash. Add the following code after we draw the lives on screen:

For displaying the effects you can see that we just go through the list and draw them on the batch and update it with the delta value. After this we build the flash. We basically draw a white rectangle on the screen and keep it there for a short time. We use the shape we defined at the beginning and set the shape to be filled, set the color to white and make a rectangle to take up the whole screen. We then increment the flashDuration variable with the delta time so we can hold the rectangle on the screen for how long we want. In this case we hold the rectangle for 150 miliseconds (notice the 0.15f value).

Now you can run the game and play! Don’t forget to take a break after at least one hour to rest your eyes. This is all I had in mind for this tutorial. If you want to learn more about libGDX framework you will find that there are lots of answers on the Internet. If this game is not working for you, let me know and I will try my best to help you. Also, if you want me to expand the game and make more tutorials about this let me know and I’ll think about it.

You can see the whole code for the application in my GitHub repository.

I hope this tutorial was helpful and don’t forget to give me some feedback! 😀

Cheers!