Olivia's Fireflies splash screen

LibGDX post #2: Setting up a splashscreen

July 23, 2016

The first thing I had to figure out, was how to begin with a 2-3 second splash screen, and automatically go to a Start screen. And when I say figure out, often that's mostly searching for a solution, especially if it's something new to me. I bookmarked a couple of links that really helped me out:

Disclaimer: I'm learning here, just like some of you. I'm a seasoned designer, but a rookie developer. That said, I'll be sharing my code I've used along the way. If you see something wrong, don't hesitate to point it out in the comments. Same thing goes for doing something in fewer steps. But for those of you in the dark out there, I really hope this helps!

GameMain.java

Since the splash screen is the very first screen to launch in our game, we'll need to extend the Game class. This is our starter file, and other classes will make use of this file later on. Most SpriteBatches from various screens in the app will be created with use of this starter class. You can read more about that set up here.

In our create() method below, libGDX uses the setScreen() method to go from one \"screen\" to another. You can see in this case, we'll be transitioning to the SplashScreen.java file.


package com.sixfiveagency.oliviasfireflies;

import com.badlogic.gdx.Game;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.utils.TimeUtils;

public class GameMain extends Game {

    private SpriteBatch batch;
    private int rendCount; //** render count **//
    private long startTime; //** time app started **//
    private long endTime; //** time app ended **//

    @Override\r\n    public void create() {
        batch = new SpriteBatch();
        startTime = TimeUtils.millis();
        setScreen(new SplashScreen(this)); //** start SplashSreen, with Game parameter **//
    }

    @Override\r\n    public void render () {
        super.render();
        rendCount++; //** another render - inc count **//
    }

    public SpriteBatch getBatch() {
        return this.batch;
    }

    @Override
    public void dispose() {
        // DISPOSE ALL RESOURCES
        endTime = TimeUtils.millis();
    }
}

SplashScreen.java

Now for the code that builds out our splash screen. I didn't bother getting into any intricate design details, instead just throwing on a background image, and a .png file that reads \"Olivia's Fireflies.\" Let's make sure it works first.

It appears that all other screens in the app (besides GameMain) will likely need to implement the Screen interface. Mine certainly did. Some notes about the code below:


package com.sixfiveagency.oliviasfireflies;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.utils.TimeUtils;
import com.badlogic.gdx.utils.viewport.StretchViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

import Helpers.GameInfo;
import scenes.Start;

public class SplashScreen implements Screen {

    private GameMain game;

    private OrthographicCamera mainCamera;
    private Viewport gameViewport;
    private Sprite background;
    private Texture logo;
    private long startTime;
    private int rendCount;
    private float aspectRatio;


    public SplashScreen(GameMain game) {
        this.game = game;

        background = new Sprite(new Texture("Backgrounds/forest.jpg"));
        background.setSize(GameInfo.GAME_WIDTH, GameInfo.GAME_HEIGHT);
        logo = new Texture("Backgrounds/olivia-splash-logo.png");
        aspectRatio = (float)Gdx.graphics.getHeight() / (float)Gdx.graphics.getWidth();
        mainCamera = new OrthographicCamera();
        mainCamera.setToOrtho(false, GameInfo.GAME_HEIGHT * aspectRatio, GameInfo.GAME_HEIGHT);
        mainCamera.position.set(GameInfo.GAME_WIDTH / 2f, GameInfo.GAME_HEIGHT / 2f, 0);
        gameViewport = new StretchViewport(GameInfo.GAME_WIDTH, GameInfo.GAME_HEIGHT, mainCamera);
    }

    @Override
    public void show() {
        startTime = TimeUtils.millis();
    }

    @Override
    public void render(float delta) {

        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        game.getBatch().begin();
        game.getBatch().draw(background, 0, 0);
        game.getBatch().draw(logo, Gdx.graphics.getWidth() / 2f - logo.getWidth() / 2,
        Gdx.graphics.getHeight() / 2f - logo.getHeight() / 2);
        game.getBatch().end();

        rendCount++;
        if (TimeUtils.millis()>(startTime+3000)) game.setScreen(new Start(game));
    }
    
    @Override
    public void resize(int width, int height) {
    gameViewport.update(width, height);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
        background.getTexture().dispose();
        logo.dispose();
    }

} // SplashScreen

Start.java

This is the screen the user lands on after viewing the splash screen for three seconds. The code is below, and you'll find it is very similar to the SplashScreen.java file. One obvious difference is Start points to a different background file, a logo for the middle ... and a button.


package scenes;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.utils.viewport.StretchViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.sixfiveagency.oliviasfireflies.GameMain;

import Helpers.GameInfo;
import huds.StartButtons;



public class Start implements Screen {

    private GameMain game;
    private OrthographicCamera mainCamera;
    private Viewport gameViewport;
    private Sprite background;
    private Texture logo;
    private StartButtons btns;


    public Start(GameMain game) {
        this.game = game;

        float aspectRatio = (float)Gdx.graphics.getHeight() / (float)Gdx.graphics.getWidth();
        mainCamera = new OrthographicCamera();
        mainCamera.setToOrtho(false, GameInfo.GAME_HEIGHT * aspectRatio, GameInfo.GAME_HEIGHT);
        mainCamera.position.set(GameInfo.GAME_WIDTH / 2f, GameInfo.GAME_HEIGHT / 2f, 0);
        gameViewport = new StretchViewport(GameInfo.GAME_WIDTH, GameInfo.GAME_HEIGHT, mainCamera);
        background = new Sprite(new Texture("Backgrounds/blue.jpg"));
        background.setSize(GameInfo.GAME_WIDTH, GameInfo.GAME_HEIGHT);
        logo = new Texture("Backgrounds/start-title.png");
        btns = new StartButtons(game);
    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        game.getBatch().begin();
        game.getBatch().draw(background, 0, 0,GameInfo.GAME_WIDTH, GameInfo.GAME_HEIGHT);
        game.getBatch().draw(logo, GameInfo.GAME_WIDTH / 2f - logo.getWidth() / 2,
        GameInfo.GAME_HEIGHT / 2f - logo.getHeight() / 2);
        game.getBatch().end();
        game.getBatch().setProjectionMatrix(btns.getStage().getCamera().combined);
        btns.getStage().draw();
    }

    @Override
    public void resize(int width, int height) {
        gameViewport.update(width, height);
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }

    @Override
    public void hide() {
    }

    @Override
    public void dispose() {
        background.getTexture().dispose();
        logo.dispose();
        btns.getStage().dispose();
    }

} // Start

Quick video below.

[embed]https://www.youtube.com/watch?v=e3-HeWf7M1k[/embed]

So that's it for this post. Next post, I'll show how make that button work, create the actual play screen and draw the jar and fireflies to the stage.

Feedback appreciated.