Libgdx with Android For Game Dev
Game Dev Tutorial : Code 3 Game Screens with Switch Screen Method and ClickListener
Game Dev -All Game Dev Tutorials
With this tutorial we make 3 game screens and give them a numeric screen value: Menu[0], Game Play[1], Game Over[2]; and use the SwitchScreen code method to easily loop amongst them. With the SwitchScreen method, we can switch between different screens based on the currentScreen value. Screen value in this case, is the numeric value we assigned to each game screen - Menu is [0], Game Play is [1], and, Game Over is [2].
By adding the Label code, we add some text labels to each screen; these we use for the 'Tap', to execute the screen to screen transitions.
And, we want to add some additonal text on each game screen, including the 'Score' text that is displayed. For this text, we use the easy to implement BitmapFont class member, which is the Libgdx default font.
To display or draw our text and labels to the game screens; we can use the functions - 'draw.stage' for the Labels, and 'batch' for the screen text.
All code for this tutorial is at the Example Code section on this page. You can see the actual screen interactions at App Shot.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Click Create; Game Screens game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Game Screen, Video(Gif)
Imports and Game Class -
The standard import statements added here and those for any additional methods and classes we intend to use. Of note, Label, and Label Style imports, BitmapFont, Color, ClickListener, InputProcessor, and Game import as we using the ' Game ', class for this code - public class MyGdxGame extends Game. And, do include imports for Stage, Actor, Viewport, Orthographic Camera. If you omit one that is required, you will likely get an 'unknown entity' error when building your app code.
Variables -
At class members and variables, we include the class member for what code we are planning to use, and then add the named variable for the class member.You can name your variables as you like.
We included Spritebatch - batch; ExtendViewport - viewport, OrthographicCamera - camera; BitmapFont - font, Stage stage, and 'int currentScreen = 0';
The int stands for integer and here we want to give a name and a value for our integer class member; 0 is the numerical value we assign to the game screen 1, or the first screen of three. The second screen is 1, and the third screen is 2. This is how we use numerical values with 'int' class member to loop around the three game screens. As a rule, the first of an integer type is named or set as '0'(zero). Once, we code our class members, we can start to code the create method.
Create Method -
In Create method, we add new instances of our code functions and methods - Spritebatch, Stage, Viewport, Camera, BitmapFont(and add color and scale size), and create an instance of switchScreen method, and set the currentScreen, as the start game screen.
Render Method -
Render method to get our stage to act and draw; and add some boolean logic - if, elseif; to render the text based on the current screen selected. In Render, we also clear the game screen and set the color we want for the screen background.
SwitchScreen Method -
SwitchScreen method is where we can add code to facilitate our screen switches, including Labels for each game screen, and a clickListener to execute the screen switch.
First, we declare currentScreen as Screen, then we clear the stage with clear.stage(). Next, we add our Label for the first screen named 'menuLabel', with this code:
Label menuLabel = new Label("Tap To Play Game", new Label.LabelStyle(font,Color.GREEN));
and, set the text we want displayed-'Tap To Play Game'; and give it a color and position.
Then we add our label to the stage as an actor with the code:
stage.addActor(menuLabel);
and set a clickListener to it with this code:
menuLabel .addListener(new ClickListener(). The code we added at Create method: Gdx.input.setInputProcessor(stage);will handle the click event.
Now when we tap the text on game screen one, 'Tap to Play Game', we goto gamescreen two, or case [1]. We add Labels to all three game screens in this manner, by using the Label and Label Style properties. Label and LabelStyle work well with switchScreen method, and, Stage - Actor, and allow for easy creation of text on your game screens; also with Input Events, like our clickListener.
Dispose Method -
At dispose method, we dispose of the game assets with the dispose functions- batch,font,stage.
In this tutorial, and the previous tutorial, we've seen two ways we can implement game screens, and navigate them with two distinct code functions. In our previous tutorial, we added three game screens by using the eNum Screen class, and with switch Case to execute the screen switches. With this tutorial, we used switchScreen and with clickListener to execute the screen switches. In the previous tutorial, we used BitmapFont with batch and font.draw to write our text to screens; in this tutorial we used BitmapFont with Label and stage.draw, to draw our text to the game screens.
Either method will work, however, the method we learned in this tutorial; Game class - switchScreen method, with stage, actor, and label; allows you to easily code a game with just one game screen or more complex games with several game screens.
Game Dev -All Game Dev Tutorials
App Project Name: Game Screens
With this tutorial we make 3 game screens and give them a numeric screen value: Menu[0], Game Play[1], Game Over[2]; and use the SwitchScreen code method to easily loop amongst them. With the SwitchScreen method, we can switch between different screens based on the currentScreen value. Screen value in this case, is the numeric value we assigned to each game screen - Menu is [0], Game Play is [1], and, Game Over is [2].
By adding the Label code, we add some text labels to each screen; these we use for the 'Tap', to execute the screen to screen transitions.
And, we want to add some additonal text on each game screen, including the 'Score' text that is displayed. For this text, we use the easy to implement BitmapFont class member, which is the Libgdx default font.
To display or draw our text and labels to the game screens; we can use the functions - 'draw.stage' for the Labels, and 'batch' for the screen text.
All code for this tutorial is at the Example Code section on this page. You can see the actual screen interactions at App Shot.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Create our Game App Screen
We are creating a new app for this tutorial. First, we must create our new mobile game app, so in AIDE, at the AppProject file hierachy, Choose Create New Project, select Mobile Game, and New Mobile Game; then add the App name, Game_Screens(Note: no spaces in the app name(can use _ ), or you can add spaces after you create it; Just Goto: the 'AppProject' folder; just select the App Name, and then select rename). Next, add the package name, 'com.aac.current_screen'.Click Create; Game Screens game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Game Screen, Video(Gif)
Code For This Tutorial
The code required includes the standard code classes and methods: a game class and class members(with variables), create method, render method, dispose method. Because we want to be able to loop amongst our game screens we are going to implement 'switchScreen' method into our code.Imports and Game Class -
The standard import statements added here and those for any additional methods and classes we intend to use. Of note, Label, and Label Style imports, BitmapFont, Color, ClickListener, InputProcessor, and Game import as we using the ' Game ', class for this code - public class MyGdxGame extends Game. And, do include imports for Stage, Actor, Viewport, Orthographic Camera. If you omit one that is required, you will likely get an 'unknown entity' error when building your app code.
Variables -
At class members and variables, we include the class member for what code we are planning to use, and then add the named variable for the class member.You can name your variables as you like.
We included Spritebatch - batch; ExtendViewport - viewport, OrthographicCamera - camera; BitmapFont - font, Stage stage, and 'int currentScreen = 0';
The int stands for integer and here we want to give a name and a value for our integer class member; 0 is the numerical value we assign to the game screen 1, or the first screen of three. The second screen is 1, and the third screen is 2. This is how we use numerical values with 'int' class member to loop around the three game screens. As a rule, the first of an integer type is named or set as '0'(zero). Once, we code our class members, we can start to code the create method.
Create Method -
In Create method, we add new instances of our code functions and methods - Spritebatch, Stage, Viewport, Camera, BitmapFont(and add color and scale size), and create an instance of switchScreen method, and set the currentScreen, as the start game screen.
Render Method -
Render method to get our stage to act and draw; and add some boolean logic - if, elseif; to render the text based on the current screen selected. In Render, we also clear the game screen and set the color we want for the screen background.
SwitchScreen Method -
SwitchScreen method is where we can add code to facilitate our screen switches, including Labels for each game screen, and a clickListener to execute the screen switch.
First, we declare currentScreen as Screen, then we clear the stage with clear.stage(). Next, we add our Label for the first screen named 'menuLabel', with this code:
Label menuLabel = new Label("Tap To Play Game", new Label.LabelStyle(font,Color.GREEN));
and, set the text we want displayed-'Tap To Play Game'; and give it a color and position.
Then we add our label to the stage as an actor with the code:
stage.addActor(menuLabel);
and set a clickListener to it with this code:
menuLabel .addListener(new ClickListener(). The code we added at Create method: Gdx.input.setInputProcessor(stage);will handle the click event.
Now when we tap the text on game screen one, 'Tap to Play Game', we goto gamescreen two, or case [1]. We add Labels to all three game screens in this manner, by using the Label and Label Style properties. Label and LabelStyle work well with switchScreen method, and, Stage - Actor, and allow for easy creation of text on your game screens; also with Input Events, like our clickListener.
Dispose Method -
At dispose method, we dispose of the game assets with the dispose functions- batch,font,stage.
Summary
Additional game screens can make for an interesting game experience, and allow you to get more creative with your game scenes. However, having more than one game screen is not necessary, and simple games can be made on one game screen, including adding a Menu and Score keeper. With Libgdx, you can add complexity to your game as you go, and quite easily.In this tutorial, and the previous tutorial, we've seen two ways we can implement game screens, and navigate them with two distinct code functions. In our previous tutorial, we added three game screens by using the eNum Screen class, and with switch Case to execute the screen switches. With this tutorial, we used switchScreen and with clickListener to execute the screen switches. In the previous tutorial, we used BitmapFont with batch and font.draw to write our text to screens; in this tutorial we used BitmapFont with Label and stage.draw, to draw our text to the game screens.
Either method will work, however, the method we learned in this tutorial; Game class - switchScreen method, with stage, actor, and label; allows you to easily code a game with just one game screen or more complex games with several game screens.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.