Wyatt
Wyatt

Reputation: 523

Libgdx | How to create a splash screen?

I am wondering what the best way to create a splash screen is (When you start game, the companies logo animated). I have create a .mp4 splash screen in after effects, but can't find a way to display it in libgdx. What's the best way to create a splash screen? Can you use an .mp4 file and play it or not?

Upvotes: 1

Views: 5160

Answers (2)

hamham
hamham

Reputation: 571

I have to say the accepted answer by @AkashBhave is a very strange way of making a splash screen, and probably should not be accepted as the "best" way to do it. The purpose of a splash screen is to temporarily display something while the game or app loads in the background. If you have a lot of assets to load, you could be looking at up to 10 seconds to prepare the app on slow devices. The accepted answer says absolutely nothing about asynchronously loading assets, and given that there is just a simple counter before continuing to the "game code", one can assume that this splash screen would only be shown after everything has already loaded, otherwise there would be no guarantee the assets are loaded and it would just crash if not.

Personally I think the "best" way to make a splash screen is to make it display as fast as possible, preferably less than a second when one clicks on the app to open it. The way to do this would be to use the AssetManager to load only the Assets you need to display your splash screen. Then, while your splash screen is displaying/animating, you tell AssetManager to load the rest of your core components. Once it is finished, you proceed to your main app.

I posted an answer with a bit more details related to this here, and there is a pretty good in-depth guide on the AssetManager on the libGDX Wiki.

So, the key here is assetManager.update(), this does 2 things. 1, it tells the AssetManager to load the queue of .load() items, and 2, it returns true if it has finished. Therefore if you also want to ensure your splash screen has displayed for a certain amount of time, you would do something like this;

public void render(float delta){
    //code to render splash here

    //check if assets are loaded and time greater than 10 seconds
    if(assetManager.update() && TimeUtils.timeSinceMillis(startTime) > 10000){
        app.setScreen(new MainScreen());
    }
}

Or, if you do have a libGDX Animation, you would do something like;

 if(assetManager.update() && animation.isAnimationFinished(startTime)){..}

Upvotes: 8

AkashBhave
AkashBhave

Reputation: 749

There is a pretty easy way to implement a splash screen without creating a new activity. The way to set a time for your splash screen is to take the difference from when your app was first started (in the create()) method to the current time. Declare a start time variable directly in your class:

long startTime;

You can get the time elapsed using TimeUtils.millis(). Put this code into your create() method like so:

@Override
public void create() {
    // Initialize all your other variables here
    startTime = TimeUtils.millis();
}

Then in your render() method (which is running all the time), add the code to check for the elapsed time. Here is an example:

@Override
public void render() {
    if(TimeUtils.millis() - startTime != 10000) {
        // 10 seconds haven't passed yet
        batch.begin();
        // Creates a white background
        Gdx.gl.glClearColor(1f, 1f, 1f, 1);
        // Draw your animation here
        batch.end();
    } else {
        // Put real game code here
    }
}

The code above basically checks to see if 10 seconds haven't passed. If so, it displays your animation. If not, put all your regular code for after the screen has loaded.

Unfortunately, there is no direct way to display a .mp4 file in Libgdx. This might be a problem for your app. One solution is to convert your .mp4 file to a .gif (animated image file), using this website. You can then extract all those frames to many image files using this .gif splitter. If you have another way to extract your frames from your video use that method. Once you do though, loop through all those images to create your animation. Here is what you could do:

Texture[] textures = new Texture[NUMBER_OF_FRAMES];
for(Texture t : textures) {
    batch.draw(t,
            Gdx.graphics.getWidth() / 2 - t.getWidth()/2,
            Gdx.graphics.getHeight() / 2 - t.getHeight()/2);
}

Of course, you could always just use one static image, which is much easier to display, and put that in your render() method. Regardless of your method, hope this answer helps!

Upvotes: -1

Related Questions