HTML5 is versatile to be appearing on your PC, phone and slate device etc. There is no surprise if it is ubiquitous to even the kitchen appliances. The rich combination of versatility and ubiquity no doubt inspires many developers. When the desire of developing better websites is saturated for developers, they would often jump into the development of the games.
If you are one among such developers, these good to know tips to develop the games using HTML5 should enhance your skills for developing more flexible games. With the knowledge of game development framework using HTML5, it should help you reach easy access to multiple gadgets and their core programming, to manage the in-game state, dealing the issues related to performance and make the best of the browser platform. Let us see the best five practices of HTML5 towards better game development.
USE A FRAMEWORK
It is not difficult to coding a simple game in HTML5 and the complexity starts only if you scale up the game and so you should ensure that the game manages many things to run smoothly.
The first consideration is the speed compatibility of running JavaScript and the resources of the game like images, sound, video etc. Generally, JavaScript starts executing sometimes even before the asynchronous download of these resources is completed and this would result in “popping” or images that look blue. So, you need to take the account the timing of downloading and running of the code. The solution is simple, just to create and implement a preloader, which helps the execution of the script to defer until ensuring that all the resources of the game are downloaded.
Another aspect of consideration, which is not quite in your control, is the speed of the browser and machine on which the game runs, do differ. It is possible that you make these factors to be independent and less influencing the frame rate at which the game runs at.
CONSIDERATION OF TOUCH SCREEN AND SMALL DEVICES
One of the reasons for high selling point and success of HTML5 is that it could be compatible on multiple gadgets like desktops, laptops, Smartphone and slates etc. This unique intrinsic property of cross-platformness makes the developer to relax. However, there could be some betterment that developer can do to make it even better.
The first aspect is the varied aspect ratios and resolutions of the display of the gadgets. For compatibility of games for mobiles, either limit the WVGA frame size of 800 x 400 or enable support for multiple resolutions. Make use of planning and zooming techniques of mobile by setting the viewport Meta tag to occupy the entire horizontal screen size as mobiles don’t render the web pages. It works only when the user does not opt no for user-scalable option.
The next consideration is the input. With varied keyboards like on screen QWERTY or on the keypad, using the controls to play the games would be a challenge. So, you can display the controls like the arrow keys to be displayed on the screen itself and make sure to limit these number of controls as well as their sizes.
SAVING THE PROGRESS OF PLAYER, AUTOMATICALLY
The hard earned score of a serious gamer should not lose accidentally or as the battery runs out of juice etc. The possible solution is to use HTML5 DOM storage, which enable to save huge data per website similar to key-value store. However, complex data structures may not natively support DOM storage. But you are fortunate enough, because of JSON of JavaScript for compact notation of serialized objects.
USING A PROFILER
Yet another challenge is the high frame rate maintained to run the game, added with a number of features. It is however good news that games that are HTML5 powered can run at constant speed of 60 fps rendering frame in over 16 milliseconds is a reality and speed of browser enhanced many times in recent years as well. This is a challenge of bigger devices as well as you may need to write the entire new code for IE9. The solution for IE9 is however by selecting ‘start profiling’ in the ‘profiler’.
BE CREATIVE
Many offline games that are played alone when the browser is running would be easier, compared to the better scales. However if you wish to be browser game developer, think creative to run the games online and moving a step ahead to invite the friends and making them competitive players of the game etc. Running a game in parallel with the communication application is not only creative but better rewarding and thrilling like HTML5 based Warimals played on Facebook.
Author Bio
This post written by Mark Ross, He’s HTML programmer and provides PSD to HTML conversion services. You can contact him on twitter @MarkupBox
