Earlier this year, I compared a number of tools IDEAS has used for cross-platform game development. Ultimately, HTML/JS (browser based) was declared the winner, despite having serious performance issues on older devices. Well, due to the nature of technology lots has changed since then. Less than a month after our blog post, Unity 5 was announced, along with a new pricing model which eliminated their previously high royalty fees. They also made sure that the free and pro versions of the software had all of the same features (previously, the free version had lots of limitations).
Not only that, but Unity also announced a number of new features and services to assist with cross platform development. Unity Cloud Build, Analytics, Performance Reporting, and Multiplayer Networking are some of the highlights. Cloud Build in particular is extremely helpful. It eliminates the need to use a development machine for long builds, and even better, eliminates the need to keep track of multiple SDKs. Adobe PhoneGap Build is a similar service for making PhoneGap/HTML based apps, however Unity’s Cloud Build is more robust and has an incredible set of features.
Further Thoughts on HTML/JS (Browser-Based) Games
Aside from playing with the new version of Unity, we’ve also had time to put browser-based games to the test. And as mentioned multiple times in the previous blog post, the performance of browser games across devices, browsers, os versions, etc. was dramatic and often unpredictable.
Canvas vs WebGL
This is an even more granular comparison. Aside from HTML vs Unity vs AIR / etc, and aside from choosing between different HTML/JS frameworks (like Phaser, createjs, etc.) there are also different ways to target and code a game. Canvas is universally supported, but there are issues. First of all, it doesn’t perform as well and lacks features compared to WebGL. There are also limitations on different devices. Android doesn’t support clipping. Older versions of iOS don’t support video, along with images over certain sizes. Canvas doesn’t support 3D at all, again that’s something better suited for WebGL. The problem is that WebGL has it’s own issues as well. It’s not as universally supported, and has some very specific bugs/limitations for iOS in particular. Tizen (an open source OS) did a good comparison of the two here.
Simple example of how WebGL performance allows for more objects than Canvas2D
Between the two, WebGL is certainly preferred. It allows for more objects, better performance, special image effects, shaders, 3D support, and more. Using an HTML/JS framework, you will typically have the option to choose between Canvas and WebGL which is almost always a trade-off between support and performance. There might also be times when WebGL offers features that aren’t needed (more typical for simple 2D games). If targeting older mobile browsers you might not have a choice at all, and will have to use Canvas2D. However, that’s changing quickly with each new generation of mobile devices phasing out the older ones. Most (if not all) modern smartphones released today (2015-2016) do support WebGL.
Canvas2D is more widely supported than WebGL (these stats are from 2013)
Unity and WebGL
Unity 5 has the ability to export to the browser via a plugin or WebGL (no Canvas option, due to the 3D nature of Unity). The browser plugin for Unity has the best performance, but unfortunately there is no mobile support, and Chrome removed support for Unity even on desktops browsers in April of this year. Other big issues are that the WebGL implementation of Unity has lots of overhead, is considered in preview/beta status still, and has no official support for mobile (Unity actually suggests against using WebGL exports for mobile at all).
Example of Unity’s build settings
The Truth of Cross Platform Development
As far as I’m aware, the first “mature” cross-platform/hybrid development option available for game and app development was when Adobe announced their Packager for iPhone in 2010. This was when only a single iPad existed, before the iPhone 4, and before Retina displays. For the next few years, using Adobe AIR was the most painless workflow for making cross platform mobile apps, and allowed us to continue using the same tools we were used to (Photoshop, Illustrator, Flash, After Effects, etc.). As technology developed, more and more devices continued to come out. Now there are multiple iPods, iPhones, iPads, iPad minis, etc. That’s what we call fragmentation — having to deal with different configurations of what most consumers might perceive as all being the same ‘product’ (like knowing you have an iPad, but not knowing the exact version and all of features).
Unfortunately, there’s just no silver bullet these days. Not that there ever was, but it’s more true now than ever. However, there’s more to this than just performance and workflow. Another extremely important, and chronically overlooked element, is the experience of an end-user. This applies most of all to games, where the method of input (using a keyboard, mouse, game controller, or touch screen) drives the engagement. Bad controls can ruin an otherwise great game design, and vice versa — a game design that’s not particularly innovative or “fun” as a concept on its own, might still be extremely engaging if the controls are done well.
Because of how important the end-user experience is, lots of foresight and thought should go into the target platforms. It’s common to want an app or game to work on all devices, since it seemingly expands the audience exponentially. But during the design phase, really focus on whether or not you can deliver the best experience on mobile/browser/etc. And likewise, if creating a mobile/browser game or app is a requirement, let that drive the design and try not to force an idea that works well on desktop, onto a mobile platform, and expect it to hold up the same.
“As an additional resource for all those who’d like to learn more about the HTML5 canvas, check out this informative cheat sheet from FirstSiteGuide.“
