Principles For Game Development In Html5

Published Date: 02 Nov 2017

Abstract – This document provides a study of one of the newest and most widely used technologies today for building web based applications. It goes through an overview of what i consider are the most important part of making a game application with HTML5. We go through the two most important features of HTML5 – its versatility and cross browser and cross platform compatibility. HTML5 has come out to be one of the most flourishing technologies today and building an application with HTML5 is very hustle free and we will also go through the problems faced such as how to reach a wider audience through mobile devices, how to tackle performance issues, how to manage your game logic and how to fully utilize your browser. During the phase of this project various intensive animation based application were created to discover the best practices which should be used to make such applications.

Keywords – HTML5, JavaScript, CSS, RIA, Framework.

Introduction

HTML5 which is the successor of HTML(short for hyper text markup language) is flourishing at a very high level and today most of our web applications are on HTML,

The previous version of this language had been released n nineteen nighty seven and since then there have been various updations and modifications of the language so that it becomes compatible with the www.There was a time when web pages were just a collection of text and images put together to display a certain information which could be read by everyone. But as internet evolved these web pages started to become more and more dynamic and complex and started taking the structure of what we call our regular desktop applications. These applications started being referred to as Rich internet applications or RIA [1]. In the initial phase of this moment these applications were developed on plugin based technologies such as Adobe flash and Microsoft Silverlight, but due to the recent evolution of a web based standard called HTML5 these applications have become much more easier to make and more widely used.

Why HTML5

[1]HTML5 is a successor of the Hyper Text Mark-up Language or in short the HTML which is also called the language of the web. It is under development. Most of the modern browsers have started to support this new standard. Some of its new features include a wide support for video and audio elements. Many of the most popular video streaming such as YouTube have started to support HTML5. So this makes us think – Do we need plugin based technologies such as Adobe Flash and Microsoft Silverlight at all? This new specification called HTML5 is designed to backward compatible. This means that everything that used to work with HTML4 will also work in HTML5. [2]

New features of HTML5

The most important feature that has been added to HTML5 is that it acknowledges that the world wide web has a very definite structure. Many new tags and elements like navigation, aside, article, audio, video, canvas etc. have been added to HTML5 to design a more structured web. Fig. 3-1 the structure of the webpage in HTML5 [3] Some of the new features are semantic replacements and some provide new functionality. Most significant new features are [2] [4]:

A <canvas> element is added for designing and working with 2D graphics.

Local Storage and Web storage.[6]

Multi-threading can also be done in HTML5 using web workers.

Web Sockets are now fully compatible with HTML5 which enables two-way communication between parent and child pages on cross domain.

<Video> and <audio> tags have been introduced to add multimedia elements on the page.

HTML5 is still under development, and many additions and alterations may come in its structure and architecture in near or distant future. Despite of this fact that many modern day browsers such as Chrome, Firefox, Google Chromium, Safari, etc. have all started to implement HTML5 in their latest versions. Apple does not allow installation of adobe Flash plugin to be installed on Mac devices. Instead they have started the development of HTML5 in full swing.

B Environment for Development

To start building HTML5 applications you will need the following for your development environment.

A local server- Apache recommended

An editor to edit and build your source files – Codelobster recommended(as it I free source)

Browsers and mobile platforms (if needed) to test your applications.

Game development principles

A. Which Framework should be used?

[5]While making simple games on HTML only basic knowledge of HTML is required but as you start building more complex games with animations and difficult game logic you need to start using a framework for smoother game development.

This can be seen when there are various high end images, graphics or different sound effects and videos in your game module. These high end graphics lead to downgrading of performance of the browsers and the server which in turn affects the performance of the game you have created. 

This will lead to your script file starting to load much before your sound and image files have even been loaded which will in turn lead to breaking your code. This leads to your images and videos being loaded much before the actual content leading to discrepancies. The best way to counter effect this issue is to use a preloader for your code that’s defers script execution till all the resources have been loaded. Pre loaders are used in the starting of any activity till the time all the images gets loaded. It is very essential as the user gets to know how much time to wait rather than looking at the screen where the image gets loaded in bits and pieces. All you need to do is -

Adding script libs into <head></head>:

<script src="../../libs/PixLoader.js"></script>

<script  src="../../libs/PixLoaderImagse.js"></script>

Making a new <div> for our preloader :

<div id="PreLoader1">

<span id="LoadingText1">Loading...</span>

<img id="LoadingImg1"  src="../../../assets/loader.gif"/>

</div>

Adding script in to your main js file :

$(document).ready(function(e) {

$(function(){

// Create the loader and queue any no. of images. Images will not 

// begin loading until we tell the loader to start. 

var imageArray1 = new Array(Background.png'); ---- Put all the images that you use here ! (comma seperated)

var loader = new PixLoader(); 

$.each(imageArray,function(key,value){

var pixImage = new PixLoaderImage('images/'+value);  

loader.add(pixImage); 

}); 

loader.addCompletionListener(function() { 

loadXmlData(xmlfile); -------- change the name of your xml file here.

}); 

loader.start();

});

});

Now there is also another issue which is normally faced during game development, that is different browsers and different platforms have their own processing speed and they run the game according to their own capabilities . On the account of hardware, it is not possible to tamper with the processing speed and try to improve it,

but there is a solution to this, what we can do is that we can fix the frame rate of the game and make sure that the graphics of the game are independent of that frame rate.

If you are starting your game from scratch there are a lots of functions and predefined codes which your game needs to function properly. Fortunately HTML5 has reached to a level that there are many frameworks available that help through the structural part of your code, that is defining the objects and the architecture of the game thus leaving you to only worry about the logic of your game and not worry about what libraries to include in the game and also gives access to predefined functions which could be useful to your game such as xml text loading or fluid animations etc.

But it is very difficult to choose which framework to use from among the wide range of frameworks which are competing with each other. There are different types of frameworks for example there are frameworks which help to most during you’re the process when your game is being developed for example impactJS while there are some which only concentrate on how good to improve the interface of the game using different graphical functions like Ease JS.

The best practice would be to choose a framework which best suits the story board of your game and the one which you might be really comfortable working with. Choosing the framework finally leads you working in a particular format using exactly the same coding standards which the framework is using so it is a very important task to choose the framework properly.

If I had to choose a framework I would recommend ImpactJS , the main reason behind which is that it creats its own objects on which ou can later append any properties you want and also it provides a deep layer of abstraction to show images and sound effects.

B. Which Platform to develop for?

When you start coding your game module the best practice you think would be not to use a framework and start your coding from total scratch as that would be very helpful in learning the language but today most applications use framework as it makes your game easier to code and much more structured. So if you are considering game development as a long term alternative to best thng to do is to choose a framework and move forward using it.

The most persuasive point of HTML5 is that it is compatible at cross platform levels, it works on desktop pcs, laptops slates, smartphones, tablets or anything that has a browser. Though HTML5 is cross platform compatible even then it requires input form the coder to make it symmetric on all platforms. The first thing to consider is that different screens have different which can actually differ by a huge margin depending on the device you are using and considering the screen resolution and aspect ratio of that device. So if you would lke your games to be able to function properly on different platforms then you will have to right your game code considering the responsiveness of your game elements according to different devices. This can be achieved by various techniques such as media query or defining the position your elements in terms of percentages which refers to the percentage in reference to your screen. The code snippet below explains how you can define different css properties to your elements using media queries:

@media (max-width: 1024px){

}

@media (max-width: 800px){

}

To consider different screen sizes for different platforms you can also consider different scaling methods involving pinching and zooming so that the games scales according to the screen size of the platform being used.

And for some device we do not actually properties such as zoom and pinch (like if we are making single touch controlled games) to be disabled this can be done using viewport tag. In this tag setting the scalable property to no makes the device disable pinching and zooming properties.

Once your game has been rendered on the device you are targeting may it be small or big you will have to think what kind of game do you want it to be, touch based, sensor based key based or something else. If you want the game to be keyboard based than you can also optimize the space in your game by making a custom virtual keyboard which consists of only the keys that you need for your game. (E.g. up down keys or only the number keypad).

C. Saving Game progress

With new features being introduced everyday web based applications have started replacing the market of desktop applications. The fact that now websites which used to be only for displaying data can now act as stand-alone applications is a very attracting factor which is also true for websites being able to store the state in which client side is. When you are surfing on the World Wide Web storing the state of clien state is not that a big factor because most of the browsers save data n the form of cookies for future use.

But web based games due not act n the same way as for a game it is necessary to save game data at every instant. As HTML based games are created using javascript which is a client side language HTML5 games save the game data or the state of the game in the transient memory i.e. the RAM. This leads to loss of your game state once you close your browser.

Mostly we would remember not to close the tab which we are working on for a long time and which we would need but sometimes while closing other you can still by mistake the game tab and thus losing all your data.

To summarize what’s mentioned above, when writing HTML5 games the best practice should be to save the progress of the game regularly so that they return to the same state once they resume the game again. The question is that where can we keep the track of the player’s progress in the game which was easily stored in a cookie or a server-side database in the past. But both of these options are not very feasible. If we are consider the first option it is not very feasible as with cookies we have to work with a very limited amount of space and also the length is majourly dependent on the browser whereas for the latter approach it would reduce the browser speed as it would have to make constant handshakes between server and client.

For this we can use the document object model for HTML5.

These issues can be easily resolved using DOM as it allows you to store several mb of data using a key-value algorithm for defining javascript objects. It is the best solution abailable for the above problem but there us still one drawback to DOM storae which is the fact that it does not support very complex data structures. But datastrucures can be handled by JSON another amazing feature implemented in javascript, Thus making the combination of DOM and JSOM perfect for maintaining game state.

D. Detecting performance issues using profiler

HTML5 games can run on very high frame rates and as they are running online it is very difficult to be able to control the game during the high frame rates leading to lagging in the game.

But there is a solution for this as well because today most of our modern day browsers are now very fast and many games in HTML5 nowadays actually run with a frame rate of 60 fps.

To implement this a lot of research had taken place and internet explorer 9 had actually had to build an external javascript engine to make these kind of frame rates a reality.

So with these kind of frame rates you actually don’t have to worry about performance if you are making a simpe game.

But because HTML5 is cross platform compatible you are actually making your game for a lot of devices which run different browsers, have different performance capabilities and screen sizes. So what we need is a way to map the performance of the game while its running which will help us in understading which part is consuming the most capacity.

And just for this there are many browser specific tools which let us debug our code. For example in ie9 you can access the developers console using the F12 key. And after that you can start profiling your game using Start profiling tab.

Using this tool you can figure out where performance is not being properly utilized and try to figure out how to improve the performance. Once you click on stop profiling you get a list of all the functions in your game module along with the what time they took for execution. Then you will be able to optimize your code according to the information you got using the data.

Educational initiatives pvt. ltd.

I would also like to shed some light upon the company in which I pursued my project. It is called Educational Initiatives

Pvt. Ltd. It is one of the most successful companies in India in the e-learning sector. Various products of the company are

ASSET, Detailed Assessment, Large Scale Assessment and Mindspark. I was assigned in the Mindspark Dev. team.

Mindspark is a computer based program that is here to revolutionize the study of Mathematics. It focuses on self-learning with a curriculum of an integrated database for various school boards. [7]

Adaptive to the changing needs of education, Mindspark aims at making Mathematics easy to understand and fun to learn. [7]

It comprises of various forms of diagnostic tests aimed at calculating the general level of a student with respect to the national figures. It also comprises of various Games, Enrichment Modules and Remedial Items. These games, enrichments and remedial items, till last April were designed on Adobe Flash and then integrated into the mindspark system as SWF files. But with the increase of tablet penetration in the educational sector, they started to face problems as Adobe Flash is platform dependent. So there came a need to address to those issues. One solution was to maintain different files for different client devices but that is not feasible due to expensive server storage.

So the most obvious other solution was to find something that was platform independent and also addressed all the needs of the existing product. We found the answer in the form of HTML5, JavaScript and CSS. These 3 components are inseparable. Various games and enrichment modules were then designed in HTML5. But we succeeded and finally in April, entire development of the games, enrichment modules and remedial items was shifted to HTML5 instead of Adobe Flash. . When I started to work at Educational Initiatives I worked on new games in HTML5 and conversion of previously built games in Adobe Flash to HTML5. I have developed 8 such games, remedial items and enrichments in HTML5 and JavaScript. These 8 games were such that it addressed all the needs of the existing product that is now each and every enrichment they made till date can be exported to HTML5 as it is tried and tested.

Conclusions

Since the launch of HTML5 a lot of work has been done on this platform in creating various frameworks and libraries which has led HTML5 to one or the most widely used language for game development. This is good news as if HTML5 is able to gain further popularity it could become a standard for application development and as these applications will be online they will be most easily accessible as the web has become a routine part of our lives. Its just the matter of following the right principles and using the most applicable tools or frameworks for development.

Acknowledgment

I would like to thank and acknowledge Professor Ranendu ghosh who offered his supervision for the project and I would also like to thank Arpit Metaliya and Muntaquim Bagadia who were my off campus supervisors for the project and without whose guidance all this would not have been possible.