Vertical shoot ’em up – some design theory

Well I’ve been assembling the core components of a vertical scrolling shooter using various parts of the Hoth Strike game as a starting point. For the most part Hoth Strike came out pretty much as I’d planned it so it seemed like a logical starting point.
I’m keen to explore ways of scrolling rich content through the game window so as I’ve alluded to in earlier posts a 1942 style shooter seems like a good way to go.

Just now I have the bits you’d expect from any arcade game – title screen, ready state, score / status bar, keyboard controlled player ship, multiple rapid fire lasers, explosions, game over etc. In itself that’s the seeds of a game but I wanted to explore a new area in game design; staged content. So I also wrote a simple tile-based background scroller that repeats Scooby Doo style.
Currently I have created enough tiles to fill the game window with a static water texture.
The way I want the scrolling to work is fairly simple theory.

Each tile is 64 x 64. The game window is 384 x 512. I can therefore fit 6 x 8 tiles comfortably within the tile area.
But 8 rows of 6 tiles (48) isn’t enough since the tiles that fall off the bottom of the play area don’t reappear until they’ve fallen to their height beneath the play area. e.g. the canvas is 512px high. When the x,y of a tile is 0,513 I reposition it at 0 – tile height (i.e.  -64px). Using this approach I theoretically leave a glaring gap in the tiles.
So I need more tiles to fill the gaps to make the whole process seamless.

By effectively reusing these tiles I can create the illusion of a complex background scrolling through the game window.

Tile illustration

Illustration to show the movement and re-use of background tiles within the game window. Click to enlarge.

So, stepping back to the tile dropping beneath the canvas height, I increment a tile marker each time this happens.
In a separate array I store which images are stored in each of the 6 tiles for the current tile marker.
Currently the only images are water tiles but I intend to create a wealth of different tiles.

In short then, when a row of tiles drops out of view I “re paint” them based on my level design and re-position them above the playing area such that they are about to reappear. All the time I am re-using the same 60 tile objects.

What falls out of the bottom of this approach is the need for a simple level editor.
An editor that allows me to create dozens (maybe more) of tile graphics and simply construct a level.
Currently each level is a collection of tiles with no other purpose than to look pretty. What I may implement is the ability to animate or alter certain tiles if the player moves over them. Not sure yet where the design is going to take me.

Finally a word on staging the action. Shooters like 1942 and Don Pachi use a staged approach that allows enemies to fly in at set intervals. This interval is not always based on the position that the game is in in relation to the background (some is since tanks moving along roads wouldn’t work otherwise), more it is in relation to the structured order of events. If a squadron of planes flies in formation and loops around inviting the player to attack it it may take the player 1 minute or 5 seconds to despatch them. If the staging was tied to the scrolling scenery then we’d soon see enemies bunching up on screen.

What I intend to create is a triggering of action based upon an “ideal” time (probably based on the incrementing tile marker) but more strongly dictated by whether or not the stage is clear for the action to take place.

More on that later.

Post a comment or leave a trackback: Trackback URL.


  • Arwan Smith  On April 13, 2011 at 3:13 pm

    Every time i visit here, the’re always a good topic, thanks making excellent post.

    thanks from Nickelodeon Games

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: