Constructing an autorunner for Bacon Game Jam 06: Day 1

25 October 2013

10:01 PM (EST): As I write this, the Bacon Game Jam 06 has officially started. However, with 1 day and 20 hours left to start and finish my game using the theme of “Rainbows,” I thought I would do something a little different. Instead of just posting the finished product, I’m going to walk through my design and coding process.

First, I picked the autorunner genre ahead of time. After carefully reading the Rules yesterday, I noticed I wasn’t prevented from thinking about the genre and generally planning things about the project. As long I didn’t — my own self-imposed rule — write anything down ahead of time or draw any maps. Basically, I couldn’t commit anything in either typing or writing form. It had to all be in my head when I sat down to design.

Second, I also knew I was going to use ActionScript 3. While normally I might go with HTML 5, I’ve been trying to get back into writing ActionScript 3 before I make the move to Haxe early next month to finish a long-standing project I have been neglecting. Since Haxe (OpenFL) is pretty similar to ActionScript (more so that JavaScript anyway), I wanted the practice.

Third, I want to experiment with black and white. Color will be used very sparingly, if not at all. How that will work with the theme of “Rainbows,” I’m not sure.

10:15 PM: I hate naming things. I really do. Sometimes, sure, I can come up with something good. Now… ugh. Not so much.

Okay. I’ve decided to called it Pale.

And its dimensions will be 450×300 (actual) with 225×150 and 2x zoom.

10:39 PM:


After making the character, I generated some quick animation frames and spent some time loading up Flash Develop and adding Flixel. Then, making my Preloader, FlxGame and FlxState classes. Finally, I imported the resource to the project, created a Player class, and embedded it.

Now, I’m working on what I want the first version of the floor to look like.

I think something with stripes to start.


Then, I created a Level class (extending FlxGroup), embedded the floor image, and created a loop that would create 100 FlxTileblocks each 16 pixels right of the previous one starting from 0.

11:42 PM:

And thus, about an hour into the project, I have my first working screen.


11:48 PM:

Then, needing an obstacle, I draw a spike tile.


That too got its own object as Spikes (extending FlxSprite).

Now, within the Level object, I setup a FlxTimer and some looping to add blocks or spikes.

* ...
* @author Dan Cox
import org.flixel.*;
public class Level extends FlxGroup
private var floorPng:Class;
private var index:Number;
private var timer:FlxTimer;
public function Level()
index = 0;
timer = new FlxTimer();
timer.start(2, 1, addMoreBlocks);
for (var i:uint = 0; i < 20; i++)
var floor:FlxTileblock = new FlxTileblock(index, FlxG.height - 16, 16, 16);
index += 16;
public function addMoreBlocks(Timer:FlxTimer = null):void
for (var i:uint = 0; i < 18; i++)
if (Math.random() * 100 <= 23)
for (var j:uint = 0; j < 2; j++)
var a:Spikes = new Spikes(index, FlxG.height - 12);
index += 16;
for (var k:uint = 0; k < 2; k++)
var b:FlxTileblock = new FlxTileblock(index, FlxG.height - 16, 16, 16);
index += 16;
timer.start(2, 1, addMoreBlocks);
view raw hosted with ❤ by GitHub


3 AM:

I just realized I haven’t written anything in awhile.

Okay. I decided to try something different. Being a fan of VVVVVV, I thought it might be neat to introduce the mechanic of jumping from floor to ceiling.


26 October 2013

11 PM:

Picking up the next day, I decided to invert the colors. Instead of a white background, a black one.

Then, I decided to play around with an idea I’ve been wanting to go back to for awhile: dead bodies.

Every time the player sprite hits the spikes, it creates a new body. These are the “stepping stones” used to traverse the level now.


The problem now though is that the game is too easy.

Without any input, the player sprite will collide with the spikes and create a path.

Time, I think, to change something else.