Back To Visuals

I’m happy with what I’ve got to code, but as I’m bored at looking at a bare tree felt it was time to decorate it a little. I actually spent a little time yesterday attempting to place background leaves without much thought or planning, and struggled to get nice shapes that were a good size and colour. This morning I decided to step back and look at the tree as a whole on a printed piece of paper-this worked really well when it came to mapping out the route before.

The dark blue circles represent the more important leaves, they will be in a layer behind the playable character but won’t be as far back as the parallax background, represented by the scribbly crayon shapes. This layer will appear to move very slightly, so the important leaves must be on a layer which stays still! Once these layers are in place I will also add a foreground layer, however this was more difficult to do on paper.
From now on, I will probably continue my image generation in Photoshop. One of the limitations of Graphics Gale is its colour palette, which can be customized but not in a way I’ve found very useful so far. Using the pencil tool in Photoshop will be a useful method for painting in circular shapes.

This was an interesting book to find whilst having coffee at The Loft in Bournemouth University. I hadn’t really thought to look at flower components or leaf styles before, but I found this really interesting. I guess my leaves are somewhere between Orbicular and Reniform. So circular leaves actually exist!

Pixel “Art”

The forming of pixelated images has evolved into a style or an art-form rather than a necessity because of the restrictions of older processing capabilities. This art form not only exists in gaming, but in other areas such as illustration and animation. I want to incorporate a pixel art style to my game because people now see it as a “style”, something closer to art than using 3D polygons or high resolution images because it can be so abstract.
My inspiration comes from modern games developers and general image generators who use a pixel style in their work:

1. Superbrothers

Superbrothers Illustration

An obvious choice to start with. Superbrothers are my main inspiration because they have completely changed the way pixel-art looks and feels, and made it feel completely at ease in the 21st century. The use of large pixels and a lot of straight lines make the imagery very abstract, however the representation is always clear because small details are avoided.

2. Polytron’s Fez

Fez- Coming soon to XBLA

Fez is a game currently in production for Xbox Live Arcade. In a similar way to Superbrother’s style, a lot of block colours and straight lines are used to avoid cluttered areas of small, messy details. On top of the main pixel imagery, light sources are added and clean vector shapes makes the image as a whole seem very bright and lively.

3. Pixel’s Doukutsu Monogatari (Cave Story)

King from Cave Story

There is a huge success story behind this humble Indie game from Japan. It took years for the artist to create, quickly gaining recognition world-wide. The pixel-style imagery matched the side-scrolling shooter genre it was proposed as, and was just particularly well executed. The game is now being developed in 3D for the Nintendo 3DS.

4. Askiisoft’s Tower of Heaven

The art style behind Tower of Heaven

Another game with a humble beginning, distributed on the Game Maker sandbox website and New Grounds. The art style and colours choices represent games played on Nintendo’s Game Boy, however I like this style in comparison to some of my other examples because it (in its simplicity) is more complex. The imagery uses a lot of curves and small details, but still looks visually appealing. This will be very influential when it comes to adding detail to my imagery.

Caleb Hystad

Caleb Hystad represents Mega Man

From what I can tell, Hystad is a sort of bedroom Pixel Artist, who creates de-made pixel imagery from existing sources. His style often uses ambient lighting and textures to create still images, and again goes for the large abstract pixel approach. As well as created still imagery, Hystad is working on Spidersly, his third game for iOS. The development log he is keeping is proving very useful to me, as I can see what an experienced developer goes through in time with what I’m doing!

It’s getting to a point where I’m happy with what I’m going to code, but still need to add a lot of detail to the imagery. I want to colour choices to be simple-possibly just one colour for shading and one colour for highlights. With all the curving lines in my tree design, it’s too late for the simple straight-line style, but I can still learn from the modern techniques used by all these artists.

Coding for Motion Planning

Firstly, a blank path is set in the object’s creation code:
mypath=path_add();
path_set_kind(mypath,1);
path_set_precision(mypath,8);
This won’t make a set path, but lets the engine know that I want the character to follow a set of rules. “Kind 1” allows the object to move diagonally, and “precision 8” allows the path to curve (a precision of 1 would be least curvy!)

In the object’s Step code:

I’ve tried to annotate this (in green!) so you can kind of see what’s going on, although I’d like to point out that I had a huge amount of help from Game Maker forums particularly here, which I’ve learnt from and adapted. At this stage, I would never have thought of this myself!

All that’s left is to make sure there is a collision with the wall object, so that when the character meets the wall, it stops! There are limited options when it comes to collisions with solid objects in Game Maker, in this case I’ve chosen:
move_contact_solid(direction,12);
Which is a simple way of saying “stop when you hit a wall.”

Motion Planning Test

Today I’ve been testing motion planning using a grid system, which has taken a while but gone pretty well.
The first example in this video shows the simple test I made in Game Maker to check the mp_ code. The position of the small black dot is determined by holding the left mouse button. As long as the button is held, the black dot will follow, whether this means dragging the mouse close to the dot or holding down on a far away location. If the dot encounters a solid block, it calculates the quickest way around it to get to its location.
The advantage to using a held mouse button to determine the object’s destination is that if ported to iOS, the held pointer represents the player’s finger as it moves around the screen.
The grid used for this example was 16×16 pixels, which matches the size of the blocks I used. I tried importing this system straight into my current level design, but met several complications. The size and scale of the objects involved are hugely different, so some little tweaks to the code are in order to accommodative for large sprites with intricate movements. Diagonal movement is still proving difficult, but I think this is down to objects not matching the grid they are following. For the video, I destroyed all obstacles and simply let the mouse lead the character around the screen freely. At a few points the camera views threw me off a little and I realised that the mouse was actually completely off the game window! This still seemed to work, just a little wobbly at times.

GDL – 05/11/11

I think this notebook scan pretty much sums up today’s GDL.
Problem: Path creation
Solution: Motion planning
Next Steps: Work out how to do motion planning…

Motion Planning

The tree design has gone from looking very organic and uneven, to being very smooth and circular. Overall, I think this looks a lot nicer than my previous design, as well as serving the purpose of being a better level layout. The grey circles in the picture show where I placed circle shapes to use as a drawing guideline! To re-draw the level path onto this slightly altered layout, I printed the image and drew an exact path over the top.

This base image will be the second-lowest layer of the tree- nothing from this layer (should!) need raising or lowering, all that needs to be done is for some detail to be added. Until then, this image can be imported into Game Maker so I can work out how to turn this flat image into a fully scalable game level. Background images in Game Maker cannot be solid objects, so the actual level will actually be made from solid blocks which will eventually be invisible to the player.

In Game Maker, I created a black square block object which is solid and won’t allow the playable character to pass through. In this image, I started to map out the path I defined in the print using these blocks. The vertical blocks stop the character from walking off the edge of the tree accidentally!

With gravity set to pull the character towards the blocks, the character will walk happily down the path. I encountered problems however when trying to get the character to walk back up the path. So with the gravity set, the character will be stopped by an obstacle that is even 1 pixel in size. After attempting several ways to get around this without having to create a jump command to get to a position 1 pixel higher, I decided that it just wasn’t going to work and I would have to resort to something a little more complicated. That complicated thing I had to get my head around was motion planning.

Types of Motion Planning
1. Linear mp_linear_step
Using linear motion planning will pull the character towards a point in a straight line. Nothing will affect the line created, and if an obstacle is reached, the character will simply stop. This is the most basic type of motion planning, but isn’t really a step up from where I was with the old gravity system.
2. Potential Step mp_potential_step
This type of motion planning in reality should work well when it comes to avoiding obstacles. Like linear motion planning, the character is drawn towards a point, but this time the character will try to avoid obstacles by looking ahead of itself and rearranging its path if there is anything there. Sounds promising, but this technique is extremely glitchy and no luck for me unfortunately. It doesn’t help that I tested quite large obstacles, which appeared to scare the instance I was trying to move…
3. Potential Path mp_potential_path
In terms of reliability, this technique lies somewhere between potential step and the best (but most complicated) method. It uses a lot more calculations and setting so avoiding solid objects should be made easier, but it still seems that with large obstacles the character simply moves to evade earlier but doesn’t quite make it…
4. Grid/Grid Path mp_grid_path
The most complex method of motion planning, by far the best. This method involves setting up an invisible grid on the level background. The character follows the grid to the chosen location, and if an obstacle occupies a grid-space the character simply moves into the free grid-space next to it and continues its path from there. This is the only method I have managed to apply successfully, due to the small amount of factors that can really go wrong!

GDL – 2&3/11/11

This week so far has been a slow one, I’ve spent a lot of time drawing and it feels like I haven’t made much progress in terms of creating an actual playable experience. The reason this GDL entry spans two days is because despite the lack of anything really to show, I’ve done a lot more than I realise. I’ve finally finished placing pixels in Graphics Gale to create a very swirly tree trunk, complete with branches (though currently a little naked…) I’ve changed my design process for this third tree drawing attempt, so that I started my design with a rough, and used the outline to create a grid of circles which I then traced to create the finished result. Looking at the image as a whole, the negative and positive circle shapes are really apparent. Hopefully the roundedness will be obvious to the player on a very zoomed in level, whilst resembling a tree rather than an assortment of shapes. The great thing about having a completed (however little decorated) tree structure is that this can be taken to Game Maker NOW and added to later, so progress will begin again very soon!!

As I think I mentioned in my last post, the character creation is well under way. I’ve shuffled and reshuffled pixels to fit perfectly onto the 32×32 grid for a still image, though I’m still a little unsure on the animation. When played it looks a little jittery, and I feel like I could make it a lot smoother. SO.. two next steps before Monday’s Interim Critique:
1. Get the tree into Game Maker
I want to show something interactive! This may well be another video of a character walking around an image, but it would be nice if that image was the final tree background, and the character was my own, even if un/half animated.
2. Animate!
So just because the character doesn’t need to be animated yet, doesn’t mean I shouldn’t be working on it. It would be really great if the little dude could do some tricks that I could impress everyone with.

As well as these two I’ve STILL got things to work on regarding the GDD, game script and audio. I’m sure it’s in my best interests to get these done too.

Little Dude in a tree made from circles.

Little Dude

Unfortunately, drawing the tree is taking a little longer than I had anticipated. Not only does it take a long time to draw once, I’m now onto my third version of the tree, trying to get it just right. I’m avoiding using the traditional method of tiling, which repeats blocks of the image such as straight lines and edges in order to quickly create a large background. I want every part of the tree to be completely unique, so I’ve placed almost every pixel manually.
During my breaks from tree drawing, I’m pressing on with the little dude who will be climbing the tree.

I haven’t changed the original design much, but I have simplified it for the pixel conversion and the changed the colours a little (although I’m still not sure about the colours, time for some outside feedback…) So far the image sequence for the stationary dude looks like this, ears blowing in the wind:

Flowers

Admittedly, I don’t know what these flowers are! But I found them in our garden about a month ago. I was intrigued by the shape and the the way they dangle down rather than facing upwards. I took down a few sketches of the life-cycle of these flowers; from a closed green bud on the end of an arcing stalk to a fully fledged pink flower.

The way the flower opens up could easily be a cushiony little home for a tree spirit-like creature. For project, I’ve changed the flower colour and simplified it slightly to suite the rest of the imagery. The little dude is initially connected to the main flower by its ears, and eventually goes through a sort of waking process and falls down to a conveniently placed leaf below. Hopefully I can animated this to play at the beginning of my demo. I’ve started by illustrating the process using silhouettes, which I quite like, so this might stick in the end.

Design Exercise: Character Development

This exercise is based on the character development guidelines from the Computer Game Design Course book, which is still proving to be one of the most useful resources I’ve used so far! It suggests that to create a character which the player can relate to and empathise with, you have to know your character, even if some details about the character are irrelevant to the game. In my case, the character is born at the beginning of the game, so there is no backstory! This immediately rules out a lot that I could potentially say about the character, but I’ve worked out these characteristics from the immediately obvious personality of the little dude…
Positive Traits

He is born as the game begins, and therefore feels a great excitement about exploring the world around him and discovering what life if is about!

He always listens to the good advice of his creator and is generally very submissive.

He is willing to live a life of perseverance for the sake of human beings he has never even seen before, always believing in the good he is doing.
Negative Traits

He gets easily confused by things he encounters, due to lack of life experience.

He does not feel intimidated by the larger objects around him, but does feel a slight fear for falling.

He feels uneasy when he encounters proof of those gone before him, or those still in cocoon form. There is a ghostly eeriness and loneliness about him at all times.
Physical Characteristics

A small, round little being with not much more than four limbs, two long ears which originally connected him to the tree, and and long tail.

He is part animal, part plants, giving him traits similar to a rabbit and a radish!

His squirrel-like claws and flexible, squashy build makes him a very good climber, able to reach high places yet squeeze through small spaces.