Sushi Get

Inspired be the healing properties of sushi, I’ve decided to use these various types of sushi as the health items in Hanami. Eating food to restore health in video games is quite a traditional system. For some reason, eating chicken found on the rough streets of Streets of Rage was perfectly acceptable, and in fact, good for your health. Here’s Axel, eyeing up a yummy looking apple in Streets of Rage 2:


What’s more, finding a fully cooked roast chicken in a barrel was nothing out of ordinary. It’s not really a gaming aspect that has survived, for whatever reason…

Trying to place tiny little pieces of sushi in a game where the character is only 16 pixels tall isn’t without its complications. I started off trying to draw sushi into 8×8 squares so that they wouldn’t look unnaturally out of proportion. Although proportionally this worked, I wasn’t happy with the limitation of how much detail I could put into each item.


These tiny little pieces were also very difficult to place into the game. Either they stood out immensely, mainly because of the colour differences, or they were completely lost in amongst the scenery. So, instead of having somehow healthy pieces sushi just lying around the place, I decided to give them a container. This is the equivalent to chests in adventure games, or the item boxes in games like Crash Bandicoot and Super Mario. Open the box, get an item! It’s a simple concept.


I think if you were to buy sushi in a box, it would probably be a sort of takeaway bento, which unfortunately for me isn’t very distinctive. So, for now atleast, I’ve decided to cheat with this takeaway noodle box. This is much more recognisable, and at least its contents are expected to be food… For those who recognise Japanese kanji in pixel form, I’ve managed to squeeze in the symbol for “life” onto the front of the box.

The idea is that when the player approaches the box and presses the “x” key, the box reveals its contents and that type of sushi is added to the inventory, which I’m currently in the process of making. I’ve decided to use a similar system to the one used for collecting mushrooms in Superbrothers: Sword & Sworcery EP. You can’t see it well in this image, but there is a collectable mushroom on the right hand side of this image:


In S:S&S EP, mushrooms can be found which allow the player to see spirit beings, but eating a mushroom will also restore the player’s health. When a mushroom is collected, a mushroom icon appears at the top of the screen which indicates to the player that they are now carrying a mushroom. When a second mushroom is collected, the same thing happens but a quantity is added, so the number 2 will appear next to the mushroom icon. The player can only hold three mushrooms at once, which is annoying as most of the way through the game the player has five hit points, coincidentally the same amount as Hana in Hanami.

So now I have two items, one container item which contains one sprite image of the noodle box. The other is a “sushi” item, which contains 4 16×16 subimages of the various sushi/onigiri. I’m infinitely more happy about being able to draw larger sushi sprites with that added amount of detail.


When a noodle box is acquired, one of these images is called at random to the top of the screen. This indicates to the player that they have acquired a piece of sushi from the box! Calling a random image saves me the time and pointless effort of assigning a specific subimage to each individual instance of the sushi box, but ultimately makes no difference to the player as each item has the same effect.



Looking at this screenshot now, I feel like I could perhaps create extra HUD space to act as a background for the sushi so it stands out a little more? As I currently don’t have an inventory to place the item into, the item disappears after a few seconds never to be seen again. I’ve spent a little time practising making inventory screens and think I know the system I’m going to implement. There are ultimately two methods of creating an inventory in Game Maker- one is have a designated room where all the inventory information is held, and the other is to call an inventory object which sits above the imagery on-screen. I will be using an object, as I feel this won’t interfere with persistent room settings etc. which could get quite complicated. I’m also familiar with temporarily disabling on-screen activity for pause menus, so I kind of know what I’m doing! Before I can really get started, I need an inventory design (or atleast template) which I can work to. I’ve got a few designs in mind, I just need to work out some layout issues mainly.

Hanami’s Quick Guide To Sushi

As everyone knows, sushi has healing powers. Most types of sushi will restore 1 hit point when eaten.

Nigiri にぎり

An oblong shaped slab of sushi rice topped with certain types of fish or egg laid neatly over the base. Sometimes nigiri is held together with a strip or “nori” seaweed.

Maki まき

Maki refers to rolled sushi, either with an outer layer of sushi rice or wrapped in nori. The filling runs through the centre of the rice, and can consist of many things from raw fish or meat to bean curd.

Gunkan Maki ぐんかんまき

A roll of nori filled with sushi rice and usually topped with fish eggs.

Temaki てまき

Hand rolled sushi wrapped in a cone of nori, with the filling of fish or fish eggs popping out of the top!

Onigiri おにぎり
(strictly not actually sushi…)

Onigiri refers to Japanese rice balls, often shaped in triangles and wrapped in nori. I’ve included this here because like sushi, onigiri is a food that looks distinctly Japanese!

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: