Exploring Colour

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

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

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

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

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

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

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

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

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

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

A Day of Walk Cycles

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:

Individual Leg Animations in Graphics Gale

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.

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

Early Art Development

Phil Fish’s devlog for the upcoming game Fez begins with a Photoshop mock-up of his game idea, made in the exact style that the game would be made in. With my cute character in mind, I started to get some ideas of how I wanted the game to look, and the kinds of colours I wanted to use, that sort of thing. So I thought I’d do the same thing. This would also act as my introduction to making tilesets for games, which is something I’ll be doing for the first time during the development of Hanami. I drew up the sketch above to get me thinking about what sort of objects would appear in the game a lot, and tried to assemble them into a small demonstration of the look of the game. It also led me to think about scale for the first time, as games are often way out of proportion. In a screenshot of Fez, a fan pointed this out for example:

However, the strange proportions are necessary based on the size of the tiles used. I worked out that Fez uses tiles which are 8×8 pixels in size, but these are expanded by about 5x when the game is played. This gives the game its very square feel, as there is little room for small details within each tile.

Games like The Archer and Cave Story use 16×16 tiles. While these don’t have to be more detailed, the opportunity is there, so for now I’m planning to create tiles which measure 16×16 pixels. By applying tiles to the sketch, I came up with this solution, which is by no means refined or finished:

I started by applying the 16×16 grid to the image, and draw a rough outline of the shapes as they would fit into that grid. Obviously, only background imagery really has to fit the grid perfectly. Objects and game items don’t have to consist of tiles, although in this case the tree seems to stand out a lot from the rest.

I mainly tried to concentrate on the tiles for the ground, as this was a single strip of tiles which were very easy to place and repeat. The difficulty was making enough that they weren’t too repetitive! I also tried to make sure they weren’t too overcomplicated at this point. Most of the tiles could be repeated and placed anywhere, but I made special end tiles with rounded corners which would only ever be placed on the ends!

As well as seamless tiles, I tried out creating single tiles. This closed type of tile is used in all three of the example games I’ve given in this post already, and make it even easier to repeat tiles into any form. In this case, each tile has an edge and stands out on its own, rather than fitting in to a bigger pattern.

I later added in a little more detail to the grass line, and made basic block-colour tiles for the background of this image. The tree is pretty much freehand at this point, and doesn’t adhere to grid or guide. I’m not sure if this is something I want to use much for background imagery, however it seemed to work well for the clouds in the very background. This image ended up looking very bright, and in my opinion a little too bright. The colours at this point are very inspired by Fez, but only for experimental purposes!

The placeholder character silhouette fits into a 32×32 square, which is a pretty standard character measurement in classic games. In terms of proportions, this means that tiles can sit at half the character’s height, representing accessibility. Tiles which create a vertical surface equal to or above the height of the character represent inaccessible areas, without having to take up too much room on screen.