Making your way in HTML5

Blog post by Andriy Vinchkovskiy and Alexey Testov, developers of Back to Candyland - developed and published via Spil Games.

Making your way in games development...HTML5?     

Bringing games to the largest possible number of people is one of the most important factors for all developers and publishers and in the current fractured market - Flash-based and native mobile apps just didn’t feel right to us. This is largely due to their tight connection to a certain platform and the fact that the majority of players do not limit themselves to using just one device in everyday life  - and reaching them at all times is what we are all striving for. HTML5 provides them with a truly unique opportunity; it is the platform which makes it possible for games to be ported on mobile devices in the simplest and most convenient way without investing the extra funds and time required by Flash game porting.

Historically (I use that word loosely as it wasn't that long ago) one of the biggest problems developers were facing with the decision to go to HTML5 was related to the comparative novelty of the technology. This gave a rise to the preconception that the technology might be unpolished and bug-ridden. However, these fears were largely dispelled at the DevGAMM 2013 conference where many famous developers shared their positive experience with HTML5-based products. Subsequently various game developer forums, blogs (like this one, hopefully) and articles, where technological discussions take place, have  also played their role in chasing those fears away.

Our foray with HTML5

We made the decision to move to HTML5 for the development of our game Back to Candyland. The decision made solely on our need to reach the majority of the current fragmented audiences and, here, we want to share with you our experiences.

Resource - tricks to cut down on time and financial outlay

We wanted to ensure that we really did take advantage of the "advertised" less resource option of HTML5 development verses multiple format development. Going into things with a time and money budget was essential.

It is vital for the developer of any software product to ensure that it works properly on all target platforms to allow players to access the game from pretty much any one of the devices they choose. But the market is full of mobile devices with completely different operating systems and screens. Every developer knows that testing can be a major headache, but by using some simple, universal tricks, it is possible to achieve excellent results on pretty much all devices supporting HTML5.

Developers need to consider the necessary device base for testing. As a matter of fact, since the technology is stable enough, if resources are limited, only 1-2 devices are needed to conduct basic testing at the beginning stages of development. It is very useful to test apps with free services such as Samsung Remote Test Lab. It is also useful to keep in mind friends and users from game-development forums who will be glad to help test apps.

There are, now, many FREE programs for creating apps with HTML5, and developers can take advantage of these to limit the resources and outlay at the early stages. There are many text editors for writing code and graphics editors available at low or no cost -  we used Flash and Photoshop for graphics, Visual Studio for coding, and TexturePacker for packing atlases.

Limitations - knowing these can be vital

We knew, on paper at least, the switch was a straight forward one, however, the relative infancy of the technology does mean there are some considerations a developer needs to contemplate before kicking off. Most importantly, as I have highlighted, the mobile devices supporting HTML5 do span a wide range of characteristics, from the least powerful low-end smartphones to the Apple and Samsung flagship models. So a vital part of development is optimization as we always want to achieve a lovely, flawless image on all devices, and this needs to be thought out before development starts!

The potentially low performance of HTML5 should be taken into account when choosing the game mechanics; this is especially important when aiming toward mobile platforms and mass market audiences. The game might display 120 fps on the flagship devices while producing only 10 fps on 3-4 year old ones. In addition to the numerous optimisations and guaranteeing independence from varying fps values, it is also necessary to make sure that the game will be playable even at a low fps.

At the start of the development process, it is also necessary to account for the need to support a variety of screen resolutions by constructing the relevant layout. Our games stretch horizontally, with the height varying. The minimum screen height in iPhone 4/4S is 712 pixels (default value without removing bars); the maximum height is about 1,000 pixels.

Another aspect is the game size in the web version can be limiting; the artwork needs to be optimized and less frame-by-frame animation needed to be used; procedural animation and skeletal animation are two possible alternatives. We used Flash for piece animation.

Finally, it is important to pay attention to the quality of the music and sounds and choose the best bitrate which ensures audio files are of good quality and small size.

Problems - and more importantly, solutions

The first problem we faced was the choice of language for writing the game. We ended up choosing TypeScript due to its convenient object model and similarity to ActionScript3. This language is convenient for use in VisualStudio.

Another “problem” was the choice of engine or framework; we experimented with several solutions and finally decided on createjs, thanks in no small part to other developers’ reviews and the convenient API which is also similar to ActionScript 3.

This helped us make the transition from Flash to HTML5 as “painless” as possible for our team.

We did, like any new endeavour throws up, encounter a number of technical difficulties along the way, but we found quite easy resolutions for them all:

Results

Without a doubt, developing HTML5 games has been a valuable experience for us and we are sure it would be for all developers. The need to fit maximum content into the game’s small capacity and to ensure that players get maximum satisfaction forces us to look at game creation in a new way. These tasks compel us to focus on the most important aspects and thoroughly sift through all the ideas starting at the design stage so that only the most important and the best ones remain; the ones which would hook the players and give them a unique gameplay sensation.

Most importantly this approach makes it possible to shorten the time for developing each game and allows the release of several games in the time previously needed for developing just one Flash-based  game. This makes HTML5-based development less risky and more profitable for developers - a huge pull in the current market and its importance is hard to overstate, especially for small independent teams.

Our game was release in April through our publishing partner; Spil Games, across their sites: Zibbo, A10, Gamesgames, GirlsGoGames and has enjoyed access to the millions of active users they boast.

We have seen more than 3 million gameplays in this time and this has positioned us nicely in the 'popular game' section of the sites.

We have seen access to the games come from various devices with an almost 50/50 split* between desktop browser access and tablet/mobile access. Meaning we would be looking at nearly 50% less game plays if the game was purely Flash based.

Final thoughts

HTML5 development allows, first and foremost, cross-platform capability and it feels amazing to be able to launch a game on your phone or tablet without having to do any additional porting making it so important for developers to realize the huge potential of this technology.

Just a few short years ago, HTML5 games were neither particularly complex nor very popular, but due to the constantly advancing technologies and cross-platform capabilities, they are now becoming a strong alternative to Flash-based and Unity-based games. Having in mind the dynamically developing technology and the great interest in it shown by the publishers, the forecasts can be nothing but favorable.

In the coming years, the share of HTML5 games on the market will keep growing, but competition will increase as well; therefore, we can fully expect a very significant rise in the quality of HTML5 games. Based on this, I think we will soon see a huge number of hits among the games made, and allow them to take their place next to the top mobile app leaders and might even oust them from their comfort zone.

If the current dynamics remain in place, even the most conservative developers will realize the obvious advantage of developing HTML5 games because minimizing financial risks is always top priority for the small independent studios; the low sales consequences for even just one game on which the developers have spent several months could turn out to be critical and irreversible. Therefore, we see HTML5 development as an excellent solution to concentrate on releasing small but intense and addictive games while cutting the development process on each of them to a minimum.

*57% (or 1.7m) of users accessed the game via a desktop and 43% (or 1.3m) via a mobile/tablet device

Andriy Vinchkovskiy is a Programer and Alexey Testov is an Artist.