GUI Design

Based on yesterday’s speech bubble designs, I’ve spent today working out some other interface elements. Apart from the game’s main menu (and potentially a separate pause menu), there are two main GUI elements which will keep a consistent style throughout the game. One of these is the HUD (Heads Up Display), and the other is the game’s inventory.

The HUD

I was previously using a placeholder HUD which shows information about the amount of flowers collected and the player’s health. The reason I placed this here temporarily was mainly as a debug object for me to test when damage was being taken and how well the flower collection ds_list was working. In the finished game, the HUD will be a quick insight into level progress, showing the same information just in a nicer graphical style.

I’ve had a quick look into how other Indie developments have incorporated HUD systems and found that they tend to be very basic, using simple icons and in some cases text only. This example from Ninja Senki is a very clear way of displaying information which doesn’t get confused with any other element on screen.

So, simple is good. There doesn’t seem much point in clogging up the screen with pointless graphics unless they are meaningful or relevant. The HUD should be concise and to the point, so that the player can glance at it quickly and get a good impression of the information displayed.

The Legend of Zelda: A Link to the Past has a fairly complex HUD system, but enforces clarity by using unique icons and indicators rather than using text.

Key:
The Green Bar (far left) represents special ability charge levels
The Bow Icon (left) represents the secondary item equipped
The Green Gem icon represents the amount of rupees the player has
The Bomb icon represents the amount of bombs the player has
The Arrow icon represents the amount of arrows the player has
The Heart Capsules (far right) represents the player’s hit points.

This sounds complicated to explain, but each feature is added into the game gradually, allowing the player time to get to know the HUD and where to look for info. I’ve kept this in mind whilst designing my HUD object, even though mine will only display two pieces of information! Originally, I wanted to swap my HP figure for a sliding health bar, but keep the flower icon to display info on how many flowers had been collected. Giving it some thought, I’ve moved onto a health system which is more like Zelda’s heart capsules. Because Hana will only take 5 hits before “dying”, and each obstacle deals the same amount of damage, I thought it would be more appropriate to create an image which shows each individual hit point. You can see my thought progression in the sketches I did this morning…

I’ve tried to keep the window shape and style similar to that of the speech bubbles, which will now be a consistent theme throughout the GUI. I’ve added the character profile picture partly as a way of indicating “this is player health and partly because of some advice from I found in a forum about pixel art games- A 16×16 pixel character is an extremely distorted version of a character design, and showing a higher resolution image of the character somewhere in the game acts as a little player gratuity. On the right hand side of the image you can see a rough design for a menu/inventory, where I’m thinking of using an even large character image, based on my main concept art for Hana.

The size of the “high-res” head-shot is just over 32×32 pixels, twice the size of the entire original sprite. This took an unpredicted amount of time to create, because of the increased opportunities for detail in the drawing! I wasn’t originally sure what I was going to use as a representation of a hit point, but liked the idea of using something rounded. In the end, I’ve gone for a Japanese coin look!

This now sits in place of the old HUD, the only real similarity is that I’m still using a string of text to display how many flowers have been collected.

The Inventory Menu
I haven’t managed to fully design the inventory yet, but I’ve planned out everything that should go in it! Information like:

• An even higher resolution character image
• Character health
• Health restoration items collected
• Flowers Collected
• Petals Collected
• Perhaps a little info on level (at least some indication of which level the player is currently on!)

After getting to grips with the enlarged head image that I drew earlier, I thought I’d work on the full character image first! As the menu is likely to take up the majority of the screen, I’ve created this image at a height of 100 pixels (which is scaled up to 300 when displayed in the game). This is basically a pixelated version of one of my previous sketches.

To give you an indication of size relative to the game sprite and other elements, I quickly whipped up this scary little image where I placed the new drawing into the game:

I’m still having problems capturing videos of gameplay, so until I work out how to sort this out/find an alternative to Hypercam, I’ve strung together some screenshot highlights of my game so far.

This week’s aim was to create a level which was playable from start to finish and included some of the functions that would be seen in the final game. The result is a playable place-holder graphic level with a basic placeholder HUD (“Heads Up Display”) containing level progression info. Below is a list of all the current features…

Incorporation of the EasyLighting system

So far I mainly have lights inside the first building, some of the lights can be seen in the image above. When the player moves into a light source, the light affects the brightness of the sprite’s colours. A comparison can be seen below, when the character moves into an unlit area.

Ladders

When the character comes into contact with a column of red lines such as this one, the custom variable “canc” is enabled which I’ve set up to allow for vertical movement. I’ve used some of the Grandma Engine’s custom variables such as “vspd” (vertical speed) and “S_JUMP_SPEED” (jump speed). The current climbing speed is half the value of the jump speed, which I’ve currently set to -5.25. This has actually resulted in climbing speed which is faster than the walking pace, but I’m keeping in for now for faster level testing!

if (place_meeting(x,y,obj_ladder)) {

vspd = 0;
canc = true;

if (keyboard_check( key_up ))
vspd = S_JUMP_SPEED /2;
if (keyboard_check( key_down ))
vspd = (-S_JUMP_SPEED) /2;
}

Press up to warp function

Previously, warping from room to room occurred on contact with the “warp” object (invisible in this screenshot!) In this instance, the warp object is placed in front of the door, so that when the character came into contact with the door, the character would be automatically transported outside the building. The X and Y coordinates for the door are the same in both rooms, so the character arrives in the new room in the same location.

Since incorporating this feature, I’ve adjusted the mechanism to only warp when the “up” key is pressed. This was quite simply achieved by adding the line:

if keyboard_check ( vk_up )

to the code!

Item Collection/Level Progression

I’ve dotted some of my sakura objects around the level for player collection. On collision with the character, the blossoms disappear as they did before to avoid the player picking up the same flower twice.

I’ve created a very basic HUD which tells the player how many flowers they’ve collected. Each time a blossom is collided with, the figure (starting at 0) goes up by one. This affects the global variable “gamescore”, controlled by a HUD object which always appears in the player’s view rather than on a fixed point in the level. The object contains draw commands which tell Game Maker to draw the figure “0” followed by a string of text saying “/30”. This is currently just a random figure as there aren’t even 30 collectable items in this level…

Player Hit Points

Underneath the level progression information is a figure representing player health. This needs the most work so far! I’ve currently set this figure to start at 5, and decrease by one every time a black blossom is collided with. These blossoms also disappear on contact, so you can only be hit by something once. The “enemy” objects probably won’t disappear in the final game, for now I have simply set it so that health cannot reach 0. I don’t currently know what will happen when this figure reaches 0! But it will probably re-locate the player to a designated re-spawn point.

As for the rest of the level, I’ haven’t really made any changes but I’m hoping to work on some new tiles soon. Tracing the level design by hand has given me some really good ideas for environmental tiles and objects. Hopefully I’ll get a video up and running very soon!

EDIT: My Devlog Video 1 is now online! And nearly works.