Libgdx with Android For Game Dev
Game Dev Tutorial : Add Color to Game Screens and Labels
Game Dev -All Game Dev Tutorials
Adding style to your game screens is easy to do in Libgdx. By implementing Stage and Actor, we can also work with Label, of Scene2d. With Label we can easily add the text we want for the game screens.
For this tutorial, we are going to create 3 game screens and give them each a unique color, and navigate the screens by implementing the Switch Screen method of Libgdx. We are going to add text to each game screen, and color the text. We will use Label property, to create the labels, and with BitmapFont(system default) to draw our text style.
By using rgb color codes, and decimal color codes, we can add any color we want to our game screens and screen Labels. To set the color for the screens and text, we use 'rgb' and 'decimal' color values. For the text color, we can add color values directly in the Label property for each screen's labels. To add color to game screens we use switch case code call, in the Render method; and set the color values we want.
Labels are commonly used in game screens to display text and provide game information for scores, menus, and the like.
In this tutorial, we are also going to add a logo image on game screen 3, and make it clickable, by adding a clickListener to it. This is our 'Exit App' image. We add it to the game screen 3 in the Switch Screen method for screen number 3.
Switch Screen method, and Label property work well together and provide an easy way to style your game screens with text, color, images, and implement interactions on the screens and amongst them.
All code for this tutorial is at the Example Code section on this page. You can see the three screens actioned at the 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; Style 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
Style Game Screens
For the game class we use :
public class MyGdxGame extends Game{ ;
important here because it allows us to use the SwitchScreen method. SwitchScreen method can also be used with the class ApplicationAdapter, but by using Game class we can code it more easily.
Variables - Next in code, we add our class members with our variable names for them as seen in this next image. You can name them as you want. So, Spritebatch(class member) we named as batch(variable); BitmapFont(class member) we named as font(variable); Stage(class member) we named as stage(variable); and so forth for all our class members.
Create - At Create method, we create new instances of SpriteBatch, BitmapFont, Stage, Viewport, Camera, InputProcessor, and SwitchScreen. At BitmapFont, we commented out the color because we don't have to add it here since we are adding it at our SwitchScreen method for each screen's Labels.
SwitchScreen - At Switch Screen method, we include the coding for the 3 game screens, and add their Labels(set the Text), Label Colors, Label Positions, and add the logo image for game screen 3. The font we are going to use - BitmapFont, is first created at the Create method, and then we set its size, also at Create method.
We are using the system default font, so it is easy to implement. Since all our text is going to be the same size, we can just set the scale factor once in our create method.
If we wanted a different font(text) sizes for various labels, then we include the 'setScale' attribute within the Label code itself. We use 'switch screen' with case function, to change screens, to go from one screen to the next. And, click listeners are also added in this switch screen code, to facilitate the click events(when the user taps on the text).
Changing From Screen to Screen
We added one click event(click listener) on screen 1(goes to screen 2), and one click event on screen 2(goes to screen 3), and screen 3 has two click events - one for 'Tap Play Again'(goes to screen 2), and one for 'Exit App' image logo, (exits the app).
The 'exit app' logo image is used with the click Listener. The 'exit app' image has the text(exit app) included on it, so we don't have to add a label for that text, just add the logo image as a Texture. If however, we had a logo image without the text included, then we can use/create a Label and add some text, and position it over the logo image. The image would be in the background, the text would display over the image.
With Switch Screen method, case 0 is screen 1, case 1 is screen 2, case 2 is screen 3. We create screen labels for each game screen, set the text for them, and set a position and color for them. Then,we add click listeners to the labels on screen 1, screen 2, and two click listeners on screen 3. A listener event allows for user interaction; user taps the text(that has a click listener attached to it) and we can execute an action, like going to another screen.
At screen 1 case 0; user taps the Text, and goes to screen 2. On screen 2, user taps the Text, and goes to screen 3. This code:
public void clicked(InputEvent event, float x, float y) {
switchScreen(1);
is what executes the screen switches once the user has tapped the text on screen.
This next image of our code is for game screen 3 - case 2. Case 2 is the code name, as all things numerical start with 0 in Libgdx. So our first screen is case 0, second case 1(screen 2), third, case 2(screen 3).
In this code we add our Label for 'game over, Tap Play Again', and also, for the 'Final Score' label. You can name the Label variables as you want. For 'game over' label, we named it as gameOverLabel(variable). And, for 'final score' Label, we named it as finalScoreLabel(variable) Label. Don't forget we have to camel case our variable names. You don't have to include the word Label at the end of your variable name you use, I just used it for simplicity.
Next, we add code for the 'exit app' logo. We want to make it clickable. And, we want it to exit the user from the app when it is clicked. So, we must include the 'Gdx.app.exit()' code function at our ClickListener code call.
For this logo, we must load our round logo image, the 'exit app' image. To do so, we use Texture, then declare it as Image, and then add it as Actor to the Stage. So for the Texture we named the variable 'exitTexture', and for our Image variable name we used, 'exitLogo'. Once we have added our 'exitLogo' to the Stage, we can now add our clickListener to it. The 'exit logo' is 500x500, but you can change the size that displays with the 'setSize' attribute. This next code shown will display the logo at 250 for width, and 250 for height. Because our image is 500x500 we can easily scale it to a smaller size.
exitLogo.setSize(250,250);
So, to summarize the logo; we add the 'click Listener' to the exit app logo', with Image variable named - 'exitLogo'. We attach our exitLogo variable to the click listener as seen in the image of code here. Once a user taps the exit app Logo on the screen, the click Listener will execute and exit the user from the app. If they tap the other link- 'Play Again', it returns the user to the Screen 2.
Click Listeners(click events) can be added to any Label that just has text, by itself, or with text for an image. The image is in the background, and the text displays over the image.
If you are adding an image, but don't want a Label(some text) to be added over the image, then you can add the image by loading it as a Texture, declare it as Image, and add it to Stage as an Actor. This is what we did in this tutorial. We wanted the 'exit-app' image to be placed on screen 3, so we add it with the Switch Screen code, and at case 2 which is screen three's code. Then we add it just like adding any image with Stage, and then we add our click listener to it. The important thing is that we add the logo with our SwitchScreen method code, and not at the Create method, which is where we usually add our game images. Makes sense, because we want our image to be placed on screen three only, we include it with the screen 3 code.
Otherwise, if you are adding an image and want text over the image, then do use the Label function to add the text. Because you are using Label, you can create and position the text easily, including having it centered over the background image. The image is in the background, the text is in the foreground.
Here you can see some examples from our code. First, at our Menu Label, we used rgb color values, quite common and easy to implement. Goto any search engine, and type 'html color codes', and get any color you like with included 'rgb' color values to use. The last numerial digit is 1, the first 3 you add for the color you want. And, do include /255f, after your added color codes.
Label menuLabel = new Label("Menu Screen - Tap goto Game", new Label.LabelStyle(font,new Color(0/255f,0/255f,0/255f,1)));
Another way is to use 'decimal color values', not as common, but can use with Labels. For this, we must divide the rgb color value into the 255 number values. So for say, 5,10,15 for rgb color values, then we simply divide 5 by 255, 10 by 255, and 15 by 255. Then use 0.1234, four places from your divided result to use for the decimal color values, as shown in this example. And, include the 0.8862f, f after the numerical value.
Label gamePlayLabel = new Label("Game Screen - Tap to Exit", new Label.LabelStyle(font,new Color(0.8862f,0.3450f,0.1333f,1)));
You can use the color name also when coding your color. Good for when you want a common color like white, black, blue, green and the like. Just add the color name as shown in this code. Make sure the color name is all caps.
Label scoreLabel= new Label("Score: ", new Label.LabelStyle(font,Color.WHITE));
Game Screen Color
Color for game screens is added at the Render method. So, if you have a one screen game app, or a three screen game app, the code is added at the Render method. For adding color to your game screens, you follow the same color coding rules; as shown in these code examples: Here we used 'rgb' and also single number values for the color code: 1,1,1,1., is color for white.
case 0:
//screen 1, add color using rgb values
Gdx.gl.glClearColor(0/255f, 64/255f, 64/255f, 1);
break;
//screen 2 add color with rgb values
case 1:
Gdx.gl.glClearColor(79/255f,58/255f,60/255f,1);
break;
//screen 3 add color with single number value
case 2:
Gdx.gl.glClearColor(1,1,1,1);
break;
Render - At Render method, we clear the game screen and add our colors we want for the game screens. Here we use 'switch Screen' with case, to facilitate the screen switches. So, if we are at screen 1 - case 0, use this color for the game screen; and if at screen 2 - case 1, use this screen color, and if at screen 3 - case 2, use this screen color. This is the essence of using the 'switch screen' with case, to navigate and render the proper screen color. And, also in render method, we draw the screen color and the Labels - text to the screen with 'stage.draw', code call.
Dispose - at Dispose method we dispose of the game assets. Because we are using Stage, we can use stage.dispose(); otherwise we should dispose of each asset directly.
We learned how to add color to the Labels we created, and the various methods available to add color values to code. And, lastly, we added an image, an exit app logo, to our game screen 3, and added a click listener to it, so a user can exit the app by tapping the Exit App - logo image.
With Scene2d, working with Actor, Stage, Label, and Image, we can easily add components to style our game screens and make them interactive. Implementing Game class along with Switch Screen method provides an easy and scalable way to make simple and more complex game interfaces.
Game Dev -All Game Dev Tutorials
App Project Name: Style Game Screens
Adding style to your game screens is easy to do in Libgdx. By implementing Stage and Actor, we can also work with Label, of Scene2d. With Label we can easily add the text we want for the game screens.
For this tutorial, we are going to create 3 game screens and give them each a unique color, and navigate the screens by implementing the Switch Screen method of Libgdx. We are going to add text to each game screen, and color the text. We will use Label property, to create the labels, and with BitmapFont(system default) to draw our text style.
By using rgb color codes, and decimal color codes, we can add any color we want to our game screens and screen Labels. To set the color for the screens and text, we use 'rgb' and 'decimal' color values. For the text color, we can add color values directly in the Label property for each screen's labels. To add color to game screens we use switch case code call, in the Render method; and set the color values we want.
Labels are commonly used in game screens to display text and provide game information for scores, menus, and the like.
In this tutorial, we are also going to add a logo image on game screen 3, and make it clickable, by adding a clickListener to it. This is our 'Exit App' image. We add it to the game screen 3 in the Switch Screen method for screen number 3.
Switch Screen method, and Label property work well together and provide an easy way to style your game screens with text, color, images, and implement interactions on the screens and amongst them.
All code for this tutorial is at the Example Code section on this page. You can see the three screens actioned at the 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, Style 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.style_screens'.Click Create; Style 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
Style Game Screens
Code For This Tutorial
Imports and Game Class At Imports, we include the imports for all the code calls we are implementing; including; Game, Label, LabelStyle, Image, Texture, Stage, InputProcessor, ClickListener, Orthographic Camera, ExtendViewport, and the standard imports.For the game class we use :
public class MyGdxGame extends Game{ ;
important here because it allows us to use the SwitchScreen method. SwitchScreen method can also be used with the class ApplicationAdapter, but by using Game class we can code it more easily.
Variables - Next in code, we add our class members with our variable names for them as seen in this next image. You can name them as you want. So, Spritebatch(class member) we named as batch(variable); BitmapFont(class member) we named as font(variable); Stage(class member) we named as stage(variable); and so forth for all our class members.
Create - At Create method, we create new instances of SpriteBatch, BitmapFont, Stage, Viewport, Camera, InputProcessor, and SwitchScreen. At BitmapFont, we commented out the color because we don't have to add it here since we are adding it at our SwitchScreen method for each screen's Labels.
SwitchScreen - At Switch Screen method, we include the coding for the 3 game screens, and add their Labels(set the Text), Label Colors, Label Positions, and add the logo image for game screen 3. The font we are going to use - BitmapFont, is first created at the Create method, and then we set its size, also at Create method.
We are using the system default font, so it is easy to implement. Since all our text is going to be the same size, we can just set the scale factor once in our create method.
If we wanted a different font(text) sizes for various labels, then we include the 'setScale' attribute within the Label code itself. We use 'switch screen' with case function, to change screens, to go from one screen to the next. And, click listeners are also added in this switch screen code, to facilitate the click events(when the user taps on the text).
Changing From Screen to Screen
We added one click event(click listener) on screen 1(goes to screen 2), and one click event on screen 2(goes to screen 3), and screen 3 has two click events - one for 'Tap Play Again'(goes to screen 2), and one for 'Exit App' image logo, (exits the app).
The 'exit app' logo image is used with the click Listener. The 'exit app' image has the text(exit app) included on it, so we don't have to add a label for that text, just add the logo image as a Texture. If however, we had a logo image without the text included, then we can use/create a Label and add some text, and position it over the logo image. The image would be in the background, the text would display over the image.
With Switch Screen method, case 0 is screen 1, case 1 is screen 2, case 2 is screen 3. We create screen labels for each game screen, set the text for them, and set a position and color for them. Then,we add click listeners to the labels on screen 1, screen 2, and two click listeners on screen 3. A listener event allows for user interaction; user taps the text(that has a click listener attached to it) and we can execute an action, like going to another screen.
At screen 1 case 0; user taps the Text, and goes to screen 2. On screen 2, user taps the Text, and goes to screen 3. This code:
public void clicked(InputEvent event, float x, float y) {
switchScreen(1);
is what executes the screen switches once the user has tapped the text on screen.
This next image of our code is for game screen 3 - case 2. Case 2 is the code name, as all things numerical start with 0 in Libgdx. So our first screen is case 0, second case 1(screen 2), third, case 2(screen 3).
In this code we add our Label for 'game over, Tap Play Again', and also, for the 'Final Score' label. You can name the Label variables as you want. For 'game over' label, we named it as gameOverLabel(variable). And, for 'final score' Label, we named it as finalScoreLabel(variable) Label. Don't forget we have to camel case our variable names. You don't have to include the word Label at the end of your variable name you use, I just used it for simplicity.
Next, we add code for the 'exit app' logo. We want to make it clickable. And, we want it to exit the user from the app when it is clicked. So, we must include the 'Gdx.app.exit()' code function at our ClickListener code call.
For this logo, we must load our round logo image, the 'exit app' image. To do so, we use Texture, then declare it as Image, and then add it as Actor to the Stage. So for the Texture we named the variable 'exitTexture', and for our Image variable name we used, 'exitLogo'. Once we have added our 'exitLogo' to the Stage, we can now add our clickListener to it. The 'exit logo' is 500x500, but you can change the size that displays with the 'setSize' attribute. This next code shown will display the logo at 250 for width, and 250 for height. Because our image is 500x500 we can easily scale it to a smaller size.
exitLogo.setSize(250,250);
So, to summarize the logo; we add the 'click Listener' to the exit app logo', with Image variable named - 'exitLogo'. We attach our exitLogo variable to the click listener as seen in the image of code here. Once a user taps the exit app Logo on the screen, the click Listener will execute and exit the user from the app. If they tap the other link- 'Play Again', it returns the user to the Screen 2.
Click Listeners(click events) can be added to any Label that just has text, by itself, or with text for an image. The image is in the background, and the text displays over the image.
If you are adding an image, but don't want a Label(some text) to be added over the image, then you can add the image by loading it as a Texture, declare it as Image, and add it to Stage as an Actor. This is what we did in this tutorial. We wanted the 'exit-app' image to be placed on screen 3, so we add it with the Switch Screen code, and at case 2 which is screen three's code. Then we add it just like adding any image with Stage, and then we add our click listener to it. The important thing is that we add the logo with our SwitchScreen method code, and not at the Create method, which is where we usually add our game images. Makes sense, because we want our image to be placed on screen three only, we include it with the screen 3 code.
Otherwise, if you are adding an image and want text over the image, then do use the Label function to add the text. Because you are using Label, you can create and position the text easily, including having it centered over the background image. The image is in the background, the text is in the foreground.
Adding Color to Game Screens and Labels
Label Color - For adding color to your Label text, you can basically add any color you want by using 'rgb, and decimal' color values. And, you can also use color names like -WHITE, RED, BLUE, GREY, GREEN. And, single number values like - 1,1,1,1, or 0,0.0.1.Here you can see some examples from our code. First, at our Menu Label, we used rgb color values, quite common and easy to implement. Goto any search engine, and type 'html color codes', and get any color you like with included 'rgb' color values to use. The last numerial digit is 1, the first 3 you add for the color you want. And, do include /255f, after your added color codes.
Label menuLabel = new Label("Menu Screen - Tap goto Game", new Label.LabelStyle(font,new Color(0/255f,0/255f,0/255f,1)));
Another way is to use 'decimal color values', not as common, but can use with Labels. For this, we must divide the rgb color value into the 255 number values. So for say, 5,10,15 for rgb color values, then we simply divide 5 by 255, 10 by 255, and 15 by 255. Then use 0.1234, four places from your divided result to use for the decimal color values, as shown in this example. And, include the 0.8862f, f after the numerical value.
Label gamePlayLabel = new Label("Game Screen - Tap to Exit", new Label.LabelStyle(font,new Color(0.8862f,0.3450f,0.1333f,1)));
You can use the color name also when coding your color. Good for when you want a common color like white, black, blue, green and the like. Just add the color name as shown in this code. Make sure the color name is all caps.
Label scoreLabel= new Label("Score: ", new Label.LabelStyle(font,Color.WHITE));
Game Screen Color
Color for game screens is added at the Render method. So, if you have a one screen game app, or a three screen game app, the code is added at the Render method. For adding color to your game screens, you follow the same color coding rules; as shown in these code examples: Here we used 'rgb' and also single number values for the color code: 1,1,1,1., is color for white.
case 0:
//screen 1, add color using rgb values
Gdx.gl.glClearColor(0/255f, 64/255f, 64/255f, 1);
break;
//screen 2 add color with rgb values
case 1:
Gdx.gl.glClearColor(79/255f,58/255f,60/255f,1);
break;
//screen 3 add color with single number value
case 2:
Gdx.gl.glClearColor(1,1,1,1);
break;
Render - At Render method, we clear the game screen and add our colors we want for the game screens. Here we use 'switch Screen' with case, to facilitate the screen switches. So, if we are at screen 1 - case 0, use this color for the game screen; and if at screen 2 - case 1, use this screen color, and if at screen 3 - case 2, use this screen color. This is the essence of using the 'switch screen' with case, to navigate and render the proper screen color. And, also in render method, we draw the screen color and the Labels - text to the screen with 'stage.draw', code call.
Dispose - at Dispose method we dispose of the game assets. Because we are using Stage, we can use stage.dispose(); otherwise we should dispose of each asset directly.
Summary
In this tutorial, we learned how to implement 3 game screens, with the Switch Screen method, and add individual color to each game screen. We also added click Listeners to the Labels we created so we can loop amongst the three game screens, including a link to return to Play Game screen from the game over screen.We learned how to add color to the Labels we created, and the various methods available to add color values to code. And, lastly, we added an image, an exit app logo, to our game screen 3, and added a click listener to it, so a user can exit the app by tapping the Exit App - logo image.
With Scene2d, working with Actor, Stage, Label, and Image, we can easily add components to style our game screens and make them interactive. Implementing Game class along with Switch Screen method provides an easy and scalable way to make simple and more complex game interfaces.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.