Building a Roguelike Game with Typescript

In this article I'm writing about the experience of building a game as someone with a front-end background. Epoch Rift is a 2d platformer with roguelike features I'm currently building. It's unique feature is that you can play only as wizards. No swords allowed ⛔

Intro

Hey everyone 👋 It's been a while since I've posted something. This is mostly due to the fact that I'm currently building a game. Working a full time job and on side projects, I've almost no time left to write posts, which is kind of a side project itself.

I've built some small games in the 2000's with the BYOND engine. I had no real programming foundations, yet I had a basic understand what terms like mobs, procs and var were. Fast forward 15 years and I'm a senior front end developer who's built several applications using Javascript and I've been wanting to build an original game ever since I got into this career. I also know other languages like Ruby and Python, which are not really good options for developing games. But then again, Javascript also didn't seem to be a viable option for building a game.

Battle of the Engines

Having read multiple articles comparing the many different game engines, one thing was guaranteed: Creating a game with Javascript did not seem possible, at least without an huge amount of boilerplate work. I would have to settle for a typed language like C#. When looking for an engine, I have to take multiple factors in consideration, one of them is the size and activity of the community. Having no 'real' experience with game development, I better have everything I need on the first page of Google, minimum. Imagine building an application with a framework with zero StackOverflow posts. Daunting, isn't it ?

So I'm still decided to learn Unity and do a project with it. However, my C# knowledge is close to nil 😛. I've known about Phaser for a few years now, and stayed away from it for multiple reasons, the main one being that there really isn't a big community, compared to other engines like Unity or Godot. But currently, it's almost fully compatible with Typescript, which in my head, is acting like a stepping stone to C#. So I went it it.

Phaser + Typescript

Phaser has its caveats, but it has a lot of tutorials. In fact, most stuff I've implemented, I used their tutorial examples as a template. Their API documentation is a bit fuzzy and not everything will be on the first page you hit. After dwelling through GitHub, I forked a nice Cordova Phaser Template with Typescript which has some cool feature out of the box, mainly a BGM player (with Howler.js), Firebase integration and mobile platform support with Cordova on top of a webpack config with a dev server, and of course, Typescript support.

I still develop much faster using plain ol' JavaScript, so I took some time to figure the proper TS typings, and still have one or two any types lost in the codebase. Still, for custom logic, it makes perfect sense, at it feels very intuitive having autocomplete when updating scenes or sprites. Eventually, I moved all my "template" classes into a Base class which would be extended to the different sub types. For example, instead of duplicating most of the code to create two different enemies, I've merged the common parts into a BaseEnemy which I then extend enemies with different behaviors.

Here you can see the progress I've been making ever since I've successfully added a map and a moving sprite. As someone who's been mainly developing apps with React, I had immutability in mind, so developing with mutable objects and updatable classes, it's been complete paradigm shift.

Tools

As I said in the beginning, I work a full time job and am currently helping my girlfriend start her own project, so I don't have tons of spare time to build games. I have to say that the fact that I've made this progress in these 3 months, is because I've been using some of these tools which help me in someway or another to stay organized and be more productive.

Project Management

I've always used project management tools for my solo projects. For this project I changed over from Ora to ClickUp last month. For managing what needs to be done, defining a roadmap and managing my progress, ClickUp's free tier does the trick. I've cooperated with two social media managers so far and a project management tool to centralize your game documents is essential. So far I've only contracted the services of two social media managers, but I will eventually need to at least 1 graphic designer. I've been using Obsidian to store Game Design Documents, spreadsheets and diagrams, but I will eventually move some of this to ClickUp in order to make task creation and onboarding more efficient.

Code & Source Control

Despite the fact that I'm going solo on this one, I've also been using Gitkraken with WSLg as a Git GUI to help me visualize what changes I did in the codebase. For example, I can easily find a specific commit which introduced a bug in the codebase and can easily revert it with the built-in code editor. It's one of the products I definitely recommend you get for everything you do that involves a git repository. As per usual, I'm using Visual Studio Code which goes on steroids when using Typescript. It's been a really smooth experience. I've installed some TS extensions, and I was ready to go. You can check my last post to find which extensions I'm currently using.

Pixel Art

I bought and have been using Aseprite to draw almost all of my pixel art. I'm not the best sketch artist out there, by any means, but Aseprite has plenty of tools you don't find in software like Photoshop or Affinity Photo. The best thing, is that you can generate spritesheets and tag your animations in Aseprite and Phaser already has a createFromAseprite function which automatically maps the animations in your spritesheet. One thing I've learned the hard way is that if you have two animations with the same name from different sprites, you will have conflicts. You have multiple examples on Phaser's website on how to export and load a spritesheet from Aseprite.

Mapping

This one is free and open source. Tiled alows you to create your level maps with a graphical interface. One of my inspirations was built with Tiled and I had already heard about it. You can import your tilesets (created in Aseprite), have multiple tile layers and object layers, which are used to pin enemy spawns or chests. Again, the most defining feature that made me use this was Phaser's out of the box support for Tiled maps. You need to embed your tileset in your tiled export, and then simply preload the json file, and you can load it in Phaser by doing this.make.tilemap({ key: <map_key> }); on your scene. Also, like with Aseprite, there's tons of examples for loading a Tiled map and its layers onto your Phaser game.

Roadmap

So I've been at it for the last months, what have I got to show ?

• The main hub which you will pass through when starting a run.
• The first level which you can clear by collecting 10 spheres spread around the map.
• Three spells with slightly different effects.
• Gated areas,
• A lighting and particles system which renders certain effects based on Tiled's object layers (for example, fire braziers).
• A very rudimentar HUD which displays your heatlh, your collectibles and the cooldown of your spells.
• Essential physics mechanics (dash, jump, collisions, enemy flight...)

For the next few months, I want to have the following done:

• A new level with a new set of enemies.
• Another playable character with different stats.
• More spells that the player can use.
• A boss fight.
• New physics mechanics like elevator turfs and level portals.

I feel like require a lot of pixel art work as most of the groundwork for the game is built. There are alot of challenges I see ahead, and plenty more I can't even fathom. So stay tuned for when I post the next devlog in three to six months 😛

If you liked this project, follow Epoch Rift on Twitter as I'm posting screenshots and sharing development updates much more often there.