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!

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 file.

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:

  • If you’ve watched a few video tutorials, you’ll have noticed that you build all of your code in the core folders, but save all of your image and audio assets in the android/assets folder.
  • The source URL for all assets put you inside the asset directory. So, for instance, a Texture image path looks like this:
  • But I’ve organized the inside of my assets directory with other folders. So my path ended up looking like this:
  • The render() method gets called over and over again to draw your screen. When you see things like 60fps, that’s sorta like the render method running all its code 60 times every second. When things get that fast (like with video), movement appears smooth.
  • We use the object (game) from our GameMain, piggybacking on that to make use of its render method, thus creating our two images. So with the following code, we use the draw() method, which has three arguments: the texture name (background), and the x and y coordinates (0, 0) … which means the bottom left of our screen.
  • The Olivia’s Fireflies logo is slightly more complicated.  It also uses the draw() method with the three arguments. But we’d like to position this logo/image in the middle of the screen. You can find the middle of the screen by calling in the device width and height, and dividing each by two:
  • However, since objects are drawn from their lower left point, the image won’t actually be centered. You’ll need to also divide the width and height of the image, and subtract that from the first value. Try it both ways and you’ll see what I mean.
  • Don’t forget to dispose of anything that can be disposed. Unsure what you can dispose? Just put your cursor down inside the dispose() method, and type out an image name (for example), put a dot after it, and see if dispose is an option in the automatic dropdown (we’re talking Android Studio here).
  • Lastly, you’ll see at the bottom of your render() method, that we’ve used setScreen again. It’s telling your app than in 3000 milliseconds (3 seconds), go to the screen.

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 file. One obvious difference is Start points to a different background file, a logo for the middle … and a button.

Quick video below.

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.