Week 9 - Extraction

Extraction is a top-down space shooter where you fight your way to each planet and extract all the survivors to win. You can play it here


why a top-down shooter...

I wanted to combine the frantic pace of constantly having to move to avoid being hit, with the need to stop moving to pickup passengers.

what i learned

I learned a couple things, one was using bitmapData box sprites to create a "Fog Of War" like effect, but I ended up cutting that since it made the game considerably harder. The pace of having to move as quickly as possible from planet to planet didn't really work with the slower pace of discovering a level and felt more appropriate in an exploration game.

The main thing I learned making this game, and what made it into the final version was how to make a minimap. In earlier versions I had the minimap generated from a tilemap rather than a blank star background. I had originally considered a ship flying over a procedurally generated world picking passengers up on the surface.

This made for a more interesting minimap but was pretty challenging to implement in the week timeframe.

The basic process was to draw the static objects with rect object in bitmapData. Dynamic elements are added to a dynamic bitmapData overlay. For example the tilemap is drawn as follows:

    this.miniPixel = 8;
    var miniMapBmd = this.game.add.bitmapData(COLS*2*this.miniPixel, ROWS*2*this.miniPixel);
    miniMapBmd.ctx.fillStyle = '#bc8d6b'

    for(var y = 0; y < ROWS*2;y++) {
      for(var x = 0; x < COLS*2;x++) {
        if (this.auto.map[y][x] === FLOOR) {
          miniMapBmd.ctx.fillStyle = '#000';
        }else {
          miniMapBmd.ctx.fillStyle = '#FFF';

        miniMapBmd.ctx.fillRect(x*this.miniPixel, y*this.miniPixel, this.miniPixel, this.miniPixel);

    this.map = this.game.add.sprite(0, 0, miniMapBmd);
    this.map.fixedToCamera = true;

    this.miniMapOverlay = this.game.add.bitmapData(COLS*2*this.miniPixel, ROWS*2*this.miniPixel);
    this.mapOverlay = this.game.add.sprite(0, 0, this.miniMapOverlay);
    this.mapOverlay.fixedToCamera = true;

Basically itterating through the x, y values of the tilemap drawing a black or white rectangle in place of the tile where this.miniPixel is the size of the pixel squares representing the tiles. The map overlay was drawn as a clear rectangle. The bitmapData for the overlay is updated in the main update function to show the player, and their movements, as a red square.

  update: function() {

    //update map markers
    this.miniMapOverlay.context.clearRect(0, 0, this.miniMapOverlay.width, this.miniMapOverlay.height)
    this.miniMapOverlay.rect(Math.floor(this.player.x*this.miniPixel/64), Math.floor(this.player.y*this.miniPixel/64), this.miniPixel, this.miniPixel, '#ff0000');
    this.miniMapOverlay.dirty = true;

In the final version I also added planets to the minimap, which changed from their set color to a light grey to denote that all the passengers had been extracted off the planet.

other stuff

The source code is available on github here

Anyway, that's all for now. See ya in the next one :)