I’m currently working on a game using the Javascript game engine Phaser.  It’s going to be set in a city, so as part of the development process, I’m going to make a working city simulator and build the game on top of that.  The last month has been spent generating landscapes, roads, buildings, and more.  Once I had all of the items I wanted to generate created, I joined them together and found that it looked beautiful, but ran terribly.  I had gotten to the place that every developer gets to at some point in their project: optimization.

As I started racking my brain thinking of ways to optimize, I decided to write down all the steps to show later.  I’m going to be giving a short talk at work about optimizing javascript games (Optimizing Javascript Games PDF), but I wanted to write a slightly larger companion blog post about it.
Continue reading

I’m working on an isometric city simulation with procedurally generated terrain, and as I started to generate terrain, I ran into a bit of an issue.  I’m using the isometric tiles from Kenney (which are amazing), but I was struggling to think of a way to handle edges.  Take this island for example:


You can see that on the left side, there’s some sloping that lets the sand tiles blend into the water tiles.  That’s great, but I wanted a programatic way to handle those kinds of transitions.  I thought of 9-slice scaling and thought that might be a solution.  If you’re unfamiliar with 9-slice scaling, this tutorial might explain how it works.  The basic idea is that you can take a rectangle, and divide its parts into 9 (4 corners, 4 edges, 1 middle), and through scaling those 9 parts, you can maintain the look no matter how big (or small) it is.

Continue reading

I’m currently working on a top down tile based game, and when I came to generating the map on the screen from a one dimension array, I thought of a few ways to do it.  The first way was a very simple one I saw online.  It involves looping through columns, and then looping through rows within columns to get coordinates.  No math beyond simple addition is required to make this work.

That’s pretty easy, right?  I started to think there might be a better way to accomplish it without using two loops.  I came up with a fairly simple algorithm to take care of it (I’m sure I’m not the first person to come up with it, but I did come up with it on my own).  The second example requires a little bit more math, but still nothing too complex.

I was pretty happy with that last example, it’s still very simple, and in my mind, one loop is better than two, right?  I started thinking though, how much overhead is introduced by using math functions?  Is it enough to offset the cost of an additional loop?

I put together a simple test at jsPerf to find out.  The results blew me away.

map generation results


Wow.  I didn’t expect that big of a difference, but there it is.  I hope this helps people who want to do tiled map generation.  Also, if you have a faster way, please comment and let me know what it is!


I’ve been trying out a new rendering engine written in Javascript called pixi.js.  It’s supposed to be the fastest one around, and while I can’t tell you if it is or not, I can tell you it’s certainly very cool.  It has some neat features like auto-detecting WebGL support, and failing over to canvas support if the device doesn’t support WebGL.

One of the first things I tried to build with pixi.js is a hobby project a friend and I are working on called “Half Gallon Hat”.  It’s sort of a western themed typing game.  We’re still working on art, animation, and a ton of polish, but I think it’s pretty promising that I could implement the core game mechanics in only a few hours.  Feel free to check it out and test out your typing skills.

Half Gallon Hat

Also, I’m working on separating the game code from the rendering/management code.  I hope to have an engine.js file ready to put on GitHub in the future to make game development with pixi.js a little easier for others.  I’ll post here once I’m ready to commit it.


So I had the idea to make a game to help support the Dogecoin cryptocurrency.  I wanted it to be multiplayer, but not the type of multiplayer where both players need to be online at the same time.  What I came up with was So Maze.  It’s essentially a mix between Minesweeper, Stratego, and a maze.  I think it’s a really interesting type of asynchronous gameplay, and it’s one that I hope to explore further in the future.

Check out my Twitter for more screenshots like the one below of what the game is like and to see my progress.



Check it out on GitHub, and feel free to submit a pull request if you’d like to improve on it.