Game Design: Splash Screen

Welcome to a new series I am working on which breaks down my latest game, Super Jetroid, and goes into detail on how each part works. I have designed this new series to be as platform agnostic as possible. While the game was built using ImpactJS and the code I post will be JavaScript, I want to focus on the big picture concepts of how I think through my coding problems so you can incorporate the same principles in your own games no matter what the language is. To get started I wanted to talk about Super Jetroid’s splash screen which is a critical entry point into the game.

The splash screen is the first thing your player interacts with when they launch your game. It is a very important screen that can also help inform the player about your game, how to play it and even set the tone of the entire experience. One of the ways I like to do this is with an attract loop. This was made popular by arcade games that needed to keep changing images on the screen to avoid burn in and also to help show the player how the game works via instructional screens and in game demos. Let’s take a look at Super Jetroid’s splash screen.

While you look at this demo of the splash screen, avoid clicking on it to see the full attack screen loop with instruction interstitials.

I designed my splash screen to have 3 distinctive goals:

Add a Sense of Motion to the Screen

You may have noticed the use of animations to keep the splash screen active and engaging. These were easily accomplished by a technique called tweening, which was incredibly popular in the Flash days. Tweens are simply programmatic animations but they offer a unique range of flexibility to bring your splash screen to life. The key with any animated splash screen is to map out how your animation will work and think about the transitions from one section of your game to the next.

To start, there is a buildup which creates the basic foundation of the splash screen. I chose to go with a Nintendo box art look for my splash screen. There are 4 main parts: the background image, the title, the call to action text in the top left and the main character image in the foreground as the focal point. As I transition from page to page in the attract loop, I simply hide the foreground character and pull up a black matte (a graphic you used to mask something off) that hides the background image. Once the background image is hidden, I can swap it out for something new and animate the black matte down again. Each animation transition is consistent and timed which keeps the entire experience from being to jarring to the viewer.

Finally when the player is ready to start the game, I return the splash screen to its default state and another click will start the game. I animate all the elements out the same way they came in but in reverse. Animating out is always faster than the initial build up to speed up leaving a section.

Explain How to Play the Game

With modern games, especially those distributed digitally, there is rarely a chance to inform the player how to play your game. I am vehemently against in game tutorials. I hate them, I don’t like building them and most of the time they insult the player or get in the way. When I used to play Nintendo games they were either intuitive or forced you to figure out how everything worked. They encouraged experimentation and instilled basic game design principles to guide the player. I still feel like there is a happy medium so I decided to include basic instructions during my attract loop. The goal is to make learning the game as simple as possible. The actual game has more moving parts but I only highlight the key gameplay mechanics to get people started, after that they are on their own. Most people will skip right over them so I also make the screenshots of the game the instruction pages so people know exactly what they are getting into before downloading.

Cleanly Transition to the Next Screen

The final piece of the puzzle is how I move onto the next screen from the attract loop. You can exit the attract loop at any point by clicking on the screen or hitting the return key. As I mentioned earlier, this will return you to the default state of this animation, which brings back the large main character to the foreground and the call to action text goes from “press anywhere to exit instructions” to “press anywhere to start”. I make this a two click action because you may have accidently touched the screen during the instructions and I don’t want to just throw the player into the game with no way of getting back. My level select screen doesn’t have a back button since there is really no point in going back to the splash screen.

I also take advantage of the black background of the game’s canvas and animate elements in and out from the edges of the screen. This allows me to have a common animation starting point in all game screens which is simply a black background. This will allow you to have smother transitions from one screen to another and cuts down on jarring visual transitions.

Wrapping up

Before I end this post I wanted to call out a few things. I used a library called TweenLiteJS which is a port of a library I used in Flash. I really liked this library and it does a great job helping me not only animate my graphics but also time and choreograph each step of the animation. I was able to set up all my tweens then call play or rewind on them depending on if I was building up or breaking down an animation. I also made sure to work out all the animations on paper first, then mock up each part in Photoshop. Programmatic animation is time consuming so it’s important to work out all of the details you can before starting. Finally if you are working with canvas or blitting you will want to animate proxy objects of your images since bitmap data is being rendered to a display and will need to know where to be drawn to. In the case of this animation I set up objects for each of the animated elements with x,y, width & height properties that I can tween. When I render the bitmap I have it look up that object’s properties. Here is a rough example of this in action:

//Build up
selectionTextImg:new ig.Image("media/select-animations/select-text.png"),
selectionTextObj:{ x:0, y:0 },
// Tween Setup
this.selectionTextObj.x = -this.selectionTextImg.width;
this.selectionTextObj.y = this.selectionBoxObj.y - this.selectionTextImg.height - 20;
this.selectionTextTween = TweenLite.fromTo(this.selectionTextObj, .5, { x: this.selectionTextObj.x }, { x: (ig.system.width - this.selectionTextImg.width) * .5, ease: Strong.easeOut });
// Animate In;
// Animate Out
// Draw
this.selectionTextImg.draw(this.selectionTextObj.x, this.selectionTextObj.y);

Creating and managing these proxy objects adds some additional work on your end but it will let you cleanly organize elements that don’t have direct coordinate properties for where they render.

Finally the last thing is that it’s really easy to create a blinking animation similar to how the call to action text by using modulus, which is the % sign. Since modulus will return 0 or a number representing a fraction you can simply perform modulus on a timer’s delta based on how many seconds the blink should last for and if the value is 0 then it will be false and shouldn’t render verse a returned value which would end up being true. Here is what that looks like:

this.showStartText = Math.round( % 2 ? true : false;

I hope you found this post helpful. As I continue to talk more about Super Jetroid I will cover other aspects of the game such as how to build a select screen like in Angry Birds to basic Alien AI and in game visual effects to add mood and depth to your game.

Subscribe To My Mailing List

Want to learn how to make a game? Not sure where to start? Even if you are a seasoned game maker there is still a lot you can learn from my mailing list. I'll be covering tips and tricks for how to build, release and market games each month.

Simply sign up for my mailing list and also get access to a 50% off discount code for my eBooks and other content. I promise to not spam your inbox!

Join Now