First Try 2D Level Design

I started off today by drawing this artist’s impression of the outside of my Ryokan for two reasons. Firstly, I wanted to work out what the landscape around the building looked like, and secondly I wanted to try to practice a slightly neater style of drawing that I can use for tidy, accurate level design! As it turned out, the building took up most of the page and I didn’t manage to get many surrounding objects in! But I think my tidy lines worked out much better. I have a tendency to scribble, and my designs are often indecipherable except by me!

I watched the Japanese Ring last night by coincidence. For those who aren’t familiar with the series, half of the story of Ring takes place in a holiday resort in the country called Hakone Pacific Land, which I always imagined was similar to Centre Parcs! In the Japanese film version, there is a big wooden sign at the entrance to the resort, which inspired the wooden sign next to my Ryokan. A little homage to one of my favourite Japanese novels! Whilst watching the film, I couldn’t help but analyse building structures. The film constantly moves about from city apartments to country inns, so there’s a variety of sources to go by. One notable feature of the Hakone Pacific Land cabins were that they were raised from the ground, with steps leading up to the entrance. I’m not sure if this is just a reason to hide a well under one of the buildings or whether this is a typical Japanese feature, but kind of reminded me of the part in My Neighbour Totoro where Mei peers underneath her large country house to look for a small spirit being who is hiding there. Personally, I’ve never had a house that I could look under! And I would be very worried if I could…

The house was actually recreated for the Expo 2005, which will be a really great model to design from for future buildings!

If anything, this morning’s Ryokan sketch got me thinking about the difference between the playable level background and the inactive, distant background. This will probably be mountainous, which is a backdrop which came up in Ring a few times, and makes a good background because it takes up a lot of space, is huge and consists of dull colours which won’t detract from the playable level. There may be a little sky and some clouds too.

To give myself another starting point, I started to think about level shapes. Personally, I think it’s easy to work inside a set space than design random pathways with no real structure. Just as an experiment, I looked at the shapes of some Japanese colour Kanji, as each of my levels will have their own distinct colour schemes.

The colour scheme for the first level is pink, or rose-coloured– “momoiro” in Japanese! I double checked all the kana in case the internet was playing practical jokes, I’ve heard stories of people accidentally getting “soup” tattooed onto themselves when they wanted “dragon” for example! Pink is also sometimes referred to as peach-coloured, but apart from that I think I’m safe to use this symbol.
From this, I tried to build rocky structures with buildings and other features, although I still found it difficult to arrange an entire level off the top of my head. I think my safest bet for now is to keep drawing it and adapting it until it becomes clear. I’ve also found that it’s easier to concentrate on a smaller area at once, so I may split the map into four and work on a corner at a time, starting with the top-left corner where the Ryokan is situated. Here are some of my very early scribbles, you’ll see what I mean about them being fairly difficult to read! I know what they mean though.

This is the first step in level design, according to Peter McClory who posted his really great insight into his design technique on his Blog. This was his initial level design for a game currently in development:

I’m glad to read that he favours the scrap paper approach to initial design! My original Ryokan interior design was drawn on the back of an envelope! I think it’s important to get an idea down on paper before it fades or changes, so sometimes it’s necessary to grab whatever is closest and draw.

With this design down, McClory moved onto squared paper to get a scale and accurate version of the level. He explains how important this is, because it must be designed to the constraints of the character who will be moving through the level.

Once this was complete, McClory moved into tracing paper and drew in the small details of the level, traced from the basic structure on the squared paper. The result is a wonderful pencil sketch, which I could only hope to equal! Tracing paper is currently top of my shopping list.

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.


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

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

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

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

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.

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.

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!