Friday, 9 May 2014

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

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.