Changes to the Background

One thing that’s been bugging me for a while is the overpoweringly plain background, which so far has been a challenge to improve. Because Game Maker doesn’t support large images, the background must be repeated in some way and can’t consist of one specially designed image. So far I’ve created one repeating image that repeats itself across the X axis at the top of the screen, but the image cannot be repeated vertically, so for the majority of the space I’ve ended up with a solid block colour filling most of the screen.

I’ve tried taking inspiration from existing games, although a lot of the most successful backgrounds (in my opinion) are either made of large complex images specially created to fit the foreground, or they’re smaller images that can have a “proper edge” because there is no moving camera change the background view. Above is an example from Braid, which consists of a huge background which pans the extent of the room.

A Boy and his Blob has some really great foresty parallax scrolling backgrounds, and to some extent some vertical camera movement. Here the trees have been scaled to create a sense of depth throughout the background, and brighter colours have been used closer towards the foreground to reduce the emphasis of distant background features. This is something that I could really consider incorporating. A while ago I posted about some trees that I designed to be part of background imagery, but I have since removed these because I felt the design was too inconsistent with the foreground. I felt inspired to redesign these recently after watching Tekken: Blood Vengeance (of all things :S) and seeing a similar style tree in the Japanese landscapes of the film.

I realised that in order to make believable, aesthetically successful trees I would have to pad my old design out slightly, and try to represent the trees textures much better, especially leaf formations. I mocked up this new design to check how well it fit into the level design, judging by its size and shape:

Here is the finished design, with all details added:

The colours have also been dimmed slightly, because I noticed that the old design cluttered the foreground a lot more than it should have done. I only have one tree made up with this new design, but it doesn’t seem to get too repetitive when placed throughout the game. I’ve placed the design into level one for now, although I’m considering only using Cherry trees in this level and saving the Bonsai style trees for level three.

I haven’t got round to adding any “depth” to the background imagery yet, but you can see here that I’ve been playing around with difference colour combinations etc. I’ve finally got round to brightening the ambient colour overlay which activates the lights, so the level feels a lot less dark now! The new colour is “grey38” from this list of hex code colours. The colour of the sky here may or may not stay, but this is intended to be level specific, so in level two the sky will be an orangey colour.

I’ve also been working on an alternative to trees in level two to add a little more variation to the level. Instead of a thick layer of trees, I’ve been trying out a thin layer of bamboo in a similar colour scheme to the new tree designs.

These seem to look much better spaced out than bunched together, as you can see from these screenshots:

In this last image, you can see that I’ve added the same silhouette background, ambient overlay and sky colour to create a much more finished looking background, which is consistent with other levels.

Today I advanced on some of the graphics decisions I made yesterday, starting with the background trees.

This was the initial structure that I had from yesterday’s rough test, however after looking at examples of real and drawn cherry trees I felt that it could do with some improvement. For a start, this sort of tree tends to have a lot more branches- the lack of leaves really emphasises its branches more than other trees. I painted this new design based on additions to the old one:

Before, I’d represented the tree’s blossoms as blocks of colour, but realised this wasn’t really appropriate based on the nature of the tree. The blossoms create very different shapes to leaves, and I wanted to get the texture of the tree right.

To get this right in the digital version, I took the 16×16 pixel Sakura Blossom sprite and reduced the size by half, which ultimately distorts to shape and makes it seem more abstract while keeping a lot of the colours intact. I then copied and pasted it into the design, to create a repeating pattern which looked a lot more natural and detailed than the look I was going for before.

This tree is made up of three layers: a top layer containing blossoms, a middle layer with the tree trunk and a bottom layer which contains a darkened set of blossoms to create depth within the tree.

I repeated this process with a new tree design, which I sketched out but didn’t get round to painting unfortunately. The idea is to have two contrasting designs so I can hopefully repeat these two throughout the level design without having to draw any more VERY time-consuming trees…

Some screenshots from the level:

They’re surprisingly flexible! However, not much good on their own. I’ve had to adapt the design for the Bonsai style tree to match this one, or it looked seriously out of place. I used a similar method, however I converted the colours to the Sakura Blossom sprite to look more like a leaf than a flower. Here’s the result:

My main objection to the design is that everything is currently still very murky, despite the odd light here and there. I’m thinking of increasing the span of some of the outside lights to make everything a little brighter, however for now I’ve seen a great opportunity to hang lanterns from my trees. Everything so far is still in test phases, and this is no exception! This test has resulted in light overkill, which I’ll sort out if I decide to keep this in.

Auspicious Everything

Today I started to crack down on Hanami’s background imagery, not just the background tiles which in a way make up the foreground…But the actual far-distant background that doesn’t affect gameplay in any way. So far, my background has consisted of a grey colour which has been made a murky pink colour by the ambient overlay from the lighting system.

Obviously, one hugely important feature of the background is trees. I would consider myself a failure if I made a game about cherry blossoms and didn’t include the trees that they came from. This has always been a part of my level design thoughts, and although I’ve never mentioned it, the trees were among the first elements I started to think about when developing the art style.

As a I knew I was going to be using tiles but wasn’t sure what they would look like at the time, I wanted to make sure the trees didn’t conflict with the rest of the style too much. I tried to think of ways to make trees from tiles just in case making stand-alone tree objects didn’t work. From playing around with rock features etc. I’m pretty confident in saying that wavy tree objects aren’t going to be an issue against the square shapes of the buildings and other elements.

I discovered this photo a while ago and knew I had to make trees that looked like this! They fit in very well with the style and look naturally Japanese, which helps with the consistency of the game’s themes.

I reduced the size of the image and essentially traced the shapes in Photoshop to create these tree objects.

I imported these into the Game Maker project to see what they looked like with the rest of the tiles I’d already created, and here is the result:

They fit into the landscape better than I expected, however I felt that they needed rescaling to act as background elements. The background is better off made up of fewer large objects than lots of small objects cluttering everything up. I had a similar idea for a Sakura tree this time traced from a branch as opposed to an entire tree, which never really got finished.

Auspicious Clouds

Another element that’s been a part of my designs for a while now has been this swirly cloud pattern, which I’m hoping to use for cloud platforms towards the end of the level. It’s a very Eastern cloud drawing technique, started as the auspicious cloud pattern in China and adapted by the Japanese. Anime enthusiasts may recognise a similar pattern used as the Atatsuki symbol in Naruto.
It’s the spirals that really set this design apart from the standard cloud-like patterns you tend to see in Western productions, so I started arranging drawn spirals to get these cloud shapes:

This is actually an early page from my sketchbook which I cleaned up and recycled, which is why Hana has appeared in the bottom left corner!

Because I want everything to look Japanese, including things like clouds which tend to look the same all over the world, I started working on implementing this sort of design into the background. I used the previous screenshot to draw straight onto to try out a rough version.

From this I made a cleaner version, which I attempted to shade and make consistent with the rest of the game assets. I kept the scale roughly the same, as I thought the cover from one cloud was adequate. However, in the game I felt they may be slightly too big compared with other elements such as buildings, although I won’t change anything now until I’ve added in more background. These will definitely go in though, they don’t look as though the conflict or compete with the foreground and represent a part of Japanese culture.

This kind of gives you a rough impression of how they look in the game, although for now I’ve simply repeated the designs infinitely along the X and Y axis and seem to have created a cloud overload. In this example, I’ve added a slight blur and changed the opacity of both clouds to make them seem more cloud-like.

Auspicious Trees?
You can see from the sketches I did above that while I was drawing the clouds I thought to myself “I could use this pattern for trees also…” Although this decision has been a battle in my mind all day. Yes, it works well as a tree design in theory but how well does it work in practise? I tried both designs for the bonsai tree and the sakura tree out with this auspicious leaf pattern on the mock-up screenshot:

While both designs are nice on their own, I just don’t think its appropriate for implementation into the game, as this really does create clutter and mess. As competition for the design, I created a more realistic looking Sakura tree, inspired by this lovely painting. I wasn’t sure on the scale of the tree, so I made this second design slightly smaller and compared it with the “auspicious” design in the Game Maker project. This is the comparision (minus clouds!)

Unfortunately, I felt that neither of these designs were suitable. While the more realistic design works better in union with the game’s tiles, the “auspicious” design is much better in terms of scale. So, to put any tree designs into the game I have to increase the scale. I think the height that seems to be working is about 150 pixels.

Auspicious Bushes?
I had a real lightbulb moment this morning when I drew a spiral pattern at the base of the tree and realised that I could add bushes to my level design. These won’t be spirally, but expect bushes. There is a definite lack of plant-life in my game world so far.

Auspicious Everything Else
So I now know that I will have at least two types of tree in my background, as well as possibly some bushes if these don’t get into the foreground. I’ve mentioned before that the background will probably mainly consist of mountain shapes, to look like far distant mountains. Japan is full of mountains. It’s very much a Japanese thing.

I went back to the Photoshop screenshot mock-up again and drew in some really rough mountain shapes. These fill a great amount of negative space, and work so well in creating depth.

I’ve yet to develop these any further, but getting the background down is one of my top priorities now as I’ve realised how much difference it makes to the feel of the level. I will probably create a seamless string of mountains that will be repeated across the X axis at the top of the level like this.