Un game engine en HTML5, concepts de base

access_time14 décembre 2017
perm_identity Posted by
folder_open HTML5, Javascript, Jeux Vidéo
html
Travailler sur un jeu vidéo, c’est travailler avec le code : l’API pour l’interaction de l’utilisateur, la gestion graphique et de l’animation, les timings, etc. En plus de cela, nous devons gérer des assets (ou des ressources) de différents genres : sprite, arrière-plan, son, fichiers externes (dans lequel stocker des données telles que des sauvetages, des maps). En pensant à la 3D, nous avons aussi des modèles, des matériaux, des shaders.
Pour tout gérer de manière harmonieuse et pour éviter de tout refaire pour chaque projet, il faut donc créer un moteur de jeu, ou un framework orienté vers le développement de jeux vidéo. Dans ce guide, nous apprendrons à en créer un à partir des bases, afin d’avoir un meilleur contrôle et une possibilité d’optimiser le code autant que possible.

Cependant, sachez qu’en utilisant un framework pré-packagé, vous pouvez immédiatement passer à la conception et au développement de votre idée, en économisant beaucoup de temps que vous devrez consacrer à la création du moteur de jeu. Dans l’annexe au guide, nous examinerons une liste de frameworks les plus valables existant sur le net.

Canvas et Context 2d

Grâce à l’élément canvas de HTML5, il est possible d’exploiter l’API dédiée au rendu de formes et d’images, sans avoir besoin d’utiliser des plugins externes pour le navigateur (comme Flash).

Nous créons ensuite une page HTML simple (index.html), qui agit comme un conteneur :

 
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Guide HTML5</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. </head>
  7. <body>
  8. <div id="GameDiv" >
  9. <canvas id="GameCanvas" >
  10. Votre navigateur ne supporte pas l'élément Html5 Canvas
  11. </canvas>
  12. </div>
  13. </body>
  14. </html>

Nous verrons qu’il sera commode d’insérer le <canvas> dans un <div>, bien sûr nous définissons les id, afin de faire facilement référence aux éléments relatifs dans le code JavaScript.

Dans les navigateurs qui ne supportent pas la balise <canvas>, le texte à l’intérieur sera affiché et nous ne pourrons pas profiter des fonctions qui y sont liées.

Nous créons ensuite un fichier javascript (main.js), qui gérera les différentes parties de la structure, et l’attachera à notre conteneur HTML en tant que code externe appelé dans la balise <head> :

 
 
  1. <script language="javascript" src="main.js" ></script>

 

Dans le fichier main.js, nous créons finalement l’objet principal du moteur de jeu, grâce à la fonction constructeur du jeu :

 
 
  1. function Game() {
  3. // la <div> qui contient l'élément canvas
  4. this.div = document.getElementById("GameDiv");
  5. this.div.style.width = "768px";
  6. this.div.style.height = "512px";
  8. // l'élément <canvas>
  9. this.canvas = document.getElementById("GameCanvas");
  10. this.canvas.setAttribute("width","768");
  11. this.canvas.setAttribute("height","512");
  12. this.canvas.defaultWidth = this.canvas.width;
  13. this.canvas.defaultHeight = this.canvas.height;
  15. // cache le curseur
  16. this.canvas.style.cursor = "none";
  18. // context 2d
  19. this.ctx = this.canvas.getContext("2d");
  20. if(!this.ctx){
  21. alert("Votre navigateur ne supporte pas le HTML5, mettez-le à jour !");
  22. }
  23. }
  25. function StartGame(){
  26. // crée une instance de game
  27. game = new Game();
  28. }
  30. window.addEventListener('load', function() {
  31. StartGame();
  32. }, true);

 

Comme nous pouvons le voir, l’objet Game enregistre l’identifiant de notre élément canvas dans une variable publique locale « this.canvas » : de cette façon, nous pouvons accéder à l’élément canvas depuis n’importe quel objet référençant une instance de Game (voir plus loin comment faire).

Nous modifions ensuite les dimensions en fonction de nos préférences et sauvegardons ces informations dans deux variables (defaultWidth et defaultHeight) dans l’objet / élément canvas, que nous utiliserons plus tard pour implémenter le plein écran.

Pour utiliser les fonctions de rendu, il faut alors obtenir l’objet Context 2d de l’élément canvas.
Remarque: Nous pouvons vérifier si HTML5 est pris en charge par le navigateur utilisé, en vérifiant la variable this.ctx et éventuellement afficher un message dans lequel nous demandons à l’utilisateur de mettre à jour son navigateur, ou de le rediriger vers une autre page.

Enfin nous créons une fonction StartGame exécutée à la fin du chargement du document, qui prendra soin de créer une instance de notre fonction Game (nous utilisons la première lettre minuscule pour la distinguer de la fonction / objet).

Après avoir fait cela, nous aurons jeté les bases pour commencer à travailler sur un plateformer 2D en HTML5. Nous pouvons vérifier que tout fonctionne en utilisant les outils de développement du navigateur.

canvas html5

Tags:
About Antonella "Lythande"

Lythande, la conceptrice du site : son histoire commence grâce à Marion Bradley Zimmer et Game Republic. Experte du secteur des jeux vidéo, elle a écrit pour les magazines les plus importants de l’Italie, tels que Game Republic, PS Mania et Pokémon Mania. @LythandeLister

2 Comments

Join the discussion and tell us your opinion.

Laisser un commentaire