Game Manual Design Development

I’ve started off designing the manual with the front cover, because it seemed like a good place to start. I wanted this to be similar to the opening screen of the game, so I started off by making a higher resolution version of the game’s logo. I tested out various ways that I could make the Hanko stamp in Illustrator, using various line styles and shapes.

Hanko stamps seem to come mainly in either square, circle or oval, although on some sites I’ve found rectangular ones. The problem with using Hiragana instead of the more appropriate Kanji is that it needs some sort of alignment to make sense, otherwise I would rearrange the letters to make a formation that best fit any of these shapes! For this reason, I felt that a rectangle would be best. I tested each shape out with the title, and definitely felt that rectangle suited best.

To accompany the logo, I’ve also been working on a background image for the pages of the manual. This pattern is based on the auspicious cloud patterns I researched earlier for cloud design. I used the pen tool in illustrator to create this outline first:

I’ve then adapted this in Photoshop. I’ve created two variations- one for the cover and a more subtle version to be used on the other pages of the manual. The more subtle variation uses a white version of this outline with a very pale purple background. This is the same colour as the menus and the title screen in the game.

The version I’ve made for the front cover is slightly more elaborate. I’ve used darker colours to closely resemble the game’s title screen, and I’ve merged the line colour with the background colour. I originally planned to place the logo in the first third of the grid, but after a little rearranging and testing I realised it actually had much more impact in the centre. I don’t want to add anything more to the cover now, so it makes sense to sit in the centre of the page.

I’ve started filling in the first few pages of the manual, but haven’t finished any single page yet. The contents page is looking the most finished right now, as there wasn’t much to put in it in the first place! I’m working on little bits like the number tabs on the side of the page which resemble the style of the game’s GUI to keep the document consistent with the game.

One addition I’ve made since I wrote up the original contents is a “travel guide” in the back, which contains a table of Hiragana and a few Japanese phrases that the player can look out for in the game, although not everything will be included. If the player really wanted to, they could use the Hiragana table and run the romaji through a translator to see what comes up. This could turn up some pretty good results. As a test, I ran one of the phrases I’ve used through Google Translate and ended up with this:

I have it under good authority that the phrase I typed, “onaka ga suite imasen”, means “I am not hungry”, although obviously this doesn’t translate well literally!

Exploring Colour

It’s been a difficult task trying to figure out the exact shade of a typical Cherry Blossom, because there just isn’t one. I’ve had to come to the conclusion that most shades of pink work.

I picked this close-up photo (believe it or not it’s from an old myspace layout!) to be my official blossom reference. I can’t guarantee its authenticity, but it does show a promising contrast in colour from its very pale pastel tips to its desaturated centre. And the colours aren’t affected by any other sources, such as vibrant lights or contrasting backgrounds. I found a really great site called Color Explorer which rips colours straight from images and creates a colour palette for you, complete with RGB values. Here’s what it made of this photo:

It’s just as I was hoping really, you’ve almost got a completely smooth gradient from light to dark, without too many anomalous colours in between! I won’t need all of these colours for one very low-res flower, but the full colour palette can now be used for anything to create some consistency. I haven’t put much thought into my User Interface yet, but I would assume this would be a good application of this particular palette!

I made myself a little colour card to reference the flower colours, from the dark centre to the light petals. For each colour, I picked a slightly darker shade and a slightly lighter shade to act as shadows and highlights:

This is the result when applied to a 16×16 Cherry Blossom:

The shape of the flower was fairly difficult to apply to such a small image, however I’ve tried to give the impression of some depth as the original flower is far from 2D. Obviously at this stage, the flower is roughly the same size as the character, throwing away any hope of proportion! The flower object will work at half this size, although a lot of the detail is lost.

The size I use will have to depend on which looks better in the game. The flowers needs to be conspicuous enough to stand out as collectable objects, but subtle enough to add an aspect of challenge. As it’s an important part of the game, I don’t think its colossal size will seem out of place, but aesthetics may prove otherwise.

To make the game a little less samey, I’ve been considering varying shapes and shades of flowers. This example is a very “standard” flower, with no irregularities. I was particular inspired to do a little palette-swapping by this image, which I included in my previous mood board:

This photo shows the Sakura Blossom in a completely different light (I’m being serious, no pun intended!) Color Explorer mainly picked out shades of blue from this example of the same flower (although it could be argued that this image had a lot more background influence…)

I especially like the silhouette in this image, which is kind of recognised as the official shape of the flower. It inspired me to recreate it in simplified vector form in Illustrator, which may well be transformed into a game asset later.