Produce Your Magic Key…

This morning I put the lock and key system in place in level 4, so that the final Boss stage can only be accessed when enough blossoms have been found. I was originally going to suggest 80 as a possible amount of blossoms needed for the second door to open (only 10 blossoms not discovered throughout all three levels…) But after a little volunteer play-testing I’ve decided to reduce this to 60. The player only needs to collect 45 blossoms to advance to the last stage, so my participants ended up with between 50 and 60 blossoms in their inventory by the time they got this far. That leaves thirty undiscovered blossoms throughout the game, which I will probably allow the player to collect later.

If the player doesn’t have a total of 60 blossoms, they will be confronted with this when they enter the house in level 4:

In this instance, they will have to go backwards through the game and try to collect more! All the doors that the player has previously opened will remain opened indefinitely, so the player can travel backwards and forwards through the levels as much as they like at this stage. If they have managed to collect 60 blossoms, the door will be open:

The player can then go into the next room and grab the key, which then appears at the top of the screen in the same way as the sushi and other collectable items. As I don’t have a space for it in the inventory (yet…) the key is visible just above the inventory to assure the player that they are carrying it!

In order for the key to work, I’ve created two new states which describe whether or not the player has acquired the key. To begin with, global.key is set to false, meaning that the back door will not open. When the player collides with the key object and presses the X button, the object is added to the itemList DS list and global.key is set to true, so as long as the key is part of the itemList datastructure global.key will always remain true. If the player presses X when near the lock object, this will deactivate the object and activate another new state, global.door. This draws an open door sprite over the top of the closed door tile, and allows the player passage.

Other than this, I’ve spent most of my day today tidying up messy pieces of code. The play-testing revealed to me a couple of things that were eventually quite detrimental to the performance of the game when played from beginning to end! For instance, I’ve realised how important it is to place lines of code in the right event. Most of my objects consist of at least two events, create and step. Code placed in the create event is called once, and consists of things like speed settings which are consistent while the instance exists. Code placed in the step event is called every “step”, which basically equates to frames per second. Hanami runs at 60 FPS, so each step event is called 60 times a second, and can reduce the FPS if overloaded! I’ve spent a lot of time shuffling code around so that all functions are called properly, and I seem to get a consistent 60 FPS, but I won’t be sure until I have another play-through in debug.

I’ve also been trying to remedy my screen view to account for varying monitor shapes and sizes, as I’ve now started running the game on other computers and notice some significant differences, mainly where GUI such as the HUD and inventory are involved. I’ve discovered that there is a built-in Game Maker function which can determine the display size it is playing on, but after a while of trying to apply this I haven’t had much luck in getting anything that runs as smoothly as it currently does now. So I may try to find another way around this.

Lastly, I’ve created a second new Sakura Tree object to replace one of my older designs. I’ve placed this very sparsely through the levels, as a rarity and a treat. It looks a lot nicer in smaller doses, so I’ve left the main tree background to my Bonsai and Bamboo objects.

Boss Stage

Today I’ve been planning out and creating parts for the final level of Hanami which is essentially an extended “Boss Stage”. There are no more items to collect, simply a path to unlock to the final boss.

This morning I sketched out some ideas on how the building in this level differs from the buildings throughout the rest of the game. I’d already planned the scale of the building, which was already larger than anything else I’ve made so far. The building in level 4 is the abandoned home of the Zashiki Warashi spirit, so my main focus was on making it look run down. I scribbled over the top of my building plans to work out interesting vine and weed formations, and work out where there would be cracks and blemishes on the building.

The result makes the overall picture look a lot less messy due to the distortion of all my straight lines! In this case however I’m happy for the image to look a little rough… I haven’t really worked on the background or decided on a background colour yet, I’ve been concentrating on the foreground for now!

Inside, the building looks a lot less derelict, but it is much more empty that most of the other buildings in the game. Because there are no items to collect in this level and exploration could be pretty boring, I’m planning on having a locked door which can only be opened when a key is acquired. The key is in an upstairs room, behind a door that will only open if a certain amount of blossoms are found (as a placeholder door I’ve decided that the player should have 80 blossoms, but I’ll probably reduce this if I come to code for this part of the game). Inside the building there are three upstairs rooms. The first can be entered under all circumstances, the middle door can only be opened if the specified amount of blossoms are found and the final door is sealed.

As a teaser and to prompt the player to collect more flowers if they haven’t already, all of the upstairs rooms are part of the same space, so by entering one door you can see into all of the rooms. By entering the first door you can see that you must enter the second door to acquire the key in the third room, accessible by a hole in the top of the wall.

The locked door leads to the last area in the game, where the boss battle will commence! I’ve designed this to have a small flat stage where Za-chan runs around, and two “safe areas” either side where the player can temporarily avoid attacks. I’ve drawn up a couple of new assets for this level, including a new version of the Sakura Tree which I might now use as a background element for earlier levels. This is simply a re-vamp of one of my previous designs, where I’ve made the branches a little more curvy and reduced the size of the blossoms growing on it. It looks a lot less cluttered than my previous designs, and will hopefully fit in better one the proper background is in place.

The other two new assets are stone statues which guard the “safe areas” by dissolving attacks on collision. The first Guardian is a Tanuki statue, which is commonly seen around Japan in restaurants, temples and homes. The Tanuki is seen as a sign of good luck similar to the Maneki Neko Lucky Cat, and is generally loved for being tubby and smiley! Statues are often colourful and remind me a little of garden gnomes, like this:

My statue is a carved stone statue, and looks more like this:

The second guardian of the safe zone is a Kitsune statue, a fox which is believed to have supernatural powers and immense intelligence. Both the Tanuki and Kitsune were once believed to have shape-shifting powers, and were almost worshipped for the powers they possessed. Kitsune statues vary in style, but are usually a similar shape of a fox sat upright:

And my carved stone Kitsune statue:

Like the other screenshots of this level, there are a lot of background elements missing! Here’s what it looks like so far:

The final change I have made is to Za-chan’s attack object, which was previously a piece of sushi. I’ve changed this to a small ball of light, however I’m not currently sure whether I’ll keep this or try to think of something more relevant later.

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.

Natural Hazards…

This week I’m thinking about all the features I want to have in the game before handing it to others for feedback! I think in my original time-plan I wanted to base the product of this week on feedback from participants, but I’ve gone into some of the graphics in a lot more detail than I was expecting to and as a result have a few other things that need rounding off/actually making… So my goal for this week is to create a working prototype ready for testing either at the end of this week or the beginning of the next.

One of the major things which I have omitted until now is, to summarise, how to loose whilst playing Hanami. I’ve implemented a really basic health system so far, which can currently only go down, and instigate an immediate game-over is it reaches 0 (which it can’t, because I haven’t put enough hazards in yet!) This is one of the things that needs a lot of improvement this week- it especially needs something to build it back up.

I’ve mentioned possible “hazards” or “enemies” before, and I’ve sketched out a few ideas in some of my level designs. The main feature of all enemies/hazards is that they cannot be “defeated” because there is no combat in the game. They are a part of the environment, and will not actively attack but will stand as a hindrance to players. As the collectable items are based on flowers, I’ve also based my enemies on plants, creating a good/evil balance throughout the natural world! Each enemy is also based on a unique movement type, to keep them varied and keep the player actively working out how to evade them.

The first enemy type is one that I’ve been using as a health system test, and is based on the Sakura blossom object. The idea is that it lurks in shadows and looks similar enough to the real Sakura object to lure players towards it, only to hurt them if they make contact. I’ve called this one the deceitful blossom, which is currently a working title name but may stick! Its movement type is nothing, it’s the easiest enemy to avoid as it simply sits in once place.

This enemy type has a few influences from existing games, not so much in terms of visual qualities but in attack style! I’ve looked at items and enemies that disguise themselves and attack at the last second. I thought of Vileplume from Pokemon which disguises itself as a flower, and the mimic from Braid which hides under the soil with a flower under its back. In a way it reminded me of the Mario “know you mushrooms” design seen on bags & T-shirts etc. Many Mario mushrooms look similar, but have very different effects, good and bad if acquired…

The second enemy happens to be a mushroom, but nothing like a Mario mushroom unfortunately. Unlike the other enemy types, a name didn’t pop into my head straight away with this one, so it is currently called Hello Mushroom…for a number of irrelevant reasons… This enemy doesn’t move itself, but it sprays a vertical line of deadly fumes into the air at random times through one of its many sphincters, which will deduct health points if touched. Most of my house mates have a serious aversion to mushrooms and try hard to stop themselves from vomiting when I cook them, so I’ve made this one super gross to fit their opinion of them. I think mushrooms are really yummy personally.

To get the motion of spore-release, I’ve been playing around with the particle functions in Game Maker today. I found a great guideline to all the available functions in a downloadable PDF here, which literally misses nothing! But so far I really have only been messing, so I’ll write up about my proper particle experiments later!
This guy’s kind of inspired by the many monster mushrooms in video games, like Funguar from Final Fantasy VIII, the Fume Shroom from Plants vs Zombies, and of course the deadly mist emitting Black Fungus from Kingdom Hearts.

The final enemy is one that moves horizontally by swinging from ledges and cave roofs etc. I’ve called this the Hanging Adversary, mainly because it was the first enemy I came up with and I wanted to differentiate it from any other potential creations! The hazard here is really sharp leaf-type structures- I said I didn’t want to feature any cliched spike-pits, so this is my original equivalent. I’ve fashioned it after a venus fly-trap to some extent, simply because the venus fly-trap has those naturally evil-looking teeth which make for a great game enemy. I’m sure they’ve inspired many monster creators to make plants that bite.

I had to be careful that this guy didn’t end up looking too much like anything else from the gaming world, although influences can natural be seen to the Mario Piranha Plant, and similarly the Venus Flytrap from Braid which was probably based on the Mario enemy! My favourite of the carnivorous plant monsters from games has to be the Deku Baba from the Legend of Zelda series, which looks so spiky and evil even with the lowest of poly-counts!

I’ll hopefully get all of this into the game tomorrow, and adapt the health system accordingly!

“Momoiru” Mood Board

A mood board of all things pink and Japanese! A little inspiration for creating a pink level….

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.

Sakura Mood Board

It’s not a real mood board, but this was easier than cutting and sticking! These are some of my favourite Google image search results from the keywords Sakura Blossom (Japanese name for Cherry Blossom.) The results are interesting because, although you’d generally associate the blossoms with the colour pink, the shades seem to vary infinitely throughout every image. This could partly be down to varying camera settings, but at times they are definitely represented as a very pale, fragile mass against a blue sky, and other times they are shown as a vibrant, luscious blossom.

The main point of this selection of images is to get a feel for the colour schemes of the flowers. They seem to have a huge impact on the areas around them, as if they emit their own colours against any background. I especially like the high contrast between the trees and the blue sky, although I similarly like the combination of browns and traditional Japanese reds.

In Hanami, I will probably be using tree sprites as background imagery, but most importantly, I must create a flower object which is collectable by the player!