Finishing the Game

So I've just added the finishing touches to my game. I've been trying all week to get a killbox working as well as implement some sort of vanishing platforms as I really liked that feature from my previous test. Sadly I've not been able to so I've added an invisible platform that will stop the user falling right down. This isn't really what I wanted to happen but I was happy with the final result regardless.

The game meets my initial goal and vision for the project. The choice to go with the low poly style ended well as initially I was worried about it. This is the first time I've properly used Illustrator for an entire game  so it was a good test of my skills. My research in my creative research module this semester focused on techniques for creating depth and this really helped my environment. The depth in the frame helps set the platforms well and the overall aesthetic style is better than I had originally planned.

My initial goal was to make this more of an interactive art piece than a game and I think I achieved this. This was helped a lot by the music and sound effects as the are calming and happy. The use of the wind and wind-chime noises help give it more atmosphere and set the mood of the artwork.

I was happy with my choice of text/poem/author as it allowed for a lot of artistic experimentation. I really struggled to find any external analysis of the poem which perhaps could be seen as a disadvantage but it allowed for fresh look at the poem and my own artistic expression. The art style could easily have been quite dark because of the words used through the poem however I really focused on the calming and dreamy aspect of it. Originally at the beginning of the project, I had a very different view of the final results however I don't think it could have worked better. My choice to ditch my original art style was probably for the best.

I just need to record the final video of the environment. I'm struggling to find a program that can record the sound effects but the final song I found could work nicely anyways.

Visual Prompts

In order to help the user through my environment, I've include visual pointers to guide them through the map. This helps to keep the gameplay flow and doesn't frustrate the user. I want the game to feel like they have a helping hand so that it isn't frustrating. This wouldn't make the game peaceful and calm which was my initial goal.

This is the first visual prompt that helps tell the user what to do. It's deliberately placed in a position that forces the user to read it. The contrast of the white, blocky text catches the eye first. 

This is the visual prompt that tells the user how to change the environment from day to night. The choice of words helps enforce the fairytale/adventure feel to the game. It is also deliberately place in a position that makes the user look at it. I deliberately didn't have any of the environment below to so it's easy to read.

This prompt tells the user how to change back to the daytime scene. I deliberately placed it below the end of the platform because this is where the player would look when there is no obvious platform ahead. The green is also a night contrast to the white text and maintains the same aesthetic as the previous text prompts. 

This is the second use of the prompt in order to get the third fairy. It's the same deal as the one above placement and text wise.

All the text boxes were placed on the same layer as the background. The parallax scrolling helps make the text stand out better as it moves below the boxes. The text boxes were coded to disappear and appear depending on what filter is applied, day or night. This was to keep the environment clean and easy on the eye. Too many text boxes would have taken away from the artwork.

Snake Visual Prompt

I added a small visual prompt on the snake if the user were to not see the first fairy straight away. The snake moves around and hints to go above him with his eye movement. 

The prompt it subtle but works ok. I personally would have like to implement the cavern so the snake had more of a better placement and interactivity however this was too much of a struggle. The single environment work well regardless.

Sound Effects!

This was my initial sound asset list. These will be really important in adding atmosphere to my environment. If they are chosen correctly, the user experience will be improved furthermore. 

footstep sound

spell sound (day and night)

jumping sound

fairy disappear sound

maybe a snake hissing noise

backing track (must be ambient)

wind sound (this will give the environment atmosphere)
twinkling sound FX (evoke a happy atmosphere)

I've been searching for sounds that are specifically for games however freesound.org has the best selection of one shot and atmospheric samples. I've also found this website set up specifically for game designers that need backing music for their games. It's an awesome website! The user interface isn't beautiful but it works well.

http://www.nosoapradio.us

Most of my sounds were eventually found within my own sample library.

Footsteps

Footsteps proved harder to work out than I had thought but I found a nice simple one shot on freesound. I chopped it up in Logic then imported it to flash. The one shot was then applied within the movieclip to make it match to the footsteps.

Spell Sound

I had a few different options that I wanted to try. I initially looked at using quick an effect-heavy sound that evoked quite an alien-riser feel but this didn't sound right. It was too aggressive so I had a look again. I eventually settled on a piano effect key that had two notes. This worked well as I could use one for the sun and one for the moon. The lower key was with the moon.

Jumping Sound

I decided not to use a jumping sound as the footstep sound worked well enough as a landing noise too. I also did so because I didn't have a jump animation to apply it too.

Fairy Disappear Sound

For this sound I searched through my sample pack and found a couple of effect noises that would work well together. I took them into logic to adjust the volumes, add effects and merge them together to match the length of the animation.

Wind Noises

Freesound.org was the best resource for this noise. It has loads of royalty free sounds of wind recorded by people for fun. Some are very clean and atmospheric. It was important to choose a sound that didn't sound too aggressive but more atmospheric. In order to further boost this, I added a sample of a windchime ontop. This kept it upbeat and happy.

Backing Track.

For the backing track, I used the new website I found. I chose the options; platform, chill, angelic and happy. It returned the perfect song! I'm so happy with it and it fitted so well. It adds a really chilled atmosphere to the game which is exactly what I was going for. It really works with the end screen animation too and you aren't bored just watching the character by himself.

If I could I would cut the sounds at the end of the game however I don't know how to do this with code.

End State

So I've worked out an end state to my game. You have to collect all 3 fairies in order to activate the end state. I've implemented a small UI that registers which of the 3 fairies have been found which is animated.

Fairy one is placed on the large tree with a hitbox above the leaf. Once the player hits the hitxbox, the fairy plays her animation and disappears.

The second fairy is on the other side of the tree and can be see from fairy one but not reached. There is a path that leads up to this fairy which requires the user to change from night to day and back again. This fairy is quite high up so this is required.

The third fairy is at the top of the vertical platform sections and also requires use of the mechanic to reach. The bridge will only appear when the sun is out which leads over to the final fairy. The hitbox is half way across the bridge so when you arrive at the fairy, she is already beginning to animate.

This is the small UI which is placed at the bottom left of the window. It has 3 squares that appear opaque at the bottom left which are then filled with a fairy head when they are found. Once all fairies are found, a black filter is applied over the whole environment but the player and the words 'fin' appear. The character is still animated and sounds still play but it's to signify the dream.

small fairy appears

both disappear

screen fades to black below character level

end screen

I tested showing the lines of the poem at the end but it didn't work very well in the space that I hate. The changes from word to word were too jumpy and did really read very well. Instead, I made a second fairy appear that says 'thanks!' and they both disappear at the same time as the screen fades out.

Giving the Environment an End State

So I've pretty much worked out the basics of my environment mechanic and how it's going to be applied, it will just take some tweaking to work out the best route to place platforms etc. One thing I'm trying to figure out is an end state. I had originally wanted to use my fairy character as a companion to the main character who could cast the day time spell. The only problem I'd have would be the flipping of the character. If she was placed into his movieclip then she would zip across to the other side of the character and that would look weird. I'm a total perfectionist that way so that wont do. I had an idea to make the goal of the game to save the fairy queens. They could be placed at certain points in the map that you have to try get to using different day and night states. Platforms could appear to let you get to the fairies with visual prompts to help you.

I've currently place the fairies in weird places around my new map. The idea is that when you near them, they will cast and spell and disappear. I will add a small UI interface to indicated where a fairy has been found. There will be 3 fairies to find. Once all 3 have been found, a function will be activated that will fade out the environment. I'm thinking about putting some lines form my poem at the end of the game to give maintain the fairytale type feeling to the environment. 

Throughout, I want the game to reflect the calm nature of the poem and evoke a mystical feeling. The fade to black at the end of the poem will reflect the last verse, 

"Philomel, with melody, 

   Sing in our sweet lullaby; 

   Lulla, lulla, lullaby; lulla, lulla, lullaby! 

   Never harm, 

   Nor spell nor charm, 

   Come our lovely lady nigh; 

   So, good night, with lullaby."

The fade will acts as if the environment is going to sleep, the words "so, good night, with lullaby" will hover next to the character. as it fades out. Music will be key to maintaining a calming atmosphere. I've had a quick google around for sound effects but I think I will have more luck looking in my own sample library. I make my own music and have a sample library of over 20GB. I'm sure i'll have some good things I can use. I will use Logic Pro 9 to edit each individual noise to make them fit.

So far for a sound asset list, I've included;

footstep sound

spell sound (day and night)

jumping sound

fairy disappear sound

maybe a snake hissing noise

backing track (must be ambient)

wind sound (this will give the environment atmosphere)
twinkling sound FX (evoke a happy atmosphere)

Day Time Filter & Sun

I've designed a day time filter effect that works really well. The colours used in my environment are perfect as they appear to suit both night and day backgrounds. The platform lighting stays just as clear with a brighter background and sun and the sense of depth is maintained. Below are screenshots explaining the change.

new sun and day filter

The sun day time filter was created by place a bright cyan blue rectangle with a 60% opacity ontop of the previous nighttime sky. This maintained the gradient applied to the original image however brightened it to a nice happy coloured blue. The large sun helps to establish the day time feel. The bright yellow has a slight gradient applied to it in order to give it depth within the scene. The outer branches of the sun rotate around the centre circle to make it more dynamic and engaging. 

night time spell cast

Once the night time spell has been cast the sun fall down into the horizon and the day time cyan filter begins to fade out. This allows for the stars to become more apparent signifying the change from day to night.

sun disappeared into horizon

Once the sun has disappeared into the horizon, balls of light appear to let the user know that the platforms are going to appear.

the moon begins to rise

As the moon begins to rise, the balls of light increase in size and a white filter fills the screen. This filter is placed within the spell animation and cannot be seen above. It enhances the overall powerful feeling of the spell and allows the background change to read better.

moon fully rises and platforms are visible

Once the moon has fully risen, the stars are more apparent and the day filter has completely faded out. All the fades and changes were made using a combination of movieclip animations using shape and motion tweens as well as simple execution coding. The only problem I'm having is freezing one of the buttons after it has been pressed. Currently the SHIFT key brings out the moon and the SPACE BAR brings out the sun. I have to lock each of the animations so that they place at the right time when pressed so it runs smoothly. This can be achieved through variables with Boolean values but I'm struggling to get it to work. 

Mechanic Tests

I've been experimenting to work out a mechanic that would suit my game. I've set up my scene so that when the user presses and holds the SHIFT key, the character plays the spell animation and some platforms appear for a certain amount of time. I've not experimented with changing the scene from night to day although I'm actually quite happy with the results.

The only problem that I'm having is when the platforms disappear, the hitboxes that allow the player to stand are still there but invisible. It reads quite weird to the user as they are standing on nothing in thin air, I think this could be changed. I've uploaded and example to show what I mean. You have to press and hold shift to reveal the platforms.

http://megaswf.com/file/2659002

example

I'm going to experiment more with flash and attempt to get the change from night to day working. Currently the moon goes down and the environment gets darker. If i implemented the change from day to night, I could control which platforms appear and disappear which would read better to the user. The overall style is looking good, the feeling of depth is there and I'm happy with the layout so far. I've moved to having two sections, one that's more vertical platform based and one that's side scroller. This gives more variation to the game and maintains the explorer type feel. Two paths allow the user choice and get them more involved. I'm still to work out how to include fairys and their hitboxes. 

moon at it's highest point

character casts spell and platforms begin to appear

platforms have appeared 

moon is going down and environment is getting darker

moon has gone down completely and environment is dark

I like the way the darker environment gives it more atmosphere and makes it harder for the user to navigate the environment. I'm having some issues with the ground boxes as the character falls through the floor and I have no idea how to include a killbox to the environment. This isn't too big an issue because the game isn't really about surviving, it's more about adventures and exploration. I want this to kind of be like a moving, interactive art piece instead of a game.

Into Flash

Now that I've got all my art assets together, I'm keen to get them into Flash with some code to test how it will sit in the frame. I also plan to change my layout as I go to make it a more natural game. It will improve the feeling of exploration if I build it using my separate platforms and assets.

This is how it sits at the moment. The black boxes that are present will be removed and the edges of the platforms cleaned up but I like the way it looks so far. This is the sort of view that I'd like to use for the game. It allows the user to see enough of the platform that they know where to go but not enough that it makes sense. This is mainly taken from my research into level design from Devmag. http://devmag.org.za/2011/01/18/11-tips-for-making-a-fun-platformer/

I think that the character scaling works well and the background gradient helps to emote a sense of mystery. It also looks like a nighttime scene which was my initial goal. It will be easy to add a bright blue filter over the top that can be implemented through code to change the day and night. I've started to animate the character. I think that this is important in effecting the mood of the game. The way the character runs determines what kind of feeling is emoted as well as what his animations are like. The other animation I've been doing is a spell animation which can trigger the change from night to day.

character mid spell standing on platform

An initial problem I have realised is that I'm struggling to fit the whole environment into my flash window and cant work out how to extend it. I posted in the years facebook group for answers but haven't had any solutions as of yet.

This a has made me realised that I may have to reconsider my level layout as it wont fit very well in the frame. I tried reducing the overall scale of the game but it looses some quality. I'm happy to rethink the design though as it didn't flow very well when I was testing it out. I also struggled get a way make the character appear as if they aren't jumping through the tree. Because it's coded to make the background move instead of the character, the layers are coded in and I'm struggling to get it to work so the re-think could be beneficial.

Finishing Off Art Assets

These are my final renders in illustrator of my art assets

This is the combined view of my side scrolling platformer design. The large tree is a nice touch as it messes about with the scale giving it the mystical feeling I was looking for. It also gives me the option to design a third environment within the tree where I could put evil creatures like spiders etc.

There is a tunnel entrance at the end of the map so that you can enter the cavern area. This is a final design as things could change as I move into flash. 

Finally came to a cloud design that I  was happy with. It has the 3d depth I was looking for and suits the environment better than my previous attempts. 

Close up of the large tree 

Close up of the tunnel in the tree

Close up of the tunnel asset

Below is the final background plane with mountains, clouds, trees etc.

I was really happy with this background. The depth is really helped by the moon and the shadows it casts. The final grass section has reduced shadows since the last attempts which stops it drawing your eye too much. The shadows on the trees were strategically placed to look as if the moon was casting them. This makes the entire image sit better in the frame and in the background allowing the foreground platforms to appear clearer. 

Here's a screenshot of my illustrator window. It's very messy but it shows my process and my various attempts at different coloured skys/backgrounds.

Coding Tutorial

I've been looking around for a few options coding wise. I've found a few but this one seemed the easiest to follow and implements parallax scrolling which is a feature I wanted to include.

http://as3gametuts.com/category/tutorials/game-tutorials/platformer/

 The preview files look good and have a fun exploration factor. I began to code a preview of my original character as I was interested to see if this style would work. The animation is very basic but the character is moving about.

http://megaswf.com/file/2659850

Pocket Gawd

As I was progressing my research into the low poly stuff and beginning to focus on the camera view I want, I realised that some inspiration could be taken for the iPhone game pocket god. I remember playing this app a while ago in the earlier iPhone devices and always liked the feeling of depth frame. Although the maps are small, the camera view is nice and shows you a lot of room within the frame. I really like the colour palette used in the games as they reflects the objects in the scene well.

The image above shows a similar layout to the game I'm designing at the moment. The horizontal panning is nice and the simplicity of the shapes is easy on the eye, I like the feeling of depth created by the waves using a sort of fall off perspective. The colour gradient is also important to create the depths in the sea. For my environment, I want to have the sun bigger and on the horizon so it has a cleaner change over. 

The simple use of colour within the image above and the use of gradient really helps to create depth within the scene. As part of my creative research module, I'm focusing on techniques to create depth within a scene. The brighter colours of the sand and creatures stand out much clearer ontop of the darker blue gradients if the sea and sky. This is something I should consider when putting my environment into flash. 

This image is similar to the one above. It also includes a mountain in the background similar to that in my environment. The perspective is aided by the scaling if the mountain and it

So setting in the scene. The black colours help it sit behind the brighter objects in the forground.

In terms of interactivity, pocket god has a similar style to the game I wish to create where by the user controls the look of the environment. Althought there is a lot more interactivity possible with a touch device, I can take inspiration from the change in scenery and the adventure and discover type feel to the game.

From Wikipedia. (Sorry)

The key phrase is 'manipulate' as it's the key mechanic I'm basing my environment on. I want to have the manipulation of the lighting and environment a key feature to keep the user entertained. It will also be a key feature that will allow the user to explore the environment. Certain platforms will appear at day and disappear at night and vice versa. The gameplay video linked to below shows the different changes in environment possible and how the characters respond to those changes, when it's a nice sunset the characters get dazzled and can't stop staring at it. When it's cloudy and rainy, they begin to look sad and depressed. This is also something I could consider going forward with my project.

http://m.youtube.com/watch?v=gHomSrEMfYk

Another quick bit of inspiration can be found on their homepage....

Inspiration can also be taken from the image on the front page of their website, the platform in the background is similar to that of the one I created in a low poly style. I like the style of the clouds in this image however i'll need to work making them more low poly shaped. 

Overall this study benefited my understanding of depth and colour choice, the interactivity also put forward some ideas to think on. Althought I'm going to have a much bigger map to explore, I feel that the camera view is nice and the character are a nice size on the screen. I will perhaps make mine slightly bigger.

Happy Snakey Caverny

I'm really happy to continue and focus on the Low poly style and think that the environment pieces I have so far work well. I've really wanted to create a second environment that could lead on from the main environment. This would be a nice touch and a change to pace and allow me to include the snake asset and creatures better.

I originally created some simple platform assets that I wanted to include in my main environment however there didn't fit in very well. I thought these would be a good starting point to refine and get a style for the second environment. I wanted to create a cavern like scene that was dark and creepy. I thought this would be a really good test of my low poly skills and give me a better insight into the process required.

These were the initial platforms I created at the start of my low poly tests. They were cool but didn't have any depth or real sense of perspective too them. Except perhaps for the bottom right. I wanted to adjust them and see if they could work in an environment setting.

These were my re-jigged versions of my initial platforms. The perspective has been totally re-adjusted to give them more depth and the colours sorted. I also wanted to experiment with circular platforms, the results are below. I looked to use a cave style colour palette to make them look like stone. I included some brighter colours to make it more me.

The circular platforms look cool even thought they are quite rough. Below is the finished cavern scene I designed. The idea would be that this environment is quite music driven with each platform playing a different sound depending on which one you are standing on. The middle platform would sound like a big drum, making a big booming noise when you land on it.

This is the final version of the cave design. The main focus was a test of depth, focusing on colour choice and perspective. Sound would be a nice interactive tool in this environment. The platforms each would have the key of a piano attached to them that would play when the player lands on them. This would allow the user to play small song etc. The idea of having the snake at the rear of the cavern was based around giving the game a slight story. The idea was that the snake in the cavern would give you advice one where to go and what to do in the main environment. The hope would be that he could explain that you can change it from night to day and this would in turn change the environment out side  of the cave. 

A possible problem with the cave is the lack of detail in the scene. If the camera was zoomed in more, the window would feel empty. This environment suits the zoomed out view with a smaller player. This could be a strange change that wouldn't really make sense as I'm planning to have quite a zoomed in view on the main environment. 

My main worry about having a second environment would be the test of time. Recoding a second environment could take a while. I think I will focus on the main environment and if possible put the cave into the environment. I'm going to have a more focused game objective by including the fairies as collectables. 

Making My Own Background Image

I wanted to get a similar design and use it as an art study. I thought it would be a good test of my illustrator skills. Here's a test example below...

I liked the results. The ground plane was made using a gradient fill. Only a slight colour change was required to give it the depth it needed. I then tried to add some shadow to suggest cliffs and bumps in the terrain however some more consideration would have to be made for the position of the moon/sun. This would give it a much better sense of scale and depth.

For the final game, I want to use parallax scrolling in order to make the platforms more obvious and give a good feeling of movement. It will make it more interactive. This explains the lack of trees and clouds etc in the above test as they will be on another layer in flash. 

This is the image I create. Easy variation can be applied to the mountains etc.

Low Poly Environment Tests

This is my initial layout test for my environment. I chopped and edited the background image to test if this sort of perspective worked well. I was happy with the results but wasn't sure about how well it will fit into the flash window. I think maybe a more vertical based game would work better but in terms of adventure and level design, a constant side scroller would work better.

I was really happy with the feeling of scale. The platforms stood out really clearly against the background and the layout is simply yet seems fun. The sense of adventures is maintain because of the mountains and rope bridges. The slight ancient feel from the statues also helps to give is quite a mystical feel. The perspective of the background works really well so I'm going to create something similar in illustrator using a 2D method. This will mainly involve using the pen tool. 

The only thing I'm not sure about is the colour palette. It could be made to feel more mystical and brighter however the colours will brighten when I take them into flash. I did some quick experiments using photo manipulation to try some different colour schemes to see how it affects the vibe given off by the game. 

original scene

Using the hue/saturation tool as well as many others, I edited the image to give it a brighter, warmer feel. The sky in the background really helps enforce a mystical feel as well as the stars. The highlight and shadow colours really give the depth I was looking for as well as keeping it happy and bright. 

This was another test I made. I wanted to see how the environment would look with extremely saturated lighting. I actually really liked the results as it could work as a change of feeling when the environment changes from day to night. The colour palette is more surreal and creepy. The vivd red sky evokes a dark feeling as it can be associated with blood and violence. The cool blue colours are a nice palette and have a weird planet type feel to them. The only problem I find is that some of the details and depth is lost and it seems too flat.

I'm going to do some more tests before I start to code the environment. 

Low Poly Development

In order to link the foreground platform assets to the scene, I looked around for inspiration that could help me design the distance backgrounds. I'm happy to create clouds in a 2D low poly style but I need to work out a process to develop depth in backgrounds.

I found this image and it instantly spoke to me. This was from a 3D tutorial in blender that teaches a simple low poly process to create environments. Looking at this I can see an easy way to replicate it in Illustrator. It would also be easy to edit and change to suit my needs. 

Below is an experiment showing the background in place below the environment pieces.

I really like the way the simplicity of the foreground platforms stand out well against the backgrounds. It is actually a contrast to my initial thoughts on design whereby I thought the detail should lie in the foreground however this style shows that the lower detail blocky shapes stand out better to the gradient fills in the background.