Chris Kempt shows you how to use Adobe Flash to create a simple art-based platform game, based on Kempt’s classic viral The Kung-Fu Statesmen.


Building a platform game

This tutorial is based on a simple engine that we used for a satirical game produced for the last general election. It was called The Kung-Fu Statesmen and we’ve kept the Tony Blair and Gordon Brown sprites in this example for you to have fun with.

The Kung-Fu Statesmen is a simple art-based platform game – the game is coded so that the player character’s position and movement within the world is governed and augmented by the artwork of the levels themselves.

The game continually checks the character’s position in relation to the walls and floors of the game world in order to establish whether the player can or should move in a given direction.

Meanwhile, the player is in a constant state of freefall under the influence of gravity and it’s only a collision with the floor objects that will stop him from falling off screen completely.

This tutorial is not intended to tell you how to build your own Flash games from scratch. Instead it aims to take you through level design for a simple game engine in the hope that, with a little extra research, you might be able to take this engine and produce your own custom Flash game.

This tutorial assumes a basic familiarity with the use of Flash.


01. Open the Flash Project file (.FLA) and you’ll see the main timeline with two frames labelled ‘preloader’ and ‘game’. Locate the keyframe under the ‘game’ label and double click anywhere on the ‘world’ MovieClip in order to get started.


02. The game world is made up of six key MovieClips: the walls, floors, enemies, pick-ups, backgrounds, and starting points. Each of these have a series of frames corresponding to the levels of the game.

Adding and editing levels in the game is therefore as simple as adding new frames to these and adding new scenery/elements to those frames.

In order to make editing easier, and to reduce the chance of inadvertently breaking game code, all of these elements are contained in a graphic symbol called ‘World Editor’. It is in this movie that we will do all our editing.


03. Begin by double-clicking on the World Editor – the big box in the middle of the screen! In here we see all the level elements in one place. Once inside the World Editor, move the play-head to frame 3 and double-click on the ‘floor’ MovieClip.

On the timeline of the ‘floor’ MovieClip click on frame 3 and add a keyframe (F6) that will duplicate the level in frame 2 in a new keyframe, ready for editing.


04. Once inside this clip you’ll see how the tiles are arranged on each frame. Within this frame you can add new tiles from the library, move around any existing tiles, edit tiles or potentially create entirely new tiles as you desire.

However it’s a good idea to observe the following rules:

  • Always pixel-place your tiles (make sure their X and Y positions are integers – 5.0, rather than 4.9 or 5.1).
  • Make use of the snapping facilities provided by Flash.
Floor tiles that are intended to be continuous stretches must not have a gap between them, and wall tiles must be perfectly placed to meet the floor properly.


05. Setting up walls for your new level follows much the same procedure as with the ‘floors’ MovieClip. Symbols can be added or edited in any way you like following the tips set out above for floors.

The background exists to make your game pretty. In here you can put any artwork that you don’t want the player character to collide with during gameplay – in our example the backgrounds contain not only an illustrated backdrop but also foreground elements such as lamps and sections of floor we want the player to be able to pass through.


06. Enemies are extremely simple in this game and the process of adding them is again similar to the last couple of examples with one key difference – each enemy needs a small section of code attached to it.

Click once on an enemy and bring up your Actions panel – then add the following code in this panel (alternatively this code can be copied-&-pasted from one of the existing enemies in the engine).

With this kind of game, it’s crucial to remember where the character emerged on the last level. To do this, take a copy of the tile(s) from the exit point(s) on the previous frame and move them to the left-hand side ensuring that their Y position remains the same.


onClipEvent (load) {
// Set the NPC’s initial direction of travel,
movedir = “l”; // Available options are “l”(left),”r”(right), “u” and “d” (up and down).
// Set the NPC’s speed
speed = 6; // Move this number of pixels each frame.
}
onClipEvent (enterFrame) {
// Run the NPC code every frame whilst on screen
_parent.moveme(this);
}


07. Once again, items (or ‘pick-ups’) are placed in a similar way and in common with enemies require a small section of code in order to function.

The easiest way to create a new item to pick up is to duplicate an existing item. However, be sure to add a unique ‘id’ in the onload() code for each item that you add.


08 When a Player Character dies they are returned to the previous screen in a predetermined place. This restart position is dictated by the markers in this MovieClip.

Each level must therefore have a start point. To create a start point for your new level simply add another frame as before to the ‘startpoints’ clip and position your marker accordingly, ensuring that the instance name is 'start'.


09 For a bit of variety we’ve also provided the ‘Gordon’ character to use. To swap Blair for Gordon, simply select Blair on the stage and on the properties tab click “swap”, locate hero.gordon in the library, click OK, and you’re done.


10 There is no practical limit to what tiles can look like. You could consider mimicking the style of an original 8-bit game, using simple illustration as in our example, or even using textures from bitmap images.

As ever, the Internet is a rich source of inspiration so some simple Google searching is bound to turn up some ideas, such as the Get Set Boogie game (above). When designing new tiles bear in mind the following:

  • All floor tiles must be at least 11 pixels high and Walls must be over 11 wide. You can use shadows or transparent fills to widen artwork that needs to look narrowerAlways design your tiles to a round number of pixels in size (65 pixels rather than 65.43)
  • Ensure that the registration of the symbol is top left with the artwork starting at 0,0. This makes it easier to place your tiles accurately
Once you have designed your tile, place it in your level following the procedures set out above.


11 Once you’ve mastered the production of simple tiles you can take them a step further. With a little bit of animation (or, if you know how, code) tiles can be made to move, disintegrate and generally add variation to the game.

You might try to create a tile that falls away after a certain period of time. To do this you need a tile that is made up of a Graphic Symbol for the tile artwork which is contained within a MovieClip so that it will play of its own accord.

Inside this MovieClip, simply add the number of frames you want the tile to exist for and, at the end of this time, add a short motion tween that drops the tile down and makes it disappear adding a ‘stop();’ action at the end to stop it looping. An example of this is provided in the ‘ExampleDrop’ tile in the game library.


Cool Customizer

All of the elements of this game are fully customizable and, depending on your level of expertise, some remarkable results can be achieved.

For example, the engine that runs our more recent platform game SuperWalkLand.com is based on a heavily customized version of this engine.

You could start with the Player Character, which can be customized with relative ease using your own animations. Look online – you’ll find screen grabs from classics such as Super Mario or Jet Set Willy, which may help you to work out your own characters.

Or you could put together an opening screen that lets the player choose whether to play as Tony or Gordon.

Tip

Vector or bitmap? When designing a Flash game, people tend to use vector art as it generates smaller file sizes.

But, there are some loose rules that mean bitmap has its place. For animated or big images, it's best to opt for vector art. For complex images or icons, however, bitmap is a great option. Best to try it and see what works.


Who: Chris Kemp-Salt is the MD and founder of Kempt, a digital marketing and production company that builds and promotes flash games for a range of clients including Sony, King of Shaves and the United Nations. In addition to this, Kempt run a casual online game portal, Killerviral.com. Their games receive many millions of visits every month.
Contact: www.kempt.co.uk
Software: Adobe Flash Professional 8
Time to complete: One hour
On the CD: The game engine for use in Flash is included on this issue’s CD.