Thantos Dev Log: The Tech Stack (PhaserJS)

Thantos Dev Log: The Tech Stack (PhaserJS)

posted in: Uncategorized | 0

So, I’ve been working on a little hobby side project lately using PhaserJS.

Since I was young, I loved playing games. I’ve lost countless hours to the grinding, leveling, and skilling in a multitude of games across many genres. One thought I always had in my head, like almost every eventual programmer, was “I want to make a game some day”.

I tried out some different game frameworks, tool a class in college on the XNA framework, and even tried out RPG Maker. None of them I made it very far with (though I had lots of fun). Lots of them just didn’t have a creative freedom I was looking for to be able to craft an experience with all the ideas in my head.

For the last couple years I saw some stuff flying around here and there on Twitter about a framework called PhaserJS which promised to bring game development to the world of web developers. I honestly never thought much of it until recently when I got sick of trying games on Steam and decided to take some time to read about it and maybe try it out.

It clicked in my head almost instantly when I started reading the documentation and looking at their many examples on their site that there was something here. It comes with the perfect balance of providing a robust framework without being too opinionated or getting in the way. I was also excited by the fact that it naturally supported Typescript, which I’ve been loving more and more lately.

So I took the dive.

Tooling

Naturally as a mostly Microsoft-tech using guy, I gravitated towards Visual Studio as my IDE. It has amazing support for Typescript without much setup including support to compile on save. All I had to do was add a tsconfig file, and I was ready to go.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "amd"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib",
    "assets"
  ]
}

I should note that to get started, I used a template called Typescript HTML Application Template which gives a great starting point for a frontend Typescript application. I also grabbed an extension called Javascript Regions which adds the ability to collapse named regions of code. C# developers will be familiar with this. This becomes nice and handy when you want to only look at part of a larger file and hide stuff like a list of variable declarations.

// #region "Passed In Variables"
protected _id: number
protected _name: string
protected _x: number
protected _y: number
// #endregion

Module Loading

Because the Typescript compiler is generating modules, I needed to add a module loader. I decided I didn’t need anything overly complicated or over the top, so I opted for require.js. All I really needed it to do was create a new instance of my GameEngine class from my app.ts file in my index.html file.

There were some other quirks I discovered where I got errors that exports is not defined, so I had to cheat a little by declaring exports before requiring anything.

<script> var exports = {}; </script>
<script src="Scripts/require.js"></script>
<script>
	require(["app"], function (game) {
		var game = new game.GameEngine();
	});
</script>

Once I had all this in place, I was off to the races!

The Backend Server

When I first started experimenting with PhaserJS, I figured I’d make some simple single player game and call it a day. However, I’ve always loved MMO games so I figured, what the hell, I like challenges!

I decided I wanted to stick with my javascript and Typescript theme and opted for a Node server, written with Typescript. For communication with the frontend, I added in SocketIO.

It turns out, Visual Studio 2017 has AMAZING support for Node! It even has a Node project type which visualizes your dependencies and allows you to do a lot from the GUI before opening the command line.

visual studio npm

I added in a extension called NPM Task Runner which allows me to run NPM tasks from within Visual Studio’s task runner window. This is super convenient as it allows me to run and monitor the server without having to have a separate CMD window open.

task runner

You’ll see in that screenshot I’m using a node package called nodemon which detects changes and automatically restarts the server. This is really useful when developing! This is called using a custom NPM script in my package.json:

"scripts": {
	"dev": "SET NODE_ENV=development && nodemon ./",
}

My app.ts file (which is the main file of the server), when stripped down, looks something like this. It basically creates an express application and binds it, and SocketIO, to the HTTP server. I’ll go deeper into how the SocketIO integration is done in a later post.

export class Server {
    private _app: express.Application
    private _http: http.Server
    private _io: io.Application

    constructor() {
        this._app = express();
        this._http = http.createServer(this._app);
        this._io = io(this._http);

        this.Listen();
    }

    Listen() {
        this._http.listen(3000, function () {
            console.log('listening on *:3000');
        });
    }
}

new Server();

Conclusion

So, I have the tech stack in place: PhaserJS, Node, and SocketIO working together seamlessly to create a real-time game built entirely in Typescript on the whole stack. I gotta throw out props to the Visual Studio team who has made this experience incredibly with the IDE with such great support and integrations for these open source technologies.

In further posts, I’ll run through some of the more niddy-griddy and my experiences withing with PhaserJS.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

Leave a Reply