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

As my previous posts have discussed, I’m currently building an isometric city simulator.  As I post screenshots to Twitter and tell my friends about it, they inevitably want to see it in action.  I have web hosting here at Evil Mouse Studios, but if I want to put my project online here, it requires uploading all the files manually and it’s kind of a pain.

Enter Github Pages.  Github offers a service called Github Pages that hosts a running version of your project for you.  All you have to do is branch off of your project, call it “gh-pages”, and then you can see your site online.

I use Grunt to automate my build process, and it works great.  It takes all the files I need to run my game and copies them (after processing) to my dist folder (where the game is run from). For my game to work successfully, the entire “dist” folder needs to be hosted somewhere.  This normally wouldn’t be a problem, but “dist” isn’t stored under version control.  It’s the built version of my game, and having it on Github would just be a waste.  So how do I deploy my “dist” folder to Github Pages?

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

At my day job, I have the pleasure of working with a great bunch of guys, and one of the best things about working with a team of people is that you get to see how they approach problem solving.  I think some of the best breakthroughs and most elegant solutions I’ve found have been when I’m sitting with another programmer and we’re working together.

How do you go about programming with a partner though if you’re in different rooms, or different buildings?  Screen sharing works, but it’s kind of clunky, and I don’t really need their entire screen, I just need to see the code.  That’s where I package I found online for Atom comes in to play.  It’s called atom-pair.

Atom-pair lets me use my favorite text editor with a partner even when we’re not in the same room.  It’s still in its infancy, but I think it has great promise.  I even submitted a pull request to add Slack integration to it.  Definitely check it out, it’s a great package.

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!