Creating Splash Screen and Menu Screen with Libgdx and Android Studio
If you not aware of creating a new project using libgdx and android studio please visit this page to get started
http://sharewhatulearn.blogspot.com/2018/09/getting-started-with-libgdx-android.html
Once you have opened the created project in Android Studio you can find the Test Class under Core -> Java-> com.test.game this call will act as the main Game class which will call other screens.
**I have renamed the Test class as GamePlay you can do this by right clicking on the class and do a Refactor-> Rename
Under this Class
GamePlay paste the
below code you can find the comments for the code inline
------------------------------------------------------------------
package com.test.game;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
public class GamePlay extends Game {
// one for each possible screen public static final int SPLASH_SCREEN = 0;
public static final int GAME_SCREEN = 1;
public static final int GAME_PLAY = 2;
public static final int GAME_OVER_SCREEN = 3;
public GamePlay() { super(); }
@Override public void create ()
{
changeScreen(SPLASH_SCREEN);
// Dy default the splash screen will be loaded once the game is launched }
@Override public void dispose()
{
// DISPOSE ALL RESOURCES getScreen().dispose();
Gdx.app.exit();
}
//This function will be called from other screen classes to swith the screen public void changeScreen(int screen)
{
if(screen == SPLASH_SCREEN){
this.setScreen(new SplashScreen(this));
}else if(screen == GAME_SCREEN){
this.setScreen(new MenuScreen(this));
}else if(screen == GAME_PLAY){
this.setScreen(new CorePlay(this));
}
}
}
---------------------------------------------------------------------------------
Okay now let us create a splash screen to do this we need to create a new class you can
do this by right clicking on the com.test.game under projects window.
In splash screen we are just going to load a Bg Image these images needs to be copied
to the assets folder under the project\android\assets
Now open the newly created SplashScreen class and paste the below code
-------------------------------------------------------------------------------------------------------------
package com.test.game;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.utils.TimeUtils;
public class SplashScreen implements Screen {
private SpriteBatch batch;
private Texture ttrSplash;
private GamePlay parent;
private float timeToShowSplashScreen = 2f; // 2 seconds
// pass the parent game to this screen so this screen can tell the parent its finished // and tell it to load the next screen public SplashScreen(GamePlay p) {
super();
parent = p;
batch = new SpriteBatch();
ttrSplash = new Texture("loginbg-01.png");
}
@Override public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(ttrSplash, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
batch.end();
timeToShowSplashScreen -= delta; // remove delta from time if(timeToShowSplashScreen <= 0){ // 2 seconds are up // tell parent to change screen parent.changeScreen(GamePlay.GAME_SCREEN);
}
}
@Override public void hide() { }
@Override public void pause() { }
@Override public void resume() { }
@Override public void show() { }
@Override public void resize(int width, int height) { }
@Override public void dispose() {
ttrSplash.dispose();
batch.dispose();
}
}
-------------------------------------------------------------------------------------------------------------
Now its time to create the Menu screen to do this repeat the same process which we followed
to create the SplashScreen class. I have created the new main menu screen as MenuScreen
class.
Once you are done with class creation use the below code.
This code adds a bg image, creates 2 button and and adds event listener to the button.
Later we will use this event listener to trigger to call to core game play screen.
For the buttons I have used the Libgdx free button skins you can download it from here
https://github.com/czyzby/gdx-skins
The downloaded skin too needs to be placed under assets folder
-------------------------------------------------------------------------------------------------------------
package com.test.game;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Button;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
public class MenuScreen implements Screen {
private final Stage stage;
Texture sceneBg;
private SpriteBatch batch;
Game game;
private GamePlay parent;
public MenuScreen(GamePlay p) {
super();
parent = p;
stage = new Stage();
Gdx.input.setInputProcessor(stage);
sceneBg = new Texture("loginbg-01.png");
batch = new SpriteBatch();
Skin mySkin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));
TextButton fbButton = new TextButton("Facebook Login", mySkin);
fbButton.setWidth(600.0f);
fbButton.setPosition((stage.getWidth()/2)-fbButton.getWidth()/2, stage.getHeight()/2);
TextButton guestButton = new TextButton("Guest Login", mySkin);
guestButton.setWidth(600.0f);
guestButton.setPosition((stage.getWidth()/2) - guestButton.getWidth()/2, fbButton.getY()- (fbButton.getHeight()+30.0f));
fbButton.addListener(new ClickListener()
{
//game.setScreen(new GamePlay(game)); });
guestButton.addListener(new ClickListener()
{
@Override public void clicked(InputEvent event, float x, float y) {
parent.changeScreen(GamePlay.GAME_PLAY);
};
});
stage.addActor(fbButton);
stage.addActor(guestButton);
}
@Override public void show() { }
@Override public void render(float delta) {
stage.act(delta);
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(sceneBg, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
batch.end();
stage.draw();
}
@Override public void resize(int width, int height) { }
@Override public void pause() { }
@Override public void resume() { }
@Override public void hide() { }
@Override public void dispose() { }
}
-------------------------------------------------------------------------------------------------------------
Now it time to create the new class which will be called when
the button is triggered from the menu screen.
We are going to follow the same process as we did before for creating splash screen
and MenuScreen.
I have named this class as CorePlay.
Once you have created paste the below code in this class.
-------------------------------------------------------------------------------------------------------------
package com.test.game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.Stage;
public class CorePlay implements Screen
{
Stage stage;
private GamePlay parent;
Texture sceneBg;
private SpriteBatch batch;
public CorePlay(GamePlay p)
{
super();
parent = p;
stage = new Stage();
Gdx.input.setInputProcessor(stage);
sceneBg = new Texture("mainScreenBG-01-01.png");
batch = new SpriteBatch();
}
@Override public void show()
{
}
@Override public void render(float delta) {
stage.act(delta);
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
batch.draw(sceneBg, 0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
batch.end();
stage.draw();
}
@Override public void resize(int width, int height) { }
@Override public void pause() { }
@Override public void resume() { }
@Override public void hide() { }
@Override public void dispose() { }
}
-------------------------------------------------------------------------------------------------------------
That's it now go to Run and Run Android in the editor you will be able to see the
splash screen which is launched and appears for 2 seconds and then the menu screen
and upon clicking the Guest Login button you will be taken to the next screen.
