Splash Video

I wanted to include an opening or splash video at the beginning of my game for a couple of reasons:
1. It acts as a good way of setting the scene for the game and requires no use input
2. Many games use a video to open as the quality of pre-rendered material can exceed the quality of the game.
Obviously I didn’t want to change the game’s visual style, so I wasn’t about to create a fully 3D high definition film. I mainly used elements that already existed for the game, such as the backgrounds and cloud patterns. I imported these into After Effects to create an ambience which would not be possible in the engine!

The great thing about using After Effects is how adaptable the game elements became. The first thing I put into the video was a line of text, which I made to look like the text in the game. Using the typewriter preset for text layers, I was able to draw the text in gradually, something which many older games incorporated for increased readability of dialogue. I was also able to create a gentle fade transition, this is an effect I’ve used between rooms in the engine although for some reason the screen flashes whilst performing the fade operation.

To create the moving parts of the animation, I used a similar method to creating in-game animations. I started off in Graphics Gale, where I made this image sequence:
I imported each of these individual images into After Effects and gave them all their own layers, so that I could manually adjust the timing of each image and its place on the screen. I’m not sure if there is an easier way of doing this, but I wanted the animation to move naturally and felt like a good way to do this was to place each image individually!

I ended up with this sort of thing in the timeline, where there wasn’t actually much movement happening on the screen, just short bursts of separate images in a sequence. This kind of control over image sequences is much harder to achieve in the sprite editor in Game Maker! As well as the backgrounds and character layers, I have two cloud layers which gradually scroll across the screen at different speeds, on exists behind the character layers and one exists above. I made all of these layers 3D so that once the animation was nearly complete, I could add a camera and create a slight zoom in effect to centre the action! Lastly (since uploading the animation to Youtube) I added an ambient light, which highlights the moon and the character and seems to give the impression that it is night time. In contrast to the old render, this looks like a huge improvement…

No Light

With Light

Game Make will not actually play videos, but uses system software to temporarily disable the game executable and play the video as though it was streaming from the game. As my game will be available for Windows PCs, the video which will appear in the game will be in .wmp format, and will be the exact size and resolution of the game to remain consistent. It’s only about 30 seconds long, but can also be skipped by the player (although I haven’t shown how, the escape key is fairly obvious…) I’d like to think that a first time player would show an interest in sitting through the full 30 seconds!

Splash animations Sound Effects:
Crickets & Background Noise – Night Forest from freesound.org
Falling Sound – Grass Steps from freesound.org

GDL – 30/11/11

So, back into game tweaking today after yesterday’s brief break! This morning I wrote up a list of everything I would like to achieve before Monday’s deadline, the outcomes of each area will depend on the time each will take to accomplish…
In order of importance…
1. Add an opening video
2. Add an opening cutscene
3. Add extra animations
4. Add extra sound effects
5. Add objects to the level design
6. Add extra little random bits!

Opening Video
I put this at the top of my list as my game needs something to set the scene of the game, before the player jumps right into game play. I started working on this a little while ago, but don’t think I mentioned it as I was never really happy with the outcome. The animation, which I started to make with the game sprites in After Effects, is based on the sprite birth process I drew up. It’s about 30 seconds long, and just gives the game a little context. This morning I spent a little time improving on the bits I didn’t like much, and came up with this:

This will be played after the title screen but before the player can take control.

An Opening Cutscene
What I had in mind for this was a partly interactive sequence which involved communication with the tree. What I currently have isn’t completely what I had in mind, but I had to spend a lot of time today working out how to implement dialogue as this is something I’ve touched on very little so far. Until now, all of the text I’ve used in the game has actually been PNG images. I was worried to find that Game Maker does not recognise OTF format fonts which I had previously been using, but was relieved to find free font converter.com which converted the typeface to TrueType in seconds! Now all my game fonts are consistent!

At the moment, when the player gets to a certain point on the top branch of the tree, an event triggers which scrolls through various strings of text until the tree finishes talking. During the time the text is displayed, the character can still move about and ultimately completely ignore the event, so I don’t feel it’s entirely effective in its purpose. I had hoped to include multiple choices for the player to choose with different text outcomes, but I’m not really sure how to do that…

Extra Objects
Now that the sprite birth is a part of the story, I thought it would be important to include the sprite flowers which blossom in various places around the tree! You can see the empty flower in the image above. I am aiming to get these animated so that they sway slightly when the character collides with them, but again this is a work in progress- all I’ve achieved so far is dotting them around the place…

GDL – 29/11/11

I’ve taken a break from game tweaking today to clear my head and finish up some previous work on the GDD & other concept/progress work. I’ll print the finished document before the end of the week for presenting, here are the spreads so far:

This slideshow requires JavaScript.

The whole document feels as though it’s not complete, but I think this is because it is focused around a small portion of a potentially larger game, which will probably never come into existence. The important thing for me to take from this is the content type and layout which I can take across to my next major project.

GDL – 28/11/11

The things that makes a game a game:
I feel like I’m nearing something that feels like an actual game, I’ve already referred to its current state as a game alpha… but up until now, there were a few essential game elements which were missing. Most of these come down to the game’s Graphical User Interface (GUI), previously non-existent! So today I’ve thrown together a few bits using the typographical elements I’ve been working on:

1. Main Menu/Title Screen
Most, if not all games use a title screen, which is typical across a lot of interactive media such as CDroms, DVDs, and even some websites. The purpose of the title screen is to present the name and general feel of the game, along with the details of the developer/publisher. It is also a place where the player can configure controls and other settings before indulging in gameplay, although I currently have no options for the player so my title screen has ended up being very minimalistic!

When the game loads, this is the first thing the player will see. The screen is created in the same way as any room in the game, only in this room there is nothing to control. The text in this image is actually a sprite. I’ve used the sprite to create an object so that I could program the simple key control:
if keyboard_check(vk_anykey)
room_goto_next();
transition_kind=21; //this creates a room transition, like a transition between any room!
The starry background scrolls gradually across the x-axis, as there is no music and I try to avoid there being too much stillness on the screen that could give the impression of the game not working properly!
After a key is pressed, the screen fades and the game begins. Later I will add the opening sequence.

2. Pause Menu
The pause menu acts as a way of pausing the on-screen activities, either to leave the game temporarily, change game options or leave the game. As I’ve mentioned, I have no customisable options so my pause menu options are simply “continue” or “quit”. There are no preset menu-creation functions in game maker, and programming menus to appear above the actual gameplay can be quite complicated.
I got a lot of ideas on how the make the pause menu function from this forum thread and the downloadable example.
Firstly, a string needs to be created:

Then, each option has to be programmed, along with the keys to select or change the options:

The draw event programs what actually happens when the game is paused. This has to be a draw command as imagery and text is “drawn” onto the screen where it wasn’t before.

Lastly, the key is set to essentially turn pause on or off. If pause is off, everything is normal. If pause is on, everything on screen is disabled and the elements stated above are “drawn” in. Originally, my paused button was the letter “p” on the keyboard, but I’ve changed this to “esc” as I think more people would hit this key if they wanted to end the game.

In the game, the pause menu looks like this:

Unfortunately, it looks like Game Maker does not support Open Type format typefaces, so I wasn’t able to include the typeface Museo into the menu. Hopefully the type here doesn’t look too out of place.

3. Ending Screen
This is only really relevant to the demo version at this stage. Basically, once the player gets to the end of the level they are taken to the last game room, which is one screen which thanks them for playing and present a dead end where a few buttons will close the window. In this case, the character falls from the top of the screen and continues to be playable, but for no real purpose!

All of the fancy swirly typography has been adapted for the game in the same way as the game logo!f

Text & “Text Boxes”…

After making the game logo, I started to toy around the concept of retro vs modern by creating low res & high res versions of my selected typefaces:

I considered using a pixelated version of just one or the other, but think I will keep both fonts in “modern” mode. I like the contrast of the smooth type with the hard, pixelated edges of the in-game imagery. This also helps readability of the body copy, as some 8-bit typefaces prove a challenge to read!
I wanted to avoid using traditional style text-boxes in my game, to match the contemporary typography. So far, I haven’t implemented any dialogue into the game, but I hope to when I sort out the opening sequence/intro to the game. At the moment, the only appearance of type is where there are prompts to the player about what to do or which direction to travel in, so the positioning of the type is dependent on the kind of prompt being shown. Here are a few examples:

To show who is speaking, I’ve added a little symbol in the top left corner of the text, which will appear whenever the tree is speaking. The symbol is supposed to represent a manifestation of the spirit of the tree, which in Japanese culture is a dog. My symbol looks a little more like a fox, but I hope this doesn’t confuse the player too much! In the opening of the game, the symbol will appear embedded into the tree bark, so the connection should be made.

Somnium Logo

I settled for a logo design mainly using the font Lutin Paniquangoisse from dafont.com. I thought the typeface suited the game the best out of all my options, and didn’t resemble any other game/film/logo (that I know of!). In the typeface’s original form, the logo looked like this:

The swirls and rounded shapes represent the style of the game very well, and seem almost organic. To adapt it slightly, I traced the type in Photoshop and adjusted it in places:

I actually made very few changes, but what I really wanted to add was the tree-leaf top to the letter “i”. To change my scribbly trace into a smooth game logo, I used Illustrator’s Live Trace function to create a vector version and combined this with some of the letters from the original type. The conversion to vector created a very hard edge to the logo, and smoothed out most of the roughly drawn edges. The little parts that still jutted out were easy to adjust using the anchor point mover and the pen tool. Once I was happy with the result and it almost exactly the same as my original drawing, I brought the image back into Photoshop to add a gradient and glow effect so that it matched the game’s image style. I would have liked to have spent a little more time perfecting the logo, but with only a week left to get the game finished, it doesn’t hold a high priority. Here’s the current logo design for Somnium:

I mentioned before that I was looking for a good typeface to use for body text, and I feel that “Museo” from myfonts.com works really well with the logo. The logo is over exaggerated and difficult to read, so I wanted a very simple body typeface to any other type in the game.

Logo & Type Design

I drew these designs up a while ago, but put them to one side for a while so I could concentrate on actually making the game! Now that I want to put text into my game, now may be a good time for choosing a logo design and general theme for typography throughout the game. These designs have been inspired by a number of things, like existing typefaces and other game logos! What I really want to get across with this is a sense if roundedness and nature, as this encompasses most of the game themes. My favourite is probably the second from the bottom on the left hand side, which is strange for me as I usually prefer very clean, simple typography. I think this one looks most like a game-logo, and gives a good impression of what the game will be like to play!
With this in mind, I definitely want a contrasting typeface for body copy. Something very clean and straightforward, placing more emphasis on the extravagant titles and logos!

Game Typography

Today, I want to add prompts to the game that suggest a route for the player to take. These will take the form of the tree vocally guiding the character along, trying to help him to the bottom. The game will have no spoken dialogue, so I’ve been looking at the kind of typefaces for text boxes or subtitles that would appear in the game where dialogue is involved.
As the game’s pixel art style is inspired by retro 8-bit games, I started looking at the kind of typefaces these games had. Because detail was so limited, the type generally had to be quite big and simple in order to be legible! A lot of old game fonts can be found at the Spriter’s Resource, here’s an example of a few from the NES section:

Earthbound
A simple serif and sans serif example with various weighting.

Kirby’s Adventure
A more complex serif example using a more colour to add depth to the text.

Final Fantasy II
A very simple clunky example of how a lot of retro text looked!

Zelda II: The Adventure of Link
Drop shadows to add depth.

As I’m not restricted to using 8-bit typography, I have more options open to me than they had when making these classic games! Recent games such as Gabriel Verdon’s The Archer (currently in development) have chosen to stay true to the retro style and incorporate 8-bit typography:

I think I’ve found the typeface used here at Myfonts.com. Personally I think this one is a littler hard to read, which is the reason the fonts from old games had that large clunky look!

Sword & Sworcery EP, which uses a lot of vector imagery and does not stay true to the rules of 8-bit game making, incorporates a modern-looking sans-serif:

In the game, all speech or dialogue appears like this in the top half of the screen. It’s a nice step away from classic text boxes and completely modernises the system of including text-based conversation.

So I have the choice to use a classic-looking font in a traditional text-box or otherwise, or find a new and more interesting way of implementing text into the game. At the moment I’m looking at simple, sans serif fonts which I can either use as they are or create a pixel-art style version of to match the style and feel of my game. Searching through the free fonts on myfont.com, I’ve picked a selection so far which I think would be appropriate. I currently like:
Museo
Clementhorpe
EuroSans
Lintel

GDL – 23/11/11 – Alpha Feedback

I think I’m possibly now at a stage where I can call my game version an alpha? That’s what I’m calling it anyway!
Today I took up the task of tediously placing all path and climbing objects almost to perfection to create seamless, smooth movement throughout the entire demo. Each room now has all path blocks in place, all climbing areas, all bush-rustling sounds and room-transfer triggers. They look a little like this:

The most important thing to do now is to gain feedback before making too many more decisions. The game still has little content, so I’m mainly looking for feedback on movement, backgrounds and general traversal of the level! When I showed this to my housemates, some of the first comments were about the placement of the character on the level. Occasionally the character still appears to be floating or dangling over the edge of branches. After spending an entire day placing the level paths this was not something I wanted to hear! I’ve noted down all the dodgy map positions and aim to fix this first thing tomorrow.
More Feedback…
1. Room Transitions
For reasons beyond my knowledge, the screen seems to flicker when moving between rooms. I’ll be looking on the Game Maker Community forums for advice on how to stop this.
2. Boring Pace
The animation speed and movement speed currently do not match up, so I will be altering speed anyway. I was slightly worried that walking was too slow-paced, and this definitely came back in feedback. Now that the movement is mainly sorted out, I will be implementing the parallax backgrounds to make the levels seem more interesting.
3. Climbing Areas
Some climbing areas do not seem to be wide enough, and it seems as though the character falls a long way without having anything to grab onto! I can change this by simply adding more pink squares to large patches of climbable area.

GDL – 22/11/11

Objectives for Tuesday:

1. Sort out object placement in room_top_right
I’ve managed to get the movement system working well, but paths and climbable areas needed sorting out for smoother spriting and general navigation of the level. I spent this morning rearranging paths in the top right hand room, which has eventually led to this conclusion:

I’ve extended the playable area and removed a lot of the pink squares where the sprite changes. Moving the squares away from the edges of the tree means that the character does not appear to be climbing where there is no background.

2. Reanimate the Climbing Dude
I previously made a climbing sequence but so far have not made anything I’m entirely happy with. Originally, the dude used alternate arms to hoist himself up like this:

The problem with this sequence is that it doesn’t look like the character is putting enough effect into clinging to a tree, or at least something didn’t feel right! I started to look into ways that squirrels climb trees. This climbing technique involves planting both sets of claw into the bark, pulling up the legs and repeating. I tried to emulate this with my next attempt at a climbing sequence:

This seemed to work better, although I tweened the first and last images with too much resulting in a very smooth motion. The overall movement should be jittery and sudden, so I eventually just took out some of the inbetween frames:

This image also shows my adaptation for sideways movement! I’m still not 100% about these sequences, but without feedback I’m temporarily at a place where I don’t know how to improve them… Part of my objective to sort out the climbing sequence was to sort out the code involved. I was struggling to stop the sequence from looping when there was no input, but that is all fixed now!

3. Add some sounds *hopefully*
I spent a lot of my afternoon looking into free sound effects and ways of implementing sounds into the game I have so far. It’s not the easy task I assumed it would be, as timing sounds can only be based on key inputs or certain collisions, and at times the trigger for a certain sound needs to be very specific. I’ve found freesfx.co.uk very useful, although it did take quite a while to scan through a lot of unnecessary effects. So far, I’ve adapted the sound of a branch dragging through dry leaves to resemble the sound of leaves rustling as the character walks past them, and the sound of a karate chop style swoosh as a jumping sound! As you can see from the level-design image at the top, I’ve used image trigger to program when the rustling sound is played. The jumping sound it trigger by pressing the up key. I don’t know yet whether these sounds will still be in the final version.

4. Get feedback
This is something I haven’t managed to do today, but really need to do before developing much more. I need the opinions of other people to show mistakes or things I may have missed. I feel as though I’m blind to certain imperfections after seeing them so much! I definitely now have something that is playable and testable, and will hopefully gain some feedback from this tomorrow, even if it is just my housemates helping me out!