Tile Changes

After creating some very square tiles, I started to think about ways that I could adapt some of the building aspects and objects to suit the game’s visual style better. What I’ve got so far is something very generic, which could be applied to any game. What I want is something more reflective of the concept art for the game (so far still mainly character designs!)
If you break down any game character, they consist of two contrasting halves. The top half of the character is made up entirely of a large oval-shaped head, which is more or less an equal length to the body, which is straight and thin. In fact, both of these sections were equal until I added some extra length to the legs:

The first thing I knew I wanted to change was the lucky cat statue, as this effectively counts as a game character. Before I had seen it as an object, ad hadn’t given much thought to where it fit into the game’s visual style.

Secondly, I felt as though I should add some more curvature to the building structure somehow, to create this oval shape within the structure somewhere. The most likely place for curves was in the guttering/roof edge, which previously consisted of a tiny little flick and was bound to one tile space.

My first idea was to extend this to cross two tiles, so that I could create a more oval-shape with the curve:

This looked really weird because there was no build up to it. It’s probably also structurally unsound, and would break off of you threw a tennis ball it… So I ended up with a think, sturdy, curvy structure which works really well.

For future buildings, I’m going to start sketching the outside before working on the inside as I have done with this example. As the beginning of the game, the inside is probably more important in this case. Most of the game is likely to be played outside of buildings.
As well as changing and adapting my previous tiles, I’ve added window frame tiles, porch tiles, patio tiles and outdoor objects like potted plants, which seem to be a regularity outside Japanese accommodation! As a business sign, I’ve made a fabric banner, similar to the wall scroll from inside the building. It says Ryokan in Japanese hiragana. Here’s my current tileset for the entire building, inside and out:

And how the building now looks in Game Maker:

Ryokan Construction

I’ve spent today remaking the Ryokan which I designed before as a mock-up in Photoshop. I already had the main wooden structure, made from this small set of tiles:

A lot of the objects which I previously mocked up have stayed pretty much the same, but in some cases I’ve re-sized, simplified and re-coloured objects to match the colour scheme and for better proportions.

In this screenshot you can see that I’ve remodelled the bunk-beds again so that the tiles work without having to have an outer frame, and recoloured décor like the curtains and light shade. You can probably also tell that I’ve simplified the wall pattern hugely, as I felt it looked messy and didn’t give the right impression of a smooth surface. The floor upstairs has been carpeted, and the decorative beams at the top of the wall on the floor below have been pushed further apart to draw less attention.
Although its small and fairly illegible, the symbol on the lantern-style light shade is a low-res version of the Japanese kanji for “Sakura”, consisting of a combination of the symbols for tree, decoration and woman.

I filled in the rest of the building without the use of too many more tiles. This example shows the bare building, before any of the objects or furniture has been placed:

There are some quite odd looking dark bits which are supposed to show shadows and depth, however I think I made these a little too dark! After making this I brightened these squares a little. This image came together from this expanding set of tiles:

After finishing the main building, I started to think about the sort of objects you would find in a Japanese Ryokan, especially one consisting of Western and traditional Japanese floors. I already have a lot of the furniture, now made and remodelled, but the rooms needed filling up more. I wrote a list which I split into decorative and Japanese items and guest convenience items.

Japanese:
• Bowl Decoration
• Orb Decoration
• Vase Decoration
• Fan Decoration
• Tea Pots
• Tea Cups

Guest:
• Phone
• Computer
• Microwave
• Kettle
• TV & DVD Player

NOT

Kitchen white good or anything bathroom related. It is a well known fact that game-characters never need to eat, sleep or use a toilet in order to survive. In many games these things are beneficial, but not essential.

Bearing in mind the colour scheme, I added some of these things to my tileset, although it wasn’t until I applied them to the building that I realised how strange some of the items had been scaled! Hopefully from the image you can see what I was getting at with some of a stranger items on the list…

From this I was also able to create the outside of the building, using similar tiles. I tried to keep the shape exactly the same, so that when the character enters the building, the transition gives the illusion of the building being chopped in half for the player to see inside! I got some of the corners in the wrong place, as you can probably see if you look close enough!

With this nearly complete tileset, I was able to reconstruct the building in Game Maker. I saved the set as it was as a PNG to retain transparencies. This was then imported to Game Maker as a background. GM gives you the option for any background image to become a set of tiles, you simply set the size of the tiles and the program breaks the whole image for you:

And here are the tiles reconstructed into a building in the room editor:

Whole tiles can be snapped into a 16×16 grid, which made applying the lowest layer very easy! It was easier to turn snapping off for smaller objects that had to reason to align. It was important to un-check the “delete underlying” box so that some tiles could be placed on top of each other!

Tilesets From Roof Tiles

I’ve been doing a little research into Japanese roof design! It’s amazing what you can find on the internet, for example articles like this one explaining the history of the Japanese roof. Originally, the Japanese got the idea for roof tiles from the Koreans. However, these tiles consisted not only of flat tiles, but tubular tiles too and were fairly expensive. They were placed mainly on top of important buildings and shrines etc. This later devolved into the wave shaped tiles which are a common site in Japan, being much cheaper but almost as nice to look at. I’m not sure what the practicalities are of having waved tiles rather than flat ones, but if I was given the opportunity to have a roof that nearly resembled that of a Japanese temple I guess I wouldn’t pass it up. The image below is of a more ornate example, although there are obviously those that are more simple and others that are much more complex.

For my Ryokan roof, I originally fancied the original roof (as demonstrated at the top of this post!) But not only is it unlikely that a B&B would have such an ornate roof, it doesn’t seem to come out well in 2D form. Despite my gradient-effect efforts, the tile simply appeared to be flat.

The most left red tile is my attempt at the tube tile, abandoned fairly on for the wave tile which just works brilliantly. You can imagine the tile sloping at a 45 degree angle, even from a straight on perspective like this one. Being tiles, they repeat effortlessly. All I had to ensure was that they aligned evenly.
The colour of the roof has changed from blue to pinky-red, this is due to the out-doors colours scheme I’m currently conjuring. For the first level of the game at least, I want to use a lot of pinks and reds- similar colours to the Sakura blossom object. This is my way of saying “you’re in Sakura country now, Player1!” Plus, I want the outdoor world of Hanami to accurately represent a Japanese spring time.

After applying the new red tiles to the roof, I re-worked the wooden frame of the building using a new set of flexible tiles. Wood is a traditional building material which can still be seen today, especially in Kyoto which used to be the capital of Japan. They tend not to exist these days in many urban and even in rural areas, however I’ve chosen to create a tileset for wooden houses because it is a symbol of something that is traditionally Japanese.

I haven’t tried to accurately represent the layout of wood in a wooden Japanese house with my tiles, but give an impression of a wooden structure which has been cross-sectioned for the inside view of the Ryokan. To give you an idea of the scale of the building, I’ve placed Hana in the middle of this newly constructed space:

Kyoto Machiya.com is a great resource for images of traditional Machiya (Japanese wooden house), specifically Kyomachia which are Machiya located in Kyoto! The site’s galleries include photos of inside and outside various famous Machiya, which will be useful for the next step of the Ryokan construction, which will be to build its walls and inside!

Japanese Accommodation

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:

Tatami Floors
These a woven floor coverings, aligned as a series of mats.

Shoji Sliding Doors
These structures, made from wood and paper, act as room dividers but slide to become doors.

Tokonoma
This is a small alcoved area where hanging scrolls and decorative items are placed. This areas is not entered, but enjoyed.

Zabuton
Flat cushions (sometimes with a back-rest) placed on the floor around a low Japanese table.

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.

Roof Tiles

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…

Guest Room

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.

Wall Ties
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.

Sofa Area

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.

Ladders
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.

Downstairs

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.

Tatami Floor
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!

Weekend Update #1

1. Started Reading A Geek In Japan
I originally figured I’d read this from cover to cover so that I didn’t miss anything, but decided to stop this sequence after about page 12 to look at the pictures throughout the book! Then, as my focus this weekend has been on character design, I stopped at the section titled “Japan Today” which details the daily lives of typical Japanese people.

The section opens with an explanation of the many meanings of the word Otaku, which is commonly used throughout the world to refer to someone who is “a fan of Japanese Culture”, especially those who love manga and anime. However, in Japan it is used to describe someone who is obsessed with a certain hobby, sometimes to the point of shutting themselves away from the world to spend more time doing the things they love. I don’t think introducing yourself as Otaku in Japan would go down too well!

2. Wrote the Game Design Document First Draft
This is still in a vague state, but the gaps are starting to get filled in. I’ve worked on the game story a little, as well as the setting and game characters. I will hopefully be splitting the game into four short levels, which each represent a different aspect of rural Japan. I’ve also imagined up about 10 NPC characters, who will make brief appearances in the game (time-permitting). The characters are based on character types from A Geek In Japan and the personality stereotypes from 51 Japanese Characters. I’ve got a fairly good backstory drafted up, although this may change depending on the events that occur in the game:

Hana is an arts university graduate who became depressed by the state of the economy and the lack of employment opportunities for young people. She has always been indecisive and a little unmotivated, and is confused about where to take her life after uni. She spends a year working and saving every last penny to fund a trip to Asia, in an attempt to discover what she wants from life and who she wants to be.
Hana starts he travels in Japan, where she stays in various hostels and cheap hotels. She enjoys the atmosphere of Japan and decides that she might stay a little longer and look for work. While she still has money to spare, she decides to spend early spring in a small mountain village where she can enjoy the rural country-side before travelling to the city to seek employment. She arrives at a time when the local residents are outside, enjoying the falling cherry blossoms. The owner of the hostel tells her that the custom is called “Hanami”. Hana spends a day outside, taking photographs and enjoying the pleasant sights, but goes back to the hostel early as she feels a little uncomfortable with spending long nights out in new places. She is woken up the next morning by the owner’s concerned cat, who has taken a liking to her. She tries to find the hostel’s owner, but seems to be on her own. She takes a look outside and finds that there is no one about at all. The cherry blossoms have just started to fall…

3. Continued Playing With Tiles
I haven’t made any more original tiles, instead I’ve been stealing tiles from screenshots of other people’s games and rearranging them to test their flexibility. This has especially helped me to consider things like diagonal tiles which only take up half the space, and what I’m going to refer to as “floating tiles”, which are partly transparent and add small details or effects to the tiles below. Out of respect for the original artists, I’m not going to post up any of my rearranged images without permission, but I will say that I’ve had a lot of fun doing this!

Tileset example from The Archer

4. Continued Character Development
I’m starting to understand my main character Hana a little better now, so I’ve been using the weekend to just casually scribble down trait updates. It’s somehow easier to create characters based on Japanese stereotypes than Western ones, as I know that stereotypes don’t really exist!

At first, I tried to base the character on a stereotypical Western Otaku/Nerd/Girl Gamer, but just couldn’t find a perfect representation. As a protagonist, Hana doesn’t excel in bad-ass-ness, but she’s not a fragile little flower either (no pun intended). The baseball T is there to show that she has a tom-boy side, and I’ve tried to avoid anything which be better suited to a Japanese character (like long socks!)

5. I went to the farmer’s market for the first time, but that’s irrelevant…

Japanese Interior Design

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.

Example of a Mario game tileset

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!

With Grid

Without Grid