My first real development log video! Today I’v been able to compile the first real game footage in its very early stages. This video talks a bit about what’s going on in the engine, as well giving a little look at how the game plays so far.
What I’ve been doing today…
Firstly, I finished importing each room background layer into Game Maker, and sorted them out nice and neatly!
For each of the 8 rooms, I repeated the process of applying each layer, defining whether or not it was a background or foreground layer, and changed the room view to a smaller screen which followed the character. It was a tedious job, and unfortunately there is still no guarantee I won’t have to do this all over again, as I’m still counting this creation as a room prototype to test the effectiveness of the rooms. They look lovely, however due to the huge bulk of images that Game Maker is now processing, everything is running a little slowly. Creating temporary executables in order to play test and saving the document is taking up a lot more of the development time that I would like. On the plus side, the game seems to run fine once it has loaded. Later I’ll think up something cool to use as a loading screen!
After all that was dealt with, I started to look again at my character movement system, which still never seems to work perfectly no matter what I try! I went to the Yoyo Community forums to get some advice, and the first suggestion was to use the very basic mp_potential_step system. This seemed like a step back from the grid system I tried to implement before, however I’ve noticed that the grid system doesn’t work well with a lot of diagonal movement. This is key for a very rounded game world! I’m beginning to see why retro style games generally use straight lines…
Anyway, the mp_potential_step system is a basic motion planning program, which will make the character walk towards the direction of the mouse in a straight line. It will only stop when it gets to an obstacle, but will then walk around it until it can continue to walk in a straight line to reach its destination. It uses a lot less calculations that using a path or grid, and I’ve been told is very unreliable. I’ve found with a few tweaks it can work very well!
To keep the character from straying away from the tree background, block/wall objects have to be set up. This has taken the extent of the afternoon- I’ve nearly completed the top third of the overall image! I’ve laid out the blocks in accordance to the path I drew up before, making sure that the character can fit into small gaps between blocks and that it never accidentally floats into space!
In this design view screenshot, the path is more or less completed (although I’ve blocked off some parts of the level which I will eventually unblock once I’ve got this bit right! The 8×8 blocks are like barriers which will keep the character inside the enclosed area. I’ve used the pink squares as a height guide for small areas. If the barriers are too close together, the character will be accidentally blocked from getting to certain parts. After the barriers were all drawn in, I deleted the pink squares. The blocks don’t appear in play mode, so all the player has to do is hold down the mouse button in a good general direction and the character will attempt to get to the destination within its boundaries!
The 8x8 grid helped tidy up the blocks a little!
Lastly, I’ve been working on a room transition system. When the player reaches certain edges, the character must move to another room in a very specific location. To do this, I’ve used another invisible object:
In reality, this square only measure 16X16 pixels! I think I used “N” for next room, but it could just be completely random. It is placed into the level design at points along the edge of the room. On contact with the character, it performs this code:
room_goto(rm); //go to another room
obj_dude.x=X;
obj_dude.y=Y;
transition_kind=21; //this is a fade in/fade out transition
which sets up custom variables. These variables are defined individually in each room, otherwise contact with the object would always result in the same transition! For example, moving from the top middle room to the top left room would be:
rm=room_top_left;
X=2088;
Y=368; //This defines the location the character should appear at!
Updated Visuals:
Over the weekend I’ve just been touching up the tree level backgrounds, not altering the level but making it more pretty. The slight glow works well on a dark background, so I’ve placed everything on top of a star-scape which gets lighter the further down the tree it gets. Here is an example of how one of the rooms is constructed with the updates in place:
For now, I’m going to leave the visual style until I can get feedback on how well the game plays based on the visuals as well as other mechanics, such as the movement system which I’m currently working on altering again…
Other than that, I’ve made a couple of rough character animations which I’ll be looking to perfect this week, and created a full game script (for the demo level!) which I can now implement when the time comes!
I’ve been working on 2 main areas today: animation & coding.
Animation
This is going really well! I have some continuity issues when it comes to switching between animation sequences, but other than that I am happy with the two animation sets I’ve created so far:
The two actions are currently walking and climbing- and at some point I will work in an inbetween animation so that the transition isn’t so sudden. I’ll need a couple more specific animations in order for the tree level to be traversed, as you can see in the second half of the video sometimes the animation just don’t fit or look right at all. The photo background was just for fun to try it out!
Coding
This keeps going from bad to worse… I thought I had a good idea of Motion Planning but I’m having difficulty trying to apply to my level without the character getting stuck on the invisible guidelines keeping him on the right path. I’ve been looking more into a system of waypoint finding, where I set checkpoints along the character’s motion path which he must get to before moving on to the next. I have a very clear idea of what I want to achieve with this, but so far haven’t managed to get a perfectly working system. I think I will still have to create a grid system that the character must keep to as well as following waypoints.
My current (very basic) code for character movement is this:
if (instance_exists(obj_waypoint))&&(mouse_check_button(mb_left))
{move_towards_point(instance_nearest(mouse_x,mouse_y,obj_waypoint).x,instance_nearest(mouse_x,mouse_y,obj_waypoint).y,5)
if x=instance_nearest(x,y,obj_waypoint)&&y=instance_nearest(x,y,obj_waypoint)
{speed=0;}
}
if mouse_check_button_release(mb_left)
{speed=0;}
This basically says “move towards the nearest waypoint in the direction of where the mouse is located! When you get there (or the mouse button is lifted),stop!” The character will go off track if it decides it can get to the specified location without following the waypoints (for some reason…) which is why I want to incorporate a grid as well as this system. Getting the character to move has taken A LOT longer than I expected, but I’m also learning a lot more than I expected to aswell…
Graphics Gale incorporates a very simple 2D animation function, you draw your picture then add or duplicate frames to create an image sequence. The moleskin function allows you to view the previous and/or next frames, which is vital for sequence continuity. The preview plays a continuous loop of the frames (at quite a high speed), so you can generally tell if something looks out of place. This helps when creating character sprites as Game Maker automatically loops image sequences, so either you want the last frame to continue to the first, or you need to reverse the direction of frames in the engine.
This shows my walking sequence, with the new ears in place! This sequence will loop as long as the player is walking.
To transfer the sequence to Game Maker, I use a complex process of pasting each image into a separate Photoshop document, doubling the image in size (from 32×32 to 64×64 to compliment the scale of the background) and deleting the white background to save in a PNG format. This can be done in Graphics Gale, but other programs don’t seem to recognise the alpha channel. This method is a little more time consuming, but is safe and guaranteed to produce the best results.
This is a problem I’ve encountered before, and so didn’t come as too much of a shock! As my character walks on two legs, I’ve been looking at the human walk cycle to get a feel of how to animate a walking sequence. I’ve found images like this useful before:
By simply imitating pictures like this, creating a walk cycle should be relatively simple. However, this example involves a profile view of the “person”, and gets complicated when you want a character to continually face forward. If you look at a lot of retro 2D video games, the character often won’t face fully sideways but assume a slightly slanted pose.
I tackled this problem before whilst creating a music video for a Portal 2 competition. The stick-figure style characters from Portal logos never face sideways, so you can always see two legs and two arms in whatever position they assume. It means that the far side of the character is under-exaggerated in comparison to the near side, for example the leg will never go as far back as it would in full profile view. It helped that the character in this case was fairly human in terms of proportions! Still this experience can be taken into account when looking at any character that doesn’t quite face sideways…
I tried mapping this out on paper before putting it straight into Graphics Gale, to avoid another ear animation calamity where the animation just doesn’t flow properly. I avoided working out ear animation until I had redesigned them. This should be a lot simpler to animate now!
With rethinking comes redesigning. This afternoon, my redesign was for the little dude. I wanted to redo my character animation as it looked a little inconsistent with itself at times, and in all honestly I hadn’t paid enough attention to keep the sequence together. I’ve been having a lot of problems with the ears, which I was hoping would ripple and blow about in the wind. Every time I try to put these in, they just don’t look well connected or like they retain their shape when they move. I like the idea of long ears which blow about, but decided as this was such a trivial detail it was probably better to redesign.
Instead of sticking out so much, the new ears fall downwards when the character is not moving. This has proved much easier to animate as their movements are based solely on the own characters movements rather than other forces. The new design (in a kind of happy coincidence way) seems to a resemble plant-like structure better than it did before. Looking at the new pictures I’ve drawn, I would say the little dude is a love child between a rabbit and a radish- which is perfect for the main character of my game. He could be from the rabbish or radit species?
A Radish
I had a feeling this eventuality may become a reality at some point in my design process… The tree image which I made yesterday in Photoshop currently measures about 6000×4000 pixels- about double the largest background size I’ve used in Game Maker before. Despite warnings from forums to avoid massive objects of any kind, my exploration tests all proved successful so I went ahead with the large background. This morning, when I imported all 5 layers into Game Maker, it finally showed that the engine just couldn’t cope with the scale of my images. At first the screen just came up blank, and I read that this could potentially be because of loading problems. A short while later I was bombarded with Game Maker error codes and couldn’t continue with my “Layer Test” document.
There are a couple of solutions. One is to scale everything down ridiculously, probably to the point where the game is unplayable…My second option is to incorporate a room system so that only a small amount of background is loaded at any time. At the moment, my entire background image fills an entire “room”, which is 6000 pixels wide but only a window of 640×480 is ever seen at one time. I’m going to change this so that the image covers 8 smaller rooms, measuring 1980×1325 (about a third of the original image.) Because the image was never meant to be split into rooms, the complications lie with getting the right parts of the image to sit in a good location on the screen. No important parts of the path can be too close to the edge of the screen. I also don’t want the image to look like its been cut off unexpectedly in places. So far, this is my closest solution:
There wasn’t enough content in the bottom right hand corner to justify using an extra room here, and no access to it anyway! You’ll probably notice that the separate images don’t line up AT ALL. This is because each room now has to consider its own playable space and I had to make rearrangements. The transition will fade from one background to the next, so this shouldn’t be too obvious. My main concern that certain repeating elements may confuse the player…But this isn’t prefect yet. To avoid confusing myself, I’m going to carry on working on the image as a whole, and chop it up right at the end. This is hopefully problem solved, or I will have to consider even smaller rooms or using dreaded tilesets…
Getting there!
Placing the low-detail leaf structures in this picture has taken a fraction of the time taken to draw the tree trunk. Where the trunk is very structurally specific, I’ve been a lot more scattered with leaf placement. Part of the reason behind this is because of time restrictions, and partly because it represents a wild tree that hasn’t been pruned. I’ve tried to stick as closely as possible to the scribbles I drew out earlier, but surprisingly this image has taken up 5 layers in Photoshop where I only predicted 3 or 4.
Layer 1 (the lowest layer)
Darker, bigger leaves.
Layer 2
The “important” leaves that play a more active part in the game level. These remain static, so needed a separate layer.
Layer 3
The trunk, another static layer. This is the last layer which will appear behind the playable character.
Layer 4
Light coloured, small opaque leaves which the player will walk behind.
Layer 5 (the top layer)
Light coloured, big leaves with 50% opacity so that the player can see the character!
The black background is simply in place at the moment so that the image stands out a little. This will eventually be replaced with a background image, with the possibility of volumetric lighting to represent a sun/light source (though I haven’t proposed this earlier, so will only add this as an extra if I finish in good time). I’m still considering blurring the bottom layer slightly, but for now I’m happy with the placement and overall image of all the leaves so far.
While I haven’t been drawing leaves today, I’ve been talking to peers and gaining bits of feedback and advice. A couple of things which I have previously overlooked are how this project currently relates to industry practice, and how the finished product will be presented for a final critique of my work. This is something to start thinking about now, as I have been advised to put on a memorable display for those who will receive my work.
The colour choices for my level were mainly due to a happy accident, although I checked the relevance of the colours on colour meaning websites to prove their significance in the design process:
Blue: the colour of the leaves
The coolest colours- the colour of sleep
Ancient Egyptians used blue to represent Heaven (the sky)
Pure blue is the colour of inspiration
Blue is the “throat chakra”, which deals with how we feel and what we think.
Grey: the colour of the trunk
The colour of intellect, knowledge and wisdom.
Grey carries authority.
The “neutral” colour.
Purple: the Little Dude is a very light shade of purple
The stability of blue & the energy of red.
Associated with inspiration, imagination, mystery & magic.
suzidigital.wordpress.com 