Launch!

To learn PixiJS and Typescript, I decided to create a scrolling tank shooter.

The first version is released.

Overview

So far the game is very simple. There is a tank, rocks, and towers. I’m going to add enemy tanks, enemy airplanes, and enemy soldiers. But before I expand the game, I need to do some cleanup on the existing one. Since eye keys (4 directional, 4 shooting) are required to play, there is no mobile support yet. That’s the first thing I’ll add. You’ll need two thumbs!

Overall I’ll try to polish the game play a little before adding more features. The hit detection is a little rough around the tank currently. There is a personal high score, but you cannot restart the game without refreshing the page. So, there’s quite a few things to cleanup before adding enemy tanks and airplanes.

The roadmap is on the game page

Technical Stuff

I found Typescript helpful for keeping code organized and refactors easy. I think games lend themselves easily to OOP. Typescript helped out with that too. Most entities are classes, and I have a library of utilities that I can use to help compose functionality shared across the object hierarchy. Using one of the sprite sets from Kenny.nl really helped to let me jump right into coding without having to do really any graphic design.

One thing I have not yet found is a good source for ideas on code organization. I found a lot of great books and posts on technical solutions for setting up a camera and sprite layer, but not so much on other more conceptual topics.

For example, one thing I’m interested in is what are some common ways to setup levels in games. I ended up creating an array of objects, where each object represents the settings of a level. The number of miles to get past the level is included in the level, as are things like the range of the tank’s and towers’ guns and probability of encountering enemies. I think it works well, but I’m curious how others have solved this.

So far, PixiJS is very good, but there are some major gaps in the documentation. Consider that the majority of devs I know use Webpack, I find the lack of PixiJS documentation around Webpack odd. For example, it took me a long time to figure out how to load image assets via Webpack through PixiJS:

First, you have to get Webpack to use the file loader for PNGs:

// webpack.config.js
{
    test: /\.jpe?g$|\.svg$|\.png$|\.wav$/,
        use: {
          loader: 'file-loader'
        }
}

d.ts
declare module '*.png' {
    const value: any;
    export = value;
}

At this point you can load images in an add them to the PixiJS loader

import * as ROCK from './images/towerDefense_tile136.png';
// app is a new PixiJS app
app.loader
    .add('ROCK',ROCK)
    .load(() => {
        // everything is loaded here
        // image assets are available on app.loader.resources
        const rock = new Sprint(app.loader.resources.ROCK.texture);
    });

app.loader.on('progress', () => {
    // app.loader.progress is the percent progress of all assets
});