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!

A Few NPC Updates

I’ve been busy making sure all my NPCs work well now that they can speak and things. I’ve added a new sprite animation for my frantically running panda character, so that he will actually stop and talk when the player chooses to interact with him, instead of continuing to run about. I’ve tried to make it look like he’s breathing heavily from all the running!


After the conversation is over, he continues running about. I’ve also placed Ji-sama into the first level, who is one of the two characters in this level who don’t give away any petals and are actually pretty pointless. If you happen to understand Japanese, he actually asks the question “have you found 5 petals?”


The final character I’ve placed in level one is a character called Renaldo. I originally based this character on Tsukimi from 51 Japanese Characters. Tsukimi is the act of moon watching– “tsuki” means moon and “mi” means watch. When it came to think up an original name for the character, I decided his name should be an homage to Renaldo Moon from Ghibli’s The Cat Returns (simply because his name has “moon” in it!). I recently decided that because Renaldo isn’t a particularly Japanese name, this character should be another English speaking character, who has also been thrown into this strange world and is just as confused. Renaldo however isn’t much of a man of action, and would rather watch and wait instead of rise against the strange problems occurring. I’ve placed him near the end of the first level, where the landscape is elevated and he can get a good view of what’s going on around him. Before you approach this character, he faces away, passively watching the world…


When you come within a certain distance of him, he will turn around. I’ve used the same font I’ve used for the menu when he speaks, so that he actually speaks in English, although he’s pretty useless in the end. The # symbol in strings of text represent a drop in the line, to make sure all the text fits neatly into the text box:



While Renaldo faces forwards, I’ve animated him to have a little smoke while he casually stands and watches. He’s just that cool.


I’ve been writing each character’s lines in an OpenOffice Writer document and pasting them into Game Maker as this way its easier to see what the text looks like in its proper Japanese form! And I can keep track of the English and Japanese romaji versions of what each character is saying, here’s a glimpse of the “script” so far… Please forgive typos and formatting errors as I put this together pretty quickly and well, you’re reading my Blog so you probably know how useless I am at typing and more importantly checking what I’ve written!

Wakarimasen…

I’ve been pretty unhappy with my old dialogue system for a while for two main reasons. The first is that it didn’t actually work very well. The best I could manage was a square to appear as the player passed by a non-playable character which contained the character’s “dialogue”, as I didn’t manage to figure out how to stop the player so that a proper dialogue situation could be initiated. The second reason I wasn’t happy with the system was that it was potentially detrimental to the game itself because it was fairly resource heavy.

The idea was to use a system where the player could get the gist of what NPCs had to say, but without the NPC using words. The reason for this is for the player to get the feel of language barriers faced by people in foreign countries. You can talk all you want, but it’s mostly gestures that will allow communication between two languages. This is why I had decided to use images instead of strings of text. A similar but less vague system is used in Machinarium. In this game developed by a Czech team, images and short move clips are used in speech/thought bubbles to depict dialogue. I’d imagine this was one of the keys to the game’s success abroad, because a minimal amount of translation would have been involved to export the game!



To make a system like this in game maker requires a lot of resources. I’d already made two simple “text box” objects that could be used universally throughout, but the content would have to unique for every instance. This requires a different sprite for each talking character, and some with several sub-images if the images scroll or are animated. This also takes a lot of my time as I was drawing new images for every time a character spoke! So I’d already decided that I would change the way this works, in the interest of my time and the performance and size of the game!

To help me really refine the system and create something that actually worked well, I went to the Game Maker Community forums and found a downloadable example similar to the one in this video.


The basics for a decent system are all here, including stopping the character when dialogue is initiated, scrolling text that progresses as if the character is talking and NPC interactions. I managed to adapt the code to create a very similar yet customised system so that when the player chooses to interact with a character, dialogue is initiated inside a text box and the player must sit through everything the character has to say before they can move on. I tested the system with a basic white text box and black text to make sure it ran smoothly.


The first thing I did after checking everything through was create a new larger text box sprite to replace the abominable white square I had made. I’ve made sure the box keeps the themes of the GUI and to make it similar to the previous text box, however I’ve flipped it over so that it always sits below the character who is talking. This way, it shouldn’t ever cover up anything important on the screen.



The next thing to change was the language. I figured instead of presenting the player with decipherable images, it would be even more convoluted to present them with a written language that they couldn’t understand. This is the real deal, as if they were really in a foreign country where everything that the people said was simply a jumble of sounds (or in this case letters!) The first complication with trying to achieve this is that it’s not easy to display the Japanese alphabet(s) in Game Maker. Although Windows comes equipped with fonts designed for displaying Japanese characters, Game Maker doesn’t seem to recognise the characters as letters. In the editor, the “unknown” box appears as a substitute, which is translated in the game as a series of question marks…


So I’ve had to think of a clever way around this. Instead of using the Japanese character glyphs from romanised typefaces, I’ve found this font which displays roman letters as Japanese characters. It’s actually a replica of the typeface used in the original GameBoy versions of the Pokemon games, which comes with English, katakana and hiragana versions. Unfortunately the letters don’t seem to be in any logical order, so I’ve had to spend some time working out which qwerty key results in which Hiragana character! For example:

& = は “ha”
% = な “na”
0 = み “mi”

So if I wanted to write “Hanami is Great”, I would do so like this:

English: Hanami is great
Japanese Romaji: hanami wa sugoi desu
Japanese Hiragana: はなみはすごいです
PokeFont: &%0 & 5c* d5

I’ve written some VERY basic lines of dialogue for each character, which I’m pretty confident in translating without too much worry. With the system I’m using, each character can have three lines of dialogue which are scrolled through by pressing X on the keyboard or A on the controller. The strings for the first character are written like this:


But in-game, they appear like this:


This is Bura-san saying hello! I will still need some indicators of the objectives of the game somewhere, however I’m considering using things like sign-posts instead of direction from non-playable characters. As I’ve mentioned before, in the first conversation with Bura-san the Zashiki Warashi character is also introduced. This currently involves the screen being covered with an overlay of the large Za-chan image I made before, so the game being set fairly well from the beginning now.


By the way “wakarimasen” means “I don’t understand”, which I thought would be an appropriate blog title 😛

にほんごができます


Again, apologies for the offensive way that I try to represent a similarity to kanji… Here I’ve tried to write “Week 15: Nihongo ga dekimasu”, which roughly translates as “I speak Japanese”, which above all else is a lie, although the little bits that I do know have been pretty useful today!

One of the things I realised probably should have been given more attention in the new time plan is a main menu for the game. I realised that before I could really go on to start preparing for physical designs, I had to give the game a real identity, and this is normally seen for the first time in the game’s opening screen/main menu (where there isn’t a physical casing involved!). A while ago I started out planning ideas for the game’s logo, mainly working out typographical layout solutions to combine a simple title with a small hiragana subtitle. So far I’ve been using the typeface Dejavu Sans for pretty much EVERYTHING, from use on this blog and in my devlog videos to in-game typography (although this becomes very distorted with the anti-aliasing off). I picked the font out a while ago for the Pecha Kucha because it was clear and clean, which made it great for the presentation. I felt that it set a neat tone for the game, as I was hoping to avoid creating messy graphics, and it suits contemporary Japanese “Zen minimalism”. So I’ve rolled with the font until now, and I was also planning to use it for the game’s logo, although I did stray a little into wandering what other typefaces would look and feel like…


The one that I felt worked best was probably the first design I made where the hiragana sits on top of the title, although I wasn’t really sure about the placement of any sort of logo or icon like the sakura blossom in the dot of the i.




The other typographical ideas I had were based more on traditional Japanese writing styles. The logo for the Wii game Okami does this very well using traditional black, white and red, where the red is also a representation of the Japanese flag (if only I’d got there first…)


You’ll also notice the little red mark at the end of the text. As far as I’m aware, this is a Japanese Hanko, which is like an official stamp used as a signature in Japan. Where there is handwriting in traditional Japanese texts, you will often see a little red stamp below it to mark who wrote it. The ink used to write was traditionally black, which is why the colour scheme seems so Japanese! I felt as though I should change the Hiragana in my logo to red, and started to experiment with brush-written typefaces to compare the effectiveness in context.


The problem with introducing this style here however is that the rest of the game would be very inconsistent, and I don’t like to use more typefaces than necessary in any one project. I started to like the hand-written look of the title, but decided that I couldn’t really use the same font for the menu’s options without changing fonts throughout the rest of the game. I feel like the hand-painted style typography is more appropriate to the game than the contemporary Dejavu sans, but should be restricted to the main title and not body copy. I found another typeface called Paul’s Kanji which I felt suited the game and had a very hand-written look, so I started to experiment with some new layouts using this font. Without adapting the typeface, the logo started looking more like this:


However, I’ve adapted it slightly for legibility and to keep it simple:


I also tried this font out written vertically, as traditionally Japanese test was often written in columns:


I haven’t managed to find a similar style font for the Japanese Hiragana subtitle here yet, but I may work on drawing over this myself to keep the style going. I will either make it appear in brush strokes or in the style of a Hanko. For in game uses, I’ve created a pixel version of this logo to keep the retro themes running throughout. For the main menu screen, I’ve used a silhouette of one of my Sakura tree designs to emulate a Japanese inked painting and used the vertical style logo at one side. The image below isn’t the finished title screen, but starts to set the basis for the game’s identity which can be applied elsewhere. The spotlight-style circle shape is taken from the still images I have been drawing for the game’s introduction, and I’m planning to use a similar effect where large still images are concerned throughout the game.


When placed in the game, the “main menu” will appear in front of the tree beside the logo, giving the player the options to start, load or quit the game. For the rest of this week I want to finish this and the rest of the game’s introduction slideshow, and from here continue to use the game’s emerging identity for other game elements and physical designs. As the Font River site suggests, I would like to thank Paul for his great work.

Draw, Animate, Code & Play etc…

Drawing
Over the past couple of days I’ve tried to prioritise sorting out my environmental tiles, but still haven’t really come to a conclusion. I tried to test out my new idea for rocky tiles with real parts of the level design, but so far can’t seem to make them work well as they do on paper! To stop myself from ending up in a rut, I’ve discarded ALL rocky texture tiles for now and replaced them with a plain purple colour, which can easily be swapped for a textured tile when I decide what it will look like!


I made a little progress with the rock pattern around cave entrances however. I considered using straight edges around rock outcrops so that straight edges around other level features wouldn’t stand out so much, but didn’t feel this worked as well as the more natural, uneven design which is closer to my previous trace design.


I tried this design here with my previous rock texture, but decided that the rocks looked better against a more plain background. Even if I bring a heavily textured tileset back for platforms, I may stick with a plainer tile for cave walls.

Whilst trying to ignore all the complications of seamless tiles etc, I’ve diverted my attention to creating more Japanese-looking objects for the level. I’ve started by taking objects I’ve already made and adapting them to suit various instances, which is great for level continuity.


Amongst these smaller features I’ve been working on some large objects inspired by specific Japanese things, like this shrine gate:


and this bridge:


Although, the reason for the bridge’s funny shape is because it follows the shapes of my platform mask tiles. I may round this off later to make it look nicer and have the character follow the tiles rather than the shape of the bridge.

And I finally got round it pixelising the small food stand that I designed about a week ago. You probably can’t tell even if you’re Japanese, but I attempted to write ramen “らめん” in hiragana on the sign!

Without the ground texture tiles, the game definitely doesn’t look as “nice” as it did before, but the more empty spaces of the level are starting to fill up. (I haven’t built the lights in this screenshot either, which is why it looks so dark!)

Animating
In time for a proper working level prototype, I wanted to get many more character animations in. Before now, I’ve simply had one continuous running animation! I’ve only created the basics so far: running, stopping, jumping and climbing ladders.

To make the character stop you could use a single frame of the character just stood still, but I like to keep the character moving to ensure the player that the game is still running! Before now, I’ve used a breathing motion by making the character move slightly up and down, but where Hana is made of so few pixels, any rearrangement of pixels results in something far from “subtle”. I think a breathing animation is out of the question, unless I find a clever way to do this. For now, I’ve created a couple of frames that make her look fidgety when stood still, and a blink frame that flashes up irregularly.




For the jumping animation I’m currently only using one frame, although I would later like to add another to differentiate the character jumping up and coming back down.

My climbing animation is currently universal, used for climbing up and down ladders. This particular animation works best for climbing down ladders, so I may later add another one which looks more like climbing up a ladder.

Coding
The main bulk of the coding I’ve done over the past couple of days has been in the character step function, which controls the way the character moves. With all the new sprite sequences, I’ve had to customise things like image-scrolling speeds for each individual animation and can no longer rely on one over-ruling command.

I’ve split character movement into two separate “modes”-one fore running, jumping etc. and one for climbing. If the player is not on a ladder or in mid-air, the player is on_ground (this is a ready-made variable that comes with the Grandma Engine.) If the player is on_ground, the rules of horizontal movement apply, including sprite sequences and player input. If the player crosses a ladder but does not climb, ie. does not press up or down, then the rules of on_ground still apply.

if on_ground && place_meeting(x,y,obj_ladder) && !keyboard_check( key_up ) && !keyboard_check( key_down ) {
can_c = false; }

But, if the player crosses a ladder and does press up or down, can_c (short for can climb) becomes true, and the rules of ladder climbing apply. This code is pretty similar to the code I wrote before for vertical movement, but I’ve added sprite sequences and image-scrolling speeds. As you can see, I’ve applied the climbing animation twice, once for each vertical direction, so if I wanted to I could use two animations that would represent each direction.

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

vspd = 0;
can_c = true; {

if (keyboard_check( key_up ))
vspd = -S_MAX_V /4;
sprite_index=spr_hana_climb;
image_speed=.1;

if (keyboard_check( key_down ))
vspd = S_MAX_V /4;
sprite_index=spr_hana_climb;
image_speed=.1;
}

I haven’t written much other than this, but I’ve added a few lines of code for more warp objects throughout the level. This has helped me create some clarity where caves are involved, as I have created two new rooms for caves that are joined to the main level by these warp points. Now you can see a definite distinction between the outside and inside of the cave parts!

Outside:

Inside:

Playing

Adding a lot of visual features doesn’t occur easily whilst play-testing, due to the fact that in Game Maker the platforms are made of these red-block objects that cover the background imagery. They need to do this so that I can see where I’ve put platforms! But at the same time, I can’t see if I’ve made a mistake with the imagery below. So when I’m editing tiles and want to see how they look in-game, I have to add these red blocks temporarily and delete them again afterwards. One major criticism of Game Maker is that it doesn’t allow bulk actions to be applied to all instances, so each block must be added and deleted individually, which is a looooong and tedious process. My main focus is still on visuals, but I’ll build the complete level for a play-test from volunteers next week.

This concludes my lengthy summary or the past two days!