Everything A Game Should Have

Before recording the final playthrough video, I’ve played through the entire game myself to make sure everything works and to work out an effective route to follow so that I can show every blossom being obtained. This was also the best way to see if the jump to the ending slides worked, which as it turned out it didn’t! So I’ve fixed that, and added one more very final slide that shows the kanji for “owari”, meaning “end”.


To wrap the game up for testing, I’ve added a few finished touches. I’ve replaced the default Game Maker loading screen with a horizontal version of the game’s logo. The main reason I’ve decided to align the logo horizontally this one time only is because it sits better on the monitor. This is shown when the game is initially opened up.


In this screenshot you can also see the Hanami blossom icon in the task bar along the bottom. This is the same as the game icon, although because it’s bigger it hasn’t actually scaled very well. I’ll be sure to scale it properly myself before converting it to a 32×32 pixel .ico file!

The last addition I’ve made is a readme and help file which will come in the game folder. I had fun creating the typography in the readme text file, inspired by the likes of Spelunky and Ninja Senki! The file is a basic and quick look at some game info including controls, although a pdf version of the game manual will also be available.


The game’s help file is the same as this but unfortunately without the bubbly title. This is brought up in game by pressing the F1 key.

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:

Tiles & Sprites

I may have been wrong in a previous post where I stated that character sprites were often double the height of a single tile in 2D games. I’ve been working out some background tile to character sprite ratios, and firstly have found that there are very few recurring ratios, and secondly that there are a lot of games which use character sprites that are exactly the same height as their background tiles.

Most interestingly is that I hadn’t noticed this yet in any of the game I’ve previously written about on this Blog. In my head, I think I assumed that character sprites needed the extra detail provided by double height.

In Fez, Gomez measures the exact same height as the background tiles (with the exception of The Fez which sits on top of this height).

Again, in The Archer the character sprite and tile height are very similar, except for hats which seem to cause the illusion of height in games!

In Jonathan Lavigne’s Ninja Senki, the character sprite is not only the same height as the background tiles but is a pretty similar width too!

And in Cave Story, the character sprite for main character Quote is the exact same height as the tiles, however the NPC character is slightly taller.

What confuses me about this selection of new(ish) games, is why they all decided to work to these proportions. From an aesthetic point of view, I think it makes everything look neat and tidy, as every aligns nicely to a consistent grid. I can imagine that from a gameplay perspective, these proportions work in the favour of the player who must calculate jump and fire distances etc. However when I looked back at old NES platformers like the original Castlevania, Contra, Ghosts ‘n’ Goblins and Metroid it seemed that traditionally, character sprites were double the size of the background tiles (actually, in the case of Contra I couldn’t decide what size the tiles actually were, so I could be wrong!)


Background tiles half the height of character sprites:

One slight exception I found amongst old NES platformers, was the original Super Mario Bros, and similarly Kirby’s Adventure. In Super Mario Bros, Mario starts the game as a half-sized sprite, which is roughly the same shape as the background tiles.

However, this reduced size is probably just a way to leave room for growth when a mushroom is eaten:

This might similarly explain Kirby’s small size in Kirby’s Adventure, as Kirby expands when swallowing an item or enemy.

In this case, it’s probably just more likely that Nintendo have tried to show how small Kirby is in comparison to the world!

Even as we move into the world of 16-bit, sprite sizes remain consistent with previous versions of games. In Super Mario Bros 3, the sprite proportions remain pretty much the same as the original. In Super Matroid for SNES, character Samus seems slightly taller than before. She does wear a helmet though, so this additional height is another one of those hat things…

So the question is “who is right??”
After reading various forums, the general consensus is that it all dimensions are entirely the choice of the designer. There is no right or wrong, or good or bad. Which leaves me at a point in development where I need to make a choice… So for now, I’m going to concentrate on creating a sprite equal to the height of my (hypothetical) tiles. This means creating a sprite which is 16 pixels in height, rather than the 32 I was expecting to be using. Personally, I think this makes the game look nicer and hopefully will make it play fluently. I will have to convert if I find it difficult to add a decent amount of detail to my sprites, or if the space limitations make it difficult to animate, although I’m feeling pretty confident and inspired by my Indie Heroes who have proven 16px sprites to be ideal!

Hanami Idea Explosion!

I guess this is a little like brainstorming, only it’s more of an explosion of words. I can’t think of a better name for it, especially one that sounds as exciting!
I got this idea from Gabriel Verdon at the beginning of his Devlog for The Archer. He begins development with a quick introduction to the concepts behind the game, and his objectives for the finished result. As a quick introduction to the characters and settings for the game, he takes a simple statement and pulls apart separate words to explain further details. With the ideas I’ve got at the moment, I guess my opening statement would be:

A lone girl travels empty streets collecting cherry blossoms.

To make the statement a little more specific, I thought I would expand it to:

A long girl travels through the empty streets of Japan collecting Cherry Blossom after Hanami.


It’s still quite a vague overview, but I’ve left room for improvement ^_^.

Notes:

-Hanami- Gameplay is based around environmental obstacles. The player must find blossoms in hard-to-find or hard-to-reach locations, although I’m not sure yet whether this will be with the aid of special abilities or if the challenges will be fairly similar the whole way through. This will ultimately depend on what I manage to program.

-Feel of the game- There will be a conflicting sense of both loneliness and serenity throughout, achieved through lack of player communication and a peaceful setting.

-Symbols- Japanese written characters (Kanji) will appear throughout, as well as traditional Japanese symbolism such as the Sakura blossoms themselves, which are an ephemeral symbol of mortality.

-Music- I would like the music to sound like a typical “game soundtrack” (repetitive, electronic, catchy yet annoying.) But I also want to base it one traditional Japanese tunes, to help the game feel authentic. Throughout the project I will be listening to a lot of Gackt and Nobuo Uematsu for inspiration, but no changes there really!

-Movie Influences- Studio Ghibli’s so-called “Blue Sky, Green Grass” films- Laputa, Porco Rosso, Kiki’s Delivery Service… but also My Neighbours the Yamadas for a little insight into Japanese life, and anime like Angel’s Egg and Cat Soup for the sense of journeying through strange, lonely worlds (these second films also add a sense of darkness, which is something I’m currently toying with.)

-Game Influences- The Archer for its incredible use of Game Maker and beautiful concept and asset artwork, Ninja Senki for its Japanese themes and simple graphical style which create a great example of everything a platformer should be, and Nevermore 3 for its representations of isolation and loneliness in a beautiful world.

-One thing I really want to get across is problems with communication in a foreign place, and a lack of understanding of signs and symbols. I want there to be minimal dialogue throughout the game AT BEST, the player will have to rely on their own interpretation of symbols, imagery and gestures in order to get through the game. Some will be more complex than others!

-Verdon goes into a lot of details on his post about the inventory system, and how it acts as a means of providing higher-resolution details of items and characters which don’t appear very detailed in the actual game. This is definitely something I will consider! There will be items and pick-ups to help the character along, however I’m not sure what these will be yet.

EMP Countdown 5! 3 More Days…

Apologies for the inconsistent post titles, I can’t ever remember what I used before and nothing seems to sound right.

Day #5: Jonathan Lavigne (& a bit of Paul Robertson too)

Jonathan Lavigne or Pixeltao is a devoted developer/pixel artist who is responsible for the great look of several awesome games. Despite my fondness for exciting, experimental, rule-breaking, risky indie developments, I love Lavigne’s game making rhetoric. On his blog he says:

I love every aspect of the process involved in making video games: pixel art, coding, game design and drawing. I don’t have any pretentions about being original or experimental. What I’m really into is creating simple, fun and well designed games.


Ninja Senki was the first of Lavigne’s games I came to discover, drawn in by its strikingly colourful pixel-art and and subtle retro-references. Just as he describes, there’s nothing unpredictable about this game- the player really knows what to expect. It’s just a rehash which plays like a multitude of enjoyable games. Which makes it successful!


Lavigne’s next big creation was Wizorb, another retro rehash. Wizorb just takes elements from all over the place, from classic RPGs to action and adventure games, and combines them with a classic “block breaking” style main campaign. Lavigne points his potential players towards games they may have played in their past such as Breakout and Arkanoid. Personally, I had a clone of something like this on an early Windows PC! The twist on this clone is that there is a story plot set in a fantasy world, and as well as playing in this breakout style, the player can use items they’ve gained whilst playing to purchase new skills etc. which breaks away from the arcade-style high score objective. In my opinion, by remaking a collection of old games and merging them together, Lavigne has actually created something quite new and exciting.


Lavigne’s biggest success has to be his work on Scott Pilgrim vs The World: The Videogame, where his ability to clone really comes to light. The game takes the style of a Streets of Rage style beat ’em up, including many of the same gaming cliches which are common amongst this genre. The game is the perfect accompaniment to the comic series and the motion picture, which use a lot of retro videogaming themes and throw in references all over the place. The game includes the character art and animation of Paul Robertson, an anime inspired pixel-artist with some… strange tastes. Robertson uses frame-based animation to create his 2D game-sprite like animations, however the game itself is not made in a completely traditional way, evident in elements such as the large non-tiled background images.


One of Robertson’s few animations non-obscene animations, depicting the film Attack The Block. Most of Robertson’s images/animations either directly or indirectly reference retro videogames in some way!

Links For Jonathan Lavigne:
Official Pixeltao Blog
About Scott Pilgrim on the PixelDrip Gallery

Links For Paul Robertson:
Paul Robertson on Livejournal
Scott Pilgrim Sprites on Game Set Watch