Set video game development

 

In this post, I show you how to run html5 video game development with javascript. Among others, the tree project, basics functions to implement, the requestAnimationFrame, and a function needed to multiplatform compatibility.French version.

 

Before to begin

– know what is html;
– basic knowledge of javascript;
– reading posts Canvas tutorial.

 

It’s time to begin

Like project development, you need to create tree directories to arrange video game components.

First, make directory project named game. It will include all of the video game elements.

In this new directory, do make:
js directory including javascript files and libraries;
img directory including images files (background, sprites…);
sound directory including song files;
music directory including music files;
css directory including css files.

Arborescence Projet

Html file of the game game.html is building at the project root directory.

 

javascript code must be include in special function

To avoid some bad interactions with others javascript codes and avoid some uncontrollable effects, you must add anonymous function executed at the same time of loading page. This function will include all video game javascript code.

<script>
(function () {
})();
</script>

It’s a basic for all javascript development.

 

A set function ran on starting game

Some video game elements like canvas, sprites or mouse and keyboard interaction need to be set one time ont starting game.

<script>
// start of insulated code
(function () {

 var set = function() {
 }

 window.onload = set; // call set function on loading page
})();
// end of insulated code
</script>

 

A main function in a loop

To call some recurrent actions linked to keyboard, mouse, sprites, set a main function for this. This function is the core of the code.

<script>
// start of insulated code
(function () {

 var set = function() {
 }

 var main = function() {
 }

 window.onload = set; // call set function on loading page
})();
// end of insulated code
</script>

This function is calling in loop. To loop, you can use setInterval or setTimeout function. But for a video game, it’s not the best solution: you must to synchronize the loop with the screen refresh.

This synchronization need to use a html5 special function: requestAnimationFrame with one parameter. This parameter is a function called on refresh screen.

requestAnimId = window.requestAnimationFrame(main);

For a constant synchronization and refresh, you need to call main function by the same main function:
[main]
var main = function() {
// video game code
requestAnimId = window.requestAnimationFrame(main); // call main function on next screen refresh
}
[/javascript]

 

Don’t forget to call a first time from set function. If not, the video game will not run.

 
requestAnimationFrame function is not supporting by all navigators. For multiplatform support, you need to manage this by calling the function with the good name:

var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
  || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

You can see in code, a cancelAnimationFrame function. This cancel the next call to requestAnimationFrame.

I advise to include this function in a specific javascript library util.js.

 

The basic code to start a video game development

<script>
// start of insulated code
(function () {
 var requestAnimId;

 var set = function() {
   // le code de l'initialisation 
   requestAnimId = window.requestAnimationFrame(main); // call main function on next screen refresh
 }

 var main = function() {
   // video game code
   requestAnimId = window.requestAnimationFrame(main); // call main function on next screen refresh
 }

 window.onload = set; // call set function on loading page
})();
// end of insulated code
</script>

 

Share this post.

 

Posté dans html5Taggé game maker, requestAnimationFrame, video game project  |  Laisser un commentaire

Répondre