Home Sweet Home – Creating Game Environments – Part 1

There are many ways to go about creating the environment for a game.  To begin with, answering some core questions can help dictate which techniques should be used.  Will the game entities be interacting with the surrounding environs?  How is the game played – does the player move through the gamescape, or is it going to be static?  Is the gamescape going to be drawn in big chunks, or small tiles of graphics?  If it’s a 2D game, you have to keep in mind draw order so that pieces of the environment and the game entities don’t cover each other incorrectly.  I’m going to zip through a few of my games and demonstrate how certain ideas were implemented in creating their environments.

Perhaps the simplest were the environs for Barnyard Adventure and Rocket Adventure.  In these children’s games, the landscape scrolls by with each new puzzle.

In the case of Barnyard Adventure, the gamescape is a very wide panoramic painting of the farmlands, broken down into five 800×480 (the dimensions of the phone’s screen) tileable images stacked side by side.  As the child completes a puzzle, the whole stack slides over to reveal the next full screen tile.  As the stack slides right to left, “finished” off-screen tiles are recycled and stacked back on the right, as needed, for each new set of puzzles.  Since the tiles are seamless, for each new game I randomize the images on the tiles to add variety.

Rocket Adventure works in a similar manner.  In Rocket Adventure, the player is up on the moon, and I wanted to preserve that feeling of a round planet as the landscape slides by.

This meant I couldn’t simply slide the land in a straight line across the screen.  To meet this design requirement, the tiles were designed to be placed seamlessly around a big virtual circle – the “planet” – in the game world.  It was tricky getting them to tile seamlessly while being randomly placed around the virtual circle.  Taking the dimensions of the virtual circle, it was just some simple math to calculate how big the screens needed to be, where the seams would line up, and how much they needed to curve to preserve the feeling of being on a round planet.

In the game code, the tiles were coded to rotate around a center point all at once.  From the player’s perspective, the randomized planet segments rotate into view with each new puzzle as if it was actually one big circular planet.


Gridrunner Girl’s gamescape is interesting because it’s all 3-D.  There is no background image slapped into the game, serving as the sky.  There is no 2-D painting serving as the foreground that I can move around to simulate movement.  In this game, the player flies into the screen, through the world, in 3-D.  To create this battleground, the whole world had to be procedurally created in the game’s code.

When I say procedural, it just means there was no art created for, and imported into, the game.  The game’s world was programmed in code, typed line by line, to create visual elements on the screen.   It’s easy to procedurally draw a four-point “square” polygon and project an image onto it’s face, and that’s exactly where I started with Gridrunner Girl.

In a nutshell, all it takes is a set of four coordinates in 3-D space – one for each corner of the “square”, a surface normal direction, an image to draw on the polygon, and another set of special coordinates – UV coordinates – that tell the texture where to draw itself on the polygon.  The surface normal just tells the polygon which of its two sides is visible to the camera and shaded by any lights in the scene.

With that primer under our belt, let’s start with the ground.  The ground is one huge polygon with a seamlessly repeating texture on its face.  It’s wider than the camera’s field of view so it seems to go on forever on either side of the screen.  It also extends away from the camera, into the distance, to a certain point.  As the player moves forward – and she’s always moving forward – the texture’s UV coordinates are moved along the polygon’s face.  This is the trick to simulating movement in this game – the TEXTURE is moved, NOT the polygon itself.  Visually, it’s as if the whole ground is speeding past Gridrunner Girl.

As Gridrunner Girl moves left and right, the ground texture is moved, again by changing the UV coordinates.  On screen, it looks like she’s moving ACROSS the land from side to side.  It’s a simple trick, and makes it easy to program artificial movement and not have to worry about moving a big land asset around the screen and making it tile with other land geometry.  By simply changing some texture coordinates, the whole world moves according to Gridrunner Girl’s movements, selling the illusion of an infinite battleground that extends in all directions.

A couple more small details remain – the small strip of land serving as the horizon, and the sky above.  When the character moves left and right, the horizon has to move accordingly.  Since none of the world is physically moving, I turned to UV texture coordinate manipulation again.  The sky doesn’t have to move at all, so it’s literally a square polygon with an image projected onto its face.  No further manipulation was required.

There is one more small trick I implemented in order to keep the original Space Harrier feel of the game.  In the original game, when you progress to a new level, the horizon graphic would dip down and up again, sometimes with a new horizon image.  At the same time, the whole land grid would color cycle to a new color.

The horizon dipping in my game was done by physically animating the horizon polygon strip down and up again over a second of time, and swapping in a new texture when it’s out of sight, if needed.

The color cycling across the land is very easy to do in my game engine by taking a color of my choosing and mixing it with the texture’s color.  To change a color over time, I can linearly interpolate the starting color to blend into the end color that is desired.

The actual color tinting of the polygons is achieved by starting with black and white textures and mixing in the color I want to tint it with.  When you mix a color with a black and white texture, the image is literally colored in shades of the color you’re mixing it with.  This is how I blended the sky into any shade of color I wanted between each level.  For the bonus rounds, the sky color cycles quickly between randomly picked colors for a cool psychedelic effect.  Again, the sky color is just a black and white image being mixed with a color to tint it.

Smoke and mirrors.  In the end, that’s all Gridrunner Girl is, as far as the game world goes.  It’s literally 2 sides of a box that never moves.  Simple tricks can go a long way to creating an immersive illusion – even inside a box.

About GlowPuff

GlowPuff is a Windows Phone 7 developer focusing on XNA game development.