Testing the technological capabilities

After the decision that we are going to make a mobile game, and knowing the game idea, the question about technologies for the project came up for us to answer. Since Fusky and me, Teo, have experience in the field of development of web/smartphone apps on HTML5/JS platform, we know that using one codebase for all platforms can save a lot of time when developing a hobby project. So our first try would be creating the game in HTML5 and JavaScript. On HTML5 there is a nice little platform that could also help us creating common game parts, like the login, multiplayer rooms, leaderboards, etc.. The platform I’m writing about is Clay.io. At first look it is great, and it also claims it supports mobile development. So I decided to make a small test – create a very simple game using JavaScript, implementing the Clay.io platform for a few simple tasks, and use Phonegap to build a native mobile application from the code.

 

The simplest game that came to my mind was a number guessing game. In fact, I always make this game when I learn a new language, or want to test something out :) It is really very simple: the computer picks a number from a certain range, gives you x attempts to guess it, and only hints you if you should aim lower, or higher with your guesses. For the JS implementation I decided to go with AngularJS, and I put together the game basics during a Sunday afternoon. Here I found out a small limitation in HTML5 and a problem with cross-browser support of the <input type=”range”/> tag. It isn’t supported in Firefox, and in Android Gingerbread’s native browser.

As next step, I implemented Clay.io login, and leaderboards to the game, and also added two small achievements, just to try out also this feature of this nice platform. Here came another problem with 2.3 Android’s browser, and Clay.io login overlay. The overlay element keeps moving higher/lower on mobile screen in this browser, and you have to tap the login button quickly in order to make the shaking stop. It’s a huge UX flaw, but it’s still usable with a bit of effort. Otherwise Clay.io worked great, and implementation was really quick and painless.

The last step in my hocus-pocus was to build a native app. Using Phonegap was simple and easy as usually, I just got stuck on a small problem with linking the AngularJS library – in HTML code I used the link without specifying a protocol, thus starting with src=“//angular…..” . In the native app, of course, the protocol had to be specified. In performance matter the native app was working well, only the same problem with Android Gingerbread and Clay.io login overlay occurred, which was expected.

 

One test is still left to be done, and that’s testing out canvas graphics on mobile devices, but my conclusion so far is, that developing games on HTML5 can already be done nowadays. The worst problem is the cross-browser and cross-version optimization on mobile devices, but I think that it’s still worthy, because of the cross-platform support you get back. I think maintaining one codebase while your game is published on Android, iOS, Facebook, Chrome store, etc., etc. is priceless. I still would recommend using Clay.io if you want to do common game-related tasks quickly, but the older, but still widely used devices would need a little extra effort optimizing all the glitches present. You certainly need to consider own implementation based on the needs of your game.

 

You can check/play with the game source code on GitHub or play the published version. Or you can download the Android APK.

 

Programmer @vectary. Hobby #gamedev @TOFFGames. Poker Player. Rock musician. Technooptimist. All with lot of passion.

Latest posts by Matej Žilák (see all)

Also read...