Video : First Look

Managed to capture a video using CamStudio. This experiment proves I really need to look at different compression/codecs as it looks more than a little shoddy. Forgive the framerate issues; they are in the video not the game. Honest :)

Rural Scene

Been working mainly on the French countryside. I've created a distant rural landscape background that scrolls and creates a nice sensation of depth.

The other focus was creating telegraph poles and wires to string along the roads. Initially the wires were black, but they created harsh aliasing issues due to the black pixels being so large on screen.

I needed to fade the wires thus giving the impression they are thinner than they actually are, and creating a form of anti-aliasing (as the background can be seen through the wires). I could have created a separate sprite for the wires and rendered those sprites to screen using an alpha value, but I wanted to create the poles and wires together as a single sprite to make placement along the route easier.

I used the function:

sprite_set_alpha_from_sprite(telegraph_spr,telegraph_mask)

Here, telegraph_spr is the main source sprite for the telegraph pole and wires and telegraph_mask is the alpha mask.

telegraph_spr

telegraph_mask

The other trick was to create a single sprite that could be placed along the route, to represent a long sequence of poles and wires. You may notice that in the sprite, the two poles are identical. This is so that when the sprites are placed down, the start and end poles can be overlapped thus creating an unbroken line of poles and wires.

Rainbow Stripes

I've extended the weather system to include a rainbow. This fades in and appears immediately after a downpour for a brief spell. Those odd colour choices represent the rainbow stripes of a World Champion. But I guess you already knew that.

Weather System

As every cyclist knows, not every ride is under beautiful blue skies. I therefore felt it necessary to create a simple weather system.  Whilst it's in the test-bed, the weather system simply cycles between sunny and stormy over a set period. I've written the system so that it can be triggered at any point in time, or at any point on the stage. For instance, you might want the rain to come in after the first mountain climb.

The weather system currently consists of 2 layers of fog (blended in over time) and a particle system for the raindrops.

There is a fog layer between the clouds layer and landscape. This is only used to darken the clouds as the storm rolls in. There is another (more subtle) fog layer over the entire screen. This is used to create a mist layer to 'grey out' the scene.

The raindrops fall and create splash effects upon hitting a surface (eg. rooftops and roads). It's tricky to make out the splash effect from the screenshot, but looks good moving. I have also created a simple lightning effect triggering a full screen 'white-out'.

It is intended that the weather system will affect gameplay; examples could be rider fatigue, puncture frequency, tyre choice etc

Sunny:

Stormy:

Stone Bridge

I've created a little stone bridge from tiles. Again, the bridge is made from two layers of tiles, creating a 'foreground' and 'background' element allowing the cyclist to appear to be riding between those layers. The system that I use to define a path for the cyclists allows me to easily add the hump for the bridge. It looks great when the peloton rides over it.

I might experiment with using rivers or waterfalls as natural breaks in the scenery. This might get around the problem of how to blend urban to rural and make it look convincing.

Tidy Bush

Ok. I now think I'm getting somewhere with the rural countryside. A simple bush sprite has created a nice backdrop and make the terrain tiles appear more 'random'.

I think I now need to start focusing on the more urban areas. I think the biggest issue I can see is how to go about creating the transition tiles between rural areas and urban areas.

The Birds

Small details here, but I've added a new instance for a bird. The instance (initially on the ground) gets triggered after a proximity check with the rider. This allows the birds to take flight once the rider gets near giving a nice bit of interaction with the environment.

Windmill

I had a bit of a late night so I could tinker with the game. I'm still focusing on the environment, and I wanted to create more movement as it feels very dead at the moment. The cliche windmill. Very simple to program. Each instance of the windmill has a random rotation speed for the blades so no two are the same.

Cobbles

I have now got different surface types in the game. This was important so that I can have tarmac sections followed by sections on cobbles. Those into cycling will understand the relevance of this. At the moment there is simply a collision check to see what surface type each rider is on, which then sets a variable. At the moment, this variable is only used to create the particle effects for the dust seen in the screen-shots. However in the future, this variable can also be tied into the game engine affecting stamina, comfort etc for each rider in turn.

Watermark

I have created a simple watermark, which will appear in the bottom right of screen-shots from this point onwards. I think there's nothing more frustrating than discovering a screenshot on the web and not knowing where it came from.

Mountain top Chalet

More work done on the housing last night. This time a mountain top Chalet. "Afro-boy takes to the descent with hair-a-wobbling".

That's just reminded me, all riders will have a flapping/wobbling animation triggered on the descents. I tried it without, and it was clear it just didn't feel thrilling enough.

Mountain Backdrop

Created a snowy mountain backdrop for the mountain stages. Also started on small details such as signposts and armco safety barrier as can be seen here. In this shot we have 3 layers. The clouds in the background, the mountains in the middle-ground and the road in the foreground. All move at different speeds, giving a nice parallax effect.

Finish Kite Animation

Another simple 6-frame animation. I remember seeing the energy sponsor "E.ON" on a kite once at the Tour of Britain. Thought I'd play with that idea and swap for "FIN". Not entirely sure why it's moving in the wind so much, as the rest of the game has no wind effects. Balls. I may have to re-look at it, but again for now it'll do. Actually quite pleased with how it turned out.

Waterfall Animation

I created this simple 8-frame animation in Photoshop. I'm still not happy with it (the top water surface for example has noticeable frame jumping), but it will go in for now, and I may revisit it at some point.

Mountain Pass Screenshot

So after a late night session on the environment tile-set last night, here is a screenshot to show how the visuals are progressing. I never had any clear vision for how this game was going to look. I wanted it to very dynamic in the way it progressed and evolved. It's nice not to be constrained to time scales, briefs and schedules. I am doing this for fun remember.

Characters

I've worked on creating more variety in the characters. I've created each character by rendering a sprite for the bike/torso and a sprite for the head. This way I can randomize the characters creating more combinations than hand drawing each variant.

French Town Buildings

I want the stages in the races to feel like they are travelling through a landscape; through towns and out through rural areas. I've now turned to creating more tile-sets, this time for the town areas. I'll create simple block housing, and look into creating distant housing to give a nice dense feel to the town. Should create a nice parallax effect too.

Currently, the landscape has a French flavour.

Campervan

This sprite was created for parking road-side on the mountain ascents. I could have made my job easier for myself by creating the sprite on the flat and rotating it in code, but the results would not have been the same.

Scenery : Clouds

Worked on a basic sky background tile. Below, you can see simple blocked out areas of blue to create depth on the left. And then the same tile after a level of detail has been added on the right.

Scenery : Waterfall

Spent a few hours animating a waterfall tile. This is a simple 8 frame animation. The effect could have easily been created using a particle effect, but I don't think it would have been in keeping with the art style. I'll always try to create the animation in artwork first.

Character v2

Much happier with the lead character now.  The larger head gives much more room for characterisations. The intention is to have many weird and varied characters in this game.

Scenery : Sunflowers

More work was done today on the tile-set. Every classic rural French scene needs sunflowers. Especially where a Grand Tour is concerned.

Scenery : Bridge

Onto some more scenery tiles. As the game uses tile-sets, it's a very quick, easy and efficient way of creating huge maps with very little effort.

So that the riders will pass over the bridge with the near supports in front of them. careful planning had to go into creating the correct layer orders.

Notice the marker on the bridge going between the front and rear bridge supports.

Radar : Stage Profile

Progressed onto the in-game UI and wanted to solve the problem of showing the profile of the stage. As this game is going to be predominately about strategy, knowing where you are on the stage is very important.

I wanted to have the profile generated automatically from the stage itself, so that I could modify and tweak the stages, and the profile would simply update itself.

The stage artwork uses a tile-set to create the hills and descents. Alongside these tiles are markers (invisible to the player) which mark out the flat areas, the climbs and the descents. The profile is drawn by sampling the stage, looking for markers, and drawing a section of line depending on what the stage is doing. It's a simple solution, but works a treat.

User Interface

For the user interface (UI), I wanted to mimic the styles used by certain TV companies. This will be the 'lozenge' used to display the km remaining.

Character v1

Every game needs a lead character. Here are some ideas I have been playing around with and developing. This strip shows the evolution, from place-holder to something I'm happy with. ish.

Items : more scribbles

Scribbles of random ideas and stuff. Browsing my cycling mags, making notes of what's required for sprites and tiles. Ideally, I want the individual stages to feel very different. Some in rural areas. Some in towns. Some up in the mountains.

Terrain System

Some scribbles relating to the terrain system. The terrain is going to be key to the design. Road races take part over long distances, over undulating and varying terrain. I will need a solution to come up a way of easily creating multiple stages with varying profiles.

First Concept Scribble

Every game needs a concept scribble. Here it is. Wonder at the artwork. Feel the speed.

8bit Biker : The concept

As it's nearing the end of the current Pro-Tour Cycling season, I'm starting a new little indie game loosely based around road cycling. This will be developed with no clear plan or timescale. The game will evolve over time. It will be very much 'suck-it-and-see' game design. What could go wrong?

This will be a pixel-art based 2D game. Yes it's supposed to look that shoddy and low-res.

2D is where it's at.