in Code

HUB Run is a game we developed for The Gateway, the University of Alberta’s official student media outlet and the largest student newspaper in Canada. I programmed it and our Design and Production Editor at the time, Jessica Hong, made all the art.

Why a game?

News organizations are still struggling to distinguish themselves online and The Gateway’s no different. I’ve always loved web-specific content that just wouldn’t work in print. Take a look at successful web news organizations such as Buzzfeed, Vice, and pretty much all of all of Vox Media (The Verge, SB Nation, Polygon, Vox, etc.). They all create unique content that usually wouldn’t be found on typical newspaper and TV media websites, whether it’s simple quizzes or huge, interactive features.

Last year, we decided to make a game to generate interest in The Gateway and drive people to our site. Hopefully they’d have fun playing it, then check out our other sections and read the articles our writers put a lot of effort into. At the very least, maybe some more students would learn what The Gateway even is after hearing about or playing the game.

Process

I originally wanted to get volunteers involved, but it ended up being more difficult than I thought; managing newcomers with zero game development or programming experience and trying to produce something with a cohesive design and development wasn’t going to work with what we had in mind. Instead, I decided to code the game while The Gateway’s 2014/15 Design and Production Editor, Jessica Hong, would create the art for it.

HUB Run was mostly completed in one day in February using the Unity3D game engine. We originally planned to release it for the last week of school during exams, but ended up postponing it to the start of this school year. This way, we could attract new readers during orientation and I would have more time to iron out bugs to make it clean enough to post on GitHub.

Before I started working on the game again in July, almost half a year since we made the prototype, I decided to take a look at the Unity terms of service. One part stuck out: Unity Personal may not be used by commercial or non-commercial entities making more than $100,000 annually. Fortunately, The Gateway makes quite a bit more than that. Unfortunately, we’re a not-for-profit and can’t afford to buy a $1500 Unity Pro license for one game.

So I decided to remake the entire thing in some form of Javascript and HTML5. After looking at a couple of frameworks, I went with Phaser because it looked fast to develop with and had all of the features we needed.

Phaser

Making a game in Phaser is completely done by coding in Javascript; there’s no user interface. I still found it easier and faster than going through Unity3D’s many menus. Unity is a great engine, but working with Phaser made me realize it was total overkill for HUB Run. The total code implementing the framework is only 483 lines of code, and that’s with comments, whitespace, and other formatting to make it more readable.

2D physics were already included so I didn’t have to worry about creating my own system, only implementing their’s. This was probably the biggest headache because there are some functions that seem to do similar things, but not always, mostly related to physics. I eventually got them all to work reasonably well through trial and error.

I used Phaser’s own tutorials and found them sufficient. There’s a huge community online for Phaser, too, so any question I googled usually had an answer. I’m sure I could have asked on the forums if I had one that wasn’t answered, but I never had to.

One thing I liked about Phaser was that it has a built-in state system, allowing developers to easily implement the state design pattern. Each state is a Javascript prototype that may include the functions preload, create and update. Using states encapsulates features that wouldn’t be necessary in other states, and Phaser also removes the previous state resources from memory, which is useful for large games. HUB Run isn’t that big, but why not try it out?

GitHub

We decided to put the entire game is on GitHub so that students and the community can see the code, branch it, and basically do whatever they want with it. The Gateway is partially funded by students, and the rest depends on our readers, so it seems fair to make the game open source. You can see it here.

Issues

The game isn’t without issues. About half of The Gateway’s traffic comes from mobile, but HUB Run doesn’t have touch support. In the original Unity3D plan, we were going to release it as an app on iOS and Android because Unity3D provides for that. I’m not sure how that would have worked out since I didn’t get far enough, but it probably would’ve been easier than in a Javascript game.

The touch controls themselves would also need some more thought; should the character move to the touched area, or should different corners of the screen represent different directions to move in? How will this impact difficulty and movement speed? Also, do we want to allow this to be played on the browser as well or just as an app? If it’s in the browser, does the game need to be able to go full screen? How would this work with different phone screen sizes?

I may add touch support for a 2.0 version to be released for the winter semester in January, which would also add some other features and fix bugs, such as the one with page-scrolling on arrow key presses. But otherwise, I’m happy with how it turned out. The game’s page has been viewed over 3500 times, and it’s been shared a lot on social media. It accounted for 40% of our first week traffic, and is still going strong. I haven’t had any complaints apart from some minor bugs, which is a relief because the minutes after release were terrifying. But it was worth it.

If you have any questions or anything, please feel free to leave a comment below!

Leave a Reply