My tools to make HTML5 games

Last year, after finishing my first gig as an HTML5 game developer and later hired as an instructor at a local academy, I decided that native HTML5 (JavaScript) would be my focus area besides Unity. During that time I got myself testing some tools, going back and forth, looking for a comfortable configuration. Today I’ll focus on the text editor and framework chosen while explaining the selection process. They’re part of what I call The HTML5 Game SDK.

The selection criteria was very straightforward:

  • Free: getting U.S. dollars is a titanic task where I live, so I just save the trouble for when there’s really no other or better option
  • Cross-platform: being a teacher means getting  students from Windows, Linux and Mac ecosystems
  • User-friendly: the less I have to deal with command prompts, initial setup, bothersome configurations, the better

Text editor

I started using Notepad++ for writing simple code and exercises, but then I had some trouble with file encoding. Moved to Aptana, and it really is a great editor with a lot of perks. However, I feel those perks come with the cost of being a little slow for those times when I’m in a hurry. It’s worth trying if you have a great machine and a solid-state hard drive.

Then, a couple of friends recommended Sublime Text. I loved the dark theme, crisp fonts, and all the configuration options at first sight. I must confess that I was tempted to spend the 70 bucks on the license, but took a pass because I remembered the criteria. Yes, it has a free version that comes at the price of having a bothersome buy-pro-version notification once in a while. Besides the annoying notification, it’s kind of a pain configuring things via JSON file and console commands at the beginning.

Finally, I got two more candidates; Atom and Brackets. The first one is a lovely text editor from the guys at GitHub, with crisp fonts, lovely user interface and easy-to-change configuration, and Node.js integration. I was in love, until I discovered it has an awful issue for a text editor: it can’t handle 2MB+ files (and it’s not the top-priority issue right now). That’s why I decided to go with Brackets for the time being.

brackets-editor-logo

 

As a text editor aimed to web development, Brackets has worked marvelous in the recent months. Multi-platform and very customizable, it makes for a great text editor that handles projects in a very smart way; you just need to open the folder where the project lies and that’s it (no additional project files to handle).

The Live Preview feature is one of the things I certainly love because it runs the html file from an embedded web server, using Google Chrome. Why is it so important? Because as you may already know, certain JavaScript libraries such as jQuery and Phaser, work better or require the code to be executed from a web server and not like an opened html file on our machines.

Furthermore, there is a plug-in called Phaser Chains, based on the website with the same name, that lets us search the Phaser docs without leaving Brackets.

Don’t think for a second that Brackets is my perfect choice. The font crispiness has developed in the last couple of releases, but coding for long periods was a little more tiring due to the blurry font. I’m thankful for the improvements and looking forward for more interesting features in the future.

You can download Brackets at brackets.io.

Framework

I started researching APIs and frameworks back in 2013, and I wanted something similar to Game Maker and Unity, or at least to XNA/MonoGame. I hit a dead end when I found ImpactJS and Construct2. These engines were great and something I really liked, but I couldn’t afford them. Then I remembered that Enchant.js was a Global Game Jam sponsor and an HTML5 API focused on game development.

I tested Enchant.js and it worked for me for a while because of its minimalism, easiness to extend objects and code in  OOP. However, the documentation in English was awful and its Box2D wrapper lacks speed. It is a good tool for fast prototyping but I wouldn’t use it anymore for production (despite having a couple of games in a client’s server). A friend of mine recommended the Akihabara library but didn’t click.

By 2014, Christian was researching a little bit more on HTML5 game development after we pitched a prototype for a potential client using Enchant.js, and told me that working with Phaser was way easier in terms of process and it had a well-documented API. I read his code for a couple of prototypes and studied the framework for teaching it at the academy. It turned out to be a great shift and my final selection so far.

phaser-logo

Phaser is really easy to install and learn, and despite being very object-oriented in its internal architecture, it is not an opinionated framework; meaning we have a lot of control and flexibility in the way we use it to make our games. We can use a lot of function calls to develop our game or apply object-oriented principles and structures in order to make our code reusable. It not only works well with JavaScript prototypes, it also allows us to develop HTML5 games using Typescript.

You can download Phaser at phaser.io.

I hope you had a glimpse to my experience and train of though and invite you to test the other tools I already tried. It’s not a one-size-fits-all world and you could definitely benefit from research. Let me know what you think, and what other tools to make HTML5 games you have tried that worked out for you.

By | 2017-01-26T20:22:24+00:00 May 28th, 2015|General, Tools|1 Comment

About the Author:

One Comment

  1. Andrey June 22, 2015 at 13:22 - Reply

    Thanks, man!

Leave a Reply