Been working on this for a while. Seems the best way to fix badly scanned fineliner is to draw over it digitally. Still not certain about a few things, but overall looking better!
I’ve been working on some new promotional art because frankly, I want something that represents the game other than pixel art. While pixel art has its benefits, like being very easy to edit and achieve great accuracy, it’s also very restrictive. This new image started off as a fineliner drawing which I scanned with the contrast setting up really high, and ultimately I’m not 100% happy with the way the line art has turned out. But this can be very easily fixed, I’ve just got to work out how! Please let me know if you-mr/mrs/miss reader-have any tips!
For now I’ve blocked in some really simply colour and added some dodgy Photoshop effects, despite the fact that I hate overusing these. In this case it doesn’t seem so bad though. I felt that the drop shadow was totally necessary to add some depth to the image.
I’ve also gone on to use this as part of my first box-art concept, “wrapping up” the game’s physical designs. I discovered an online company called weEco” that make lovely eco-friendly media packaging. One of their products is called the WowWallet with Die Cut Window, which is a cardboard sleeve with a window on the front which allows you to see the inlay, and a slot for a disc in the back panel. I really liked this idea, as it promotes the inlay as well as the CD itself. As I’ve put a lot of emphasis on the important of the game manual for Hanami, I decided it would be appropriate to use the inlay cover as box art in a similar way. Actually, I would use the back of the manual, which would be the same as the front minus the line that says “instruction manual”! So, from the front you would see something like this- a cardboard case with a window to the inlay inside:
The inside would consist of another window, allowing the user to see the front of the game manual. On the opposite side is a slot for the disc. My initial idea for the CD art is to use my new promo art. This stands out really well in contrast to all the other dark colours.
Compact Disc Digital Mock Up:
Inner Sleeve Digital Mock Up:
As for stock, I think a thick, matte black cardboard would work really nicely for the outer sleeve. The inlay would probably similar to any CD inlay, the kind of paper that your fingerprints show on too easily 😛 For now this is staying in its conceptual stage, I’m not planning to print anything for a good while…
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’m still not 100% about my mountain/rock tileset, which seems to be expanding increasinly to accomodate for varying edges and crossovers. I had a rethink and came up with a more simpler, more flexible solution. I’m going to try this out for now and not expand on it too much, as I don’t really want the graphics holding me back at this stage…
Here’s some of my most recent screenshots from the level test in Game Maker:
I’ve taken on some of the advice I’ve received from feedback sessions, such as using the blue brick tiles as a background layer to show depth within the mountain, however I’m still concerned about the scenery looking overcrowded, messy and repetitive. This is before I’ve even filled the level with many of the items/objects which will be added later. So I’ve gone back to my traced level design and doodled this new tile design, based on a much simpler and organised idea.
There are parts of my original design which clearly show just a few neatly aligned rocks jutting out, and I feel this suits the building graphics better than the more clustered tiles I was previously using. I created this test mock-up in Photoshop to check their effectiveness:
You can see that I’ve also changed the colour of the grass to match some of the colours used in the building, so the level shouldn’t seem so disjointed any more. I’m currently working on the rocks around the cave entrances, and wondering if I should create a non-tiled pattern specifically for all of these instances, although all of this still needs a little work.
Parts of the level design simply just needed re-thinking. The second cave (Cave 2, as I have named it) took up a lot less space than it could have done, so I drew out an outline and tried filled in the gaps by hand, thinking about the level from a visual perspective more than a play perspective. This did mean I had to make changes to the design, marked by scribbles and notes, but this way I got thinking more about the aesthetics of the level. It gets very dull using black squares!
I also started thinking about hazards whilst jotting down ideas, and have come up with three types of basic “enemy”.
1. Sits motionless on the ground
2. Swings from a ledge
3. Moves along the ground/through the air.
Details to follow!
Where the level only needed adjusting rather than redesigning, it was easier to make changes in Game Maker’s room editor, where blocks could easily be moved and tested and quick succession! I used this technique at the end of the level to test jump distances and spread platforms apart:
New Level Design
The overall size of the level hasn’t changed, but I’ve managed to use more of the available space to create a more playable level:
What I can do now is add the structure to a Game Maker project to create a playable level made of placeholder objects (in a similar way to before!) Only this time, I intend to use all the assets I have currently created, including tiles, characters and lights. More graphics can be added as I make them, so by the end of the week I’ll have something visually more finalised as well as in terms of gameplay. Today I started to block in the ryokan tiles and create platforms around them, making sure that all dimensions were perfect! I’ll be adding the character and some lighting tomorrow.
- include all graphical features currently made–sprites and tiles
- show an accurate level layout, mainly using placeholder graphics
- have accurate game physics (mainly character physics)
- include a points system when items are collected
So far today I’ve carried on working on my initial mock-up design for the first level of Hanami. Today I’ve been really concentrating on background and decorative parts of the level, finishing off the look of the level as a whole. It gets confusing in places because I mainly used one colour, so when I get the time I’m going to use varying shades of grey to determine depth and which items you can walk in front of.
Dark Grey: Buildings
Light Grey: Inside Caves
Pink: Sakura Blossoms
Red(ish): Red Blossoms
Half-Blocks: Jump-through platforms (mainly ladders!)
If you look hard enough you can almost see how I’ve based this around the original Kanji, although admittedly it becomes very obscured…
桃色 Pink ~ Momoiro
To test out how the level plays, I reconstructed the Photoshop mock-up in Game Maker using an arrangement of solid block objects. I didn’t worry about wasting my time with large filled in areas, all I needed was a frame for the character to play on.
For the first time I also applied my animated character sprite to the game! I worked out animation speed settings in the character preview, but keep changing my mind as she occasionally looks as though she is walking backwards in game. The pink background was actually an attempt to separate her leg colour from the background colour and show leg movement more obviously.
It’s probably important to point out a slight oversight at this point. The level design is snapped to a 16×16 grid, so some gaps between solid blocks are only 16 pixels high. When I added an extra pixel to my character height, I accidentally designed a flawed character who couldn’t fit into these spaces. Luckily with Game Maker, not all of the character has to be solid. I’ve set the character’s collision mask to allow for a non-solid edge which will not collide with solid objects!
Through a process of trial and error, I’ve settled for these settings so far. I’ve tried to keep movement slow enough to be realistic, and kept jump distances low to make obstacles less easy to avoid. As the game has only environmental obstacles, if they were too easily avoided then the game would have no element of challenge!
S_GRAVITY: 0.3 //a fairly standard gravity setting
S_RUN_ACCEL: 0.3 //a fairly slow acceleration speed
S_RUN_FRIC: 0.6 //slightly high level of friction.
S_AIR_ACCEL: 0.1 //a very low setting, attempting to avoid too much air control
S_AIR_FRIC: 5 //a very high setting, attempting to avoid too much air control
S_JUMP_SPEED: -5.5 // just high enough to reach a platform triple the height of the character
S_DJUMP_SPEED: (N/A really as I am disabling double jump)
S_MAX_H: 1.5 //a low setting, but perfect for walking pace
S_MAX_V: 4 //a decent falling speed!
S_SLOPE_SLOW (not yet tested as I don’t have any slopes!)
Unfortunately (as I am currently using Hypercam…) I can’t guarantee that the speed of this video is anything like the speed of gameplay. You will just have to trust me that the speed is not an issue!
After playing through the level a little, I realised that a lot of the platforms are too close together to act as a challenging level. I will probably add fall damage when I give the character a health bar, so calculating jump distances is vital to play. At the moment, it’s almost impossible to fall in some places, and in other it’s almost impossible to move. I will try to resolve this by spreading the level out. This video actually plays from the beginning to the end of the level, but obviously in order to collect items, the player must play through the rest of the level beneath. I’m not yet sure whether I want to stretch out the width and length of the level too, to increase play time. This may simply come with spreading out platforms.
Just as well. I still haven’t managed to pick up any tracing paper
Edit: I worked out that the illusion of “backwards moving legs” is caused by the similarity in foot and block colour. The problem is resolved mainly by changing the colour of the platforms.
Apart from perhaps a short opening sequence consisting of images or a short animations, Hanami begins in a small country bed & breakfast style building in a small village somewhere in Japan. These types of accommodation are called Ryokan. They are usually situated in more rural areas rather than large cities, and provide a cheap place to stay for travellers. Cons of cheap accommodation mean that rooms and facilities must be shared with other guests, but at the same time this opens up opportunities to meet people and share a truly Japanese living experience. Personally I prefer “private”, but beggars can’t be choosers!
I refer to a stay at a Ryokan as a “truly Japanese living experience” because one common characteristic of the Ryokan is its traditional Japanese features. The owners of this sort of establishment encourage guests to turn Japanese during their stay, by sleeping on futons, sitting at low tables, and usually eating the provided Japanese meals.
A traditional style Japanese breakfast:
Features of a traditional Style Japanese room or Washitsu:
For my Ryokan, I’ve taken most of these elements and aspects from other traveller’s hostels. Cheap hostels are similar to Ryokan, but not as traditional. To make better use of space for example, hostels will often house guests in shared rooms with bunk-beds. In the most extreme circumstances, guests stay in their own tiny capsule, consisting of a bed, shelf and TV! These are much more common in urban areas.
In terms of 2D tile creation, bunk-beds make a lot more sense that low, flat futons! So I’ve built my Ryokan on three floors. The hotel has a Western-style bunkbed room at the top, and gets progressively more Japanese as it goes down. Bear in mind that this is a test mock-up, I can hardly even call this finished! I’m still trying to work out some of the tile issues.
If you click on the image above, you can start to get a feel for the real scale of the game. At the moment, I’m thinking of up-scaling the game to 300% during play, although this is something I haven’t decided for sure yet.
One thing I haven’t quite worked out yet is how to cross-section a Japanese roof to create a 2D tile. The blue around the edges of the image are supposed to be blue roof tiles, but these aren’t quite finished yet. The wooden part underneath is representative of traditional ceiling beams, although I’m not sure how well this comes across in cross-section form either…
You can probably tell from the image that I’ve also had a few problems rotating my roof tiles, and there are plenty of inconsistencies to be found…
I’ve resized the bunk-beds from before so that they are more human sized, and cleverly pushed two together so that the obscene length doesn’t seem out of place! The bunk-bed tiles probably won’t need too much attention from now on, as there isn’t much to them and not much that can be changed. The window is a set of four tiles, which can be lengthened width-ways if I should need to! I’m fairly happy with the result of the window, I just know I should be cautious with frame outside the four-square area. The little draws are just one tile, and can be stacked or duplicated length ways easily. I’ve tried to keep all wood-colours consistent.
These were looking very plain and boring, so I tried to add a certain amount of texture to them. I’m worried that now they border on the messy side, and will hopefully be tweaking these.
This is part of the shared “communal floor”. The proportions seem like less of a problem on this floor, I’ve created a sofa from two tiles and halved the draws to create an end-table which is only half a tile high (the red strip on top represents the place the Maneki Neko likes to sit!). The chairs to the right of this screenshot are the same height as the sofa, although I’ve made sure that this emphasises the lowness of the table.
You can also see from this screenshot where I’ve tried to add shading under the roof tiles using “floating” semi-transparent tiles which adjust the tiles beneath them.
With this sort of perspective, drawing staircases are a bit of an issue. I’m not sure Ryokan even have first or second floors, but I think it would be understandable in this kind of situation to have to climb a ladder! In my opinion, this doesn’t look out of place, but if I make a successful staircase then I will replace the ladder.
Here you can see all the traditional aspects of a Japanese Washitsu that I’ve just mentioned, although I still have some not-quite-aligning elements which may need re-scaling in order to fit better into the grid. I’m also not sure I’m happy with the wood-strip detail on the wall. I think it detracts from the room’s important details.
The ground floor tiles are supposed to look like Tatami, although I’m not sure they really do. It somehow doesn’t look much like a floor at all, probably because it is too square and therefore quite similar to the sliding doors above it. In fact, the sliding doors and the floor could do with a better indication of depth, to separate themselves from each other.
At the moment, the image covers a few layers in a Photoshop document. What I need to concentrate on, is creating a tile set rather than a flat image that looks like it has been made from tiles!
Just a recap of the goals for the week just gone:
Continue to create and gather any conceptual work including a Game Design Document (GDD). Experiment with the Grandma Engine in order to configure it for the game. Research software add-ons and extensions which will be useful.
So…how am I doing?
I’ve managed to write and maintain my GDD pretty successfully, but “conceptual work” is currently mainly limited to character designs. Over the coming week I’ll hopefully work up a good amount of level & item designs to being some game assets, as well as continuing to work on the in-game characters. I’ve experimented with the engine to a degree, however I still haven’t worked out things like my physics settings which must be arranged soon before I start any real level design! I don’t want to design any immense jumps only to have a character who can’t reach them… As for add-ons, I’ve previously researched things like lighting engines and sound dlls, which will come in useful, however I can’t say this for sure yet! I’ll have to re-schedule this research for next week.
So what have I been doing?
Whilst avoiding doing any really ambitious game development, I’ve been working on a few more character designs. I started off by thinking about a template for male in-game characters, as so far my character-cast is looking very feminine…
The guy on the left is my “generic man” character. He probably won’t appear in the game, but is the “standard model” for all male characters to be made to (The kanji symbol means “man”). After drawing him, he got me thinking about Japanese hairstyles. In photos, you can probably tell Japanese guys from Western guys just from the tops of their hair. Japanese styles tend to be longer and frame the face, whereas the normal Western man tends to avoid this, probably because it looks quite feminine. The epitome of androgynous hairstyles is demonstrated by Japanese pop/rock-star Gackt, who inspired the hairstyle in the top right. But as well as long, straight styles, I’ve noticed that Japanese males pull off spiky styles really well! This is either the symptom or the cause of many spiky-haired anime characters, famously including Akira Toriyama’s Goku from the Dragon Ball series. However, the first example of epic spiky hair that popped into mind was Cloud Strife from Final Fantasy VII. Although not a real person, there is no match in the competition for awesome spiky hair.
From this short study on hairstyles, I moved onto my first male character…who has no hair. His working title name is Kannushi, based on the name of Japanese Shinto Priests. I’ve tried to write an extremely brief bio on all my characters in the GDD, mainly explaining why they didn’t suffer the same fate as the village locals (although details of this incident are a little hazy at best. I’m thinking of changing my original idea…) For my final GDD I’m hoping to write up a bit more on the characters, including useless information like favourite food etc.
a Shinto priest who was immune to the curse, and prompts Hana on her journey.
He’s dressed in a traditional Kariginu, with traditional hat and ceremonial wand at the ready. Although he acts as Hana’s main guide throughout the game, I want him to be a silent and mysterious character, who appears and vanishes without warning. On top of this, one of my objectives is to create indecipherable dialogue between all characters, as Western and Eastern characters naturally have language restraints…
The second character I started to work on was a Maneki Neko or Lucky Cat character. I think I originally said that Hana would have a pet cat, as I didn’t want her to be entirely alone. I realised this was silly, as you probably wouldn’t take your cat on this sort of “holiday”. So the cat’s ownership has changed. Maneki Neko now belongs to the owner of the hostel which Hana temporarily stays at. Another mysterious character, at the very start of the game Maneki Neko resembles a Lucky Cat figurine. It isn’t until the “Hanami Crisis” that the cat jumps to action and leads Hana to Kannushi. Whilst not saving the villagers, Maneki Neko enjoys snoozing and dreaming of fish.
As well as this, I’ve done a little bit of graphics development, just trying to figure out how to make tiles that work. I haven’t really started any official research into Japanese buildings, but just from the research I’ve been doing so far I’m starting to get a feel for them! I made this small little Photoshop mock-up of a Japanese hostel room strictly using tiles only. It doesn’t work as a room as it has no access and no space for movement, but it only uses repeated tiles so I’ve made minor progress here.
It has however brought to my attention more proportion issues. These bunk-beds for example are 64 pixels long, which is 4x as long as my character sprites, so this little tester probably wouldn’t be suitable for a game asset.
In home-made games, I often find myself judging the quality of the game on the quality of the character animations, specifically on the walk cycle. To me, a game character without a natural-feeling walk animation is a character made with no real love or attention, and shows poor effort. Despite this, I would like to point out that games like One Chance can be redeemed by mind-blowing gameplay. This may look basic, but trust me it makes your brain work up a sweat.
MAJOR SPOILER ALERT.
I have yet to memorise the standard human walk-cycle, or even find an example that I use every time I animated a human character. In this situation, I usually turn to Google for new examples to follow. I quite liked this example, provided by a digital animation student from Falmouth. It’s accompanied by a video of an actual human being walking, and the student’s drawn interpretation based on the key cycle points. In my opinion, this is alot more helpful than cartoon examples or stick-figure tutorials.
I tried to adapt this into the little biro sketch above, which I tried to make to the same proportions as my pixel sprite. The inconsistency between drawn characters is exactly why I am not an animator! I used the frame-based animation tool in Photoshop to get a feel for my first-try walk-sequence:
The arms are a little erratic at best, but I was surprised at how well the legs flowed! Normally in my first go, I forget which leg is which and they end up merging in the middle. The problem from here was translating this infinitely high dpi image into a tiny game sprite with legs 3 pixels high (as I reminded myself in the image just in case.) If you look back at the original sprite, the legs were going to be 2 pixel high, but I decided this probably wouldn’t help a natural walk cycle. Just to update you on the few changes I have already made to the design, here’s this morning’s sprite:
I think the only noticeable differences are that I made the legs slightly longer and the head less wide, although I can’t say for sure without comparing the two for hours. I spent a lot of time today rearranging pixels until they looked right, rather than concentrating on little bits.
To avoid getting Hana’s legs mixed up in the process of animating, I worked on each leg individually to begin with. I then placed the two images on top of each other to reveal the full Hana, although it was very difficult to predict the outcome this way! What I’ve ended up with is a sort of over-exaggerated run, partly due to the lack of pixels making very harsh shapes out of the legs:
I added the arms later, trying to avoid the flailing motions of the test animation. The result still doesn’t seem perfect, and definitely isn’t a natural motion! In an effort to improve this, I’ve been working on another sequence, which concentrates on the character twisting slightly to put emphasis on the particular leg which is taking the step. This seems to provide smoother arm movement, as the body twists as the arms move. It’s based on this little strip I quickly drew up (but don’t think I really finished):
I haven’t managed to animate the legs for this sequence yet, but the rest seems to working. This can especially be said for the shifting eyes, which just give the whole animation a sense of direction!
This was really easily applied to Za-chan, who is the exact same shape and size as Hana. I hope this second take is going somewhere, as it seems a lot neater than the previous attempt.
It’s nearly the end of the week, so my plan for today is to write up a first draft of my Game Design Document for this project. This will help get all my scatted ideas in one place!
Once that’s done, or probably if there’s nothing on TV at lunch time, I’m going to start reading my new book A Geek In Japan” which arrived in the post yesterday ^_^. The book is based on the content on Kirainet, a blog written by a Spanish guy living in Japan. It’s aimed at Otaku like me to give a really good insight into his new Japanese lifestyle with a slightly nerdy twist. His Blog is based around a lot of good quality photography, so I hope this is reflected in the book too!
I’m still unsettled on the graphical style I want to use for the game, but before I get comfortable with a definitive style I’ve carried on practising with tilesets inspired by Japanese interior design. Luckily for me, typical Japanese interior is very minimalist and easy to convert to square tiles!
I used the image as a basis for the tiles I wanted to create. It looks slightly pixelated because I actually scaled it down until the 16×16 pixel grid fit quite well. You can already see at this stage that all the objects in the photo are very angular, if not completely square atleast all the corners are rightangles! Basing tiles on this image also helped pick out colours with the colour picker. The colours I used would not have been my first choice if I had created this from scratch.
On a separate layer in Photoshop, I used the pencil tool to re-draw a part of the image to the grid.
By this point, you can already start to see some repetition of tiles in the cupboards, the vents and the frame of the cupboard. Obviously, the tiles were incredibly basic and boring, so I continued to use the pencil tool at a size of 1pixel to draw in some detail. For highlights and shadows I chose my own colours, based on the original colours that I had picked from the photo.
Using colours slightly lighter and slightly darker than the original, it was easy to add texture and depth. In addition to my tiles, I also picked out some misc objects which didn’t align to the grid, but which could be repeated and placed on shelves etc.
Once this was all done, it was time to put my tiles to the test. The point of a tileset is that each tile can be rearranged to create a completely new layout. A good tileset would have allowed me to do this seamlessly, but this experimental process helped me see where my tiles were slightly flawed. To rearrange my tiles, I cut out each unique tiles and placed it in the corner of my grid. This is what the “tileset” refers to- often when you see a tileset it is simply a group of squares which don’t correspond to each other until they are arranged by a designer. The squares are closely pushed together simply to make good use of space.
My Shelving Tileset:
Now, my traditional Japanese Shelving unit is transformed into a contemporary Swedish storage space:
Although, you can definitely see here where my tiles are less than perfect, especially in the corners and funny little places where I used half the tile for the cupboard frame etc. All in all, this new image was created without any editing to the original tiles, so most of the tiles here would be suitable to use for game backgrounds.
In addition to the shelf, I continued to recreate the room from the photo using tiles that aligned to my grid. The result is an image which represents just some distinct aspects of Japanese interior design which I would definitely like to use in my game!