Production: UI Design

Introduction

In the last post, we added shield art that surrounds the player when the shield powerup is collected. Today is all about the user interface design.

I must admit, I’m pretty excited to finally be writing this guide on UI design! We need to account for the items, score, and text we’ll display throughout the game. Prepare yourself for a lot of images ahead.

The Challenge

Our challenge is to lay out some design ideas in Photoshop and plan for the implementation.

We’ll be in Photoshop for this guide and follow up with the implementation next.

Let’s get started.

New File

First, we’ll create a new Photoshop file. I’m going to make an image at 1126×634. new photoshop file modal

Now I’ll bring in our new background image in a new layer and lock it, so we don’t accidentally move it around as we’re working on the design. background layer

Another step I take before diving into the design is to set margin guides along the sides of the image to ensure that It’s clear that the items I am adding are inset the same amount. This is done by creating rectangles with the width and height I want UI items to be away from the sides of the screen. I use #4fe897 as the background color. guides

Then, I’ll select the layers and group them (Ctrl + G on Windows) and name the group Guides. Then I’ll set the opacity for the group to 20% to blend into the background. I keep this as a top-most layer so that it’s clear if an element is too close to the edges. guides opacity

Let’s also add our player sprite for reference. I’ll position it using the bottom guide. player sprite

With that done, we’re ready to begin working on the UI design. Ideally, once we are at this stage of development, it would be nice if our GDD (Game Design Document) was complete enough that we didn’t have to worry about doing redesign work, but alas, that is not how it typically goes.

Always expect there to be changes, especially at the eleventh hour.

So although I make some definite statements here on what the design should account for, there’s a good chance I’ll change my mind as new ideas surface or the story slightly changes. This is not a game I’ve pre-built for this guide series; I am building it as we go.

With all that out of the way, let’s move on.

Lives

I think the player will have three lives, and we could represent that quite easily by having three player sprites next to each other at the top left of the screen. To illustrate the lives remaining vs. lost, I’m lowering the opacity of the sprite. I believe this will serve well to see how many lives are left at-a-glance.

Our guides make it easy to place this at the top left side of the screen. player lives

Boost

Our boost powerup will allow the user to move faster while they have enough boost remaining. To represent that, we can use a meter that will start filled and slowly go down anytime the player activates the boost.

Since we are already representing lives in the top left of the screen, it seems natural to also have this meter in the same area. It would like this: boost

Shields

I’d like to have the ability for the player to stack up shields to a max of 3 or more. To represent this in the UI, we could place a small shield sprite next to a number, like x1, to show the player how many hits they can take without losing a life.

Again I will place this on the left side just below the boost bar. shields

Stars

Stars play into the game’s story, and we need to show how many stars the player has out of the amount remaining. We’ll use a similar pattern as the shield but with the star sprite. stars

Messages

Finally, let’s add a place for large text that will communicate the current wave or state of the game. It could be for displaying "Game Over" or "Wave 1", for example. The design will probably change, but I’ve placed a surface in the center of the screen for two lines of text for now. messages

Summary

Phew, that was a lot of screenshots. I hope you enjoyed going through this with me as I iterate on ideas for the UI. I believe we’re at a point where we can move forward.

Stay tuned for the next post. Take care.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s