Recherche pour :
Panier 0
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne

Se connecter

Mot de passe perdu ?

Vous n'êtes pas encore membre? inscrivez-vous
  • phone +33766664691
  • email contact@develop4fun.com
  • Tech & Gadget
  • Unity
  • Forums
  • Contact
0
Develop4fun
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne
perm_identity Commencer

Blog

Develop4fun > Jeux Vidéo > Programmation > HTML5 > Un game engine en HTML5, concepts de base

Un game engine en HTML5, concepts de base

access_time14 décembre 2017
perm_identity Publié par Antonella "Lythande"
folder_open HTML5, Javascript, Jeux Vidéo, Tuto HTML 5, Tutoriel
html
(Dernière mise à jour: 1 octobre 2019)

Concepts de base pour un game engine en HTML5

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

5 2 votes
Évaluation de l'article
Vues : 1 382
Mots clés: assetsbases d'un game enginecanvasContext 2dcréer un moteur de jeugame engineHTML 5moteur de jeuplateformer 2Dshaders
À propos de 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

Plus d'articles de Antonella "Lythande"
Précédent HTML5 et Game Developement
Suivant Game Loop et requestAnimationFrame
S’abonner
Notifier de
guest
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

2 Commentaires
le plus ancien
le plus récent le plus populaire
Inline Feedbacks
Voir tous les commentaires
Céline
Céline
3 années il y a

Comment on fait pour avoir la console en noir ?

0
Répondre
Antonella "Lythande"
Auteur
Antonella "Lythande"
3 années il y a
Reply to  Céline

Pour avoir des outils de développement avec une couleur noir il suffit de cliquer sur la petite roue en haut sur la droite et de choisir le thème “sombre”.
Regarde l’image :
https://www.develop4fun.fr/console/

0
Répondre
Articles récents
  • L’histoire des jeux vidéo : les années 2000
  • [Programmation] 2020: les évolutions techniques et technologiques
  • Dell XPS 17 : luxe et sobriété pour un PC en grand format
  • Surface Laptop GO : un produit surface à tarif serré
  • Radeon RX 6800 XT enfin au niveau de Nvidia
Le blog d’Antonella
  • Une liste d’outils, de ressources et d’applications gratuites pour développeurs

    Aujourd’hui on fait chauffer les marques-pages car je te propose une liste d’outils, de […]

  • Le travail à distance, la productivité et la pression

    Aujourd’hui on va parler de travail à distance, de productivité et de pression. Je vois les […]

  • Space Invaders avec Love2D

    Space Invaders est surement l’un des jeux qu’on code dès le début de notre parcours de […]

Commentaires récents
  • Adr dans 2. C# vs VB .NET
  • What is champ de type time en in HTML – Advertisments dans Trois techniques pour les nouveaux formulaires HTML 5
  • Etienne dans Quel avenir pour un développeur web face à l’intelligence artificielle?
  • Antonella "Lythande" dans C’est quoi un éditeur de texte ?
  • Stas dans C’est quoi un éditeur de texte ?
Game Universe
  • La mise à jour de l’inventaire de Fallout 76

    La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

  • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

    Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

  • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

    Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

Comportementaliste animalier
    Étiquettes
    Aligner du texte ASCII balise HTML balises HTML classe css Concepts avancés Cours HTML 5 CSS CSS3 CSS 3 Développeur Développeur Web feuilles de styles feuilles de styles en cascades fichier CSS hexadécimal Histoire des Jeux Vidéo HTML 5 HTMLOptionElement id css IDE introduction Intégrateur JavaScript la taille du texte liste HTML Microsoft navigateur programmation orientée objet Responsive Responsive Web Design RGB smartphones Structure du langage style d'une balise texte html Tuto CSS 3 Tuto HTML 5 Unity Visual Studio Web-designer windows 10 WordPress WordPress 5 XHTML
    • Develop4fun IT
    • Création de sites web
    • Game Universe
    • Comportementaliste Animalier Grenoble
    • Luxury Costa Rica
    • Dourceurs d’aquarelle
    Sécurité du site Web
    Game Universe
    • La mise à jour de l’inventaire de Fallout 76

      La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

    • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

      Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

    • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

      Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

    © 2021 Develop4fun. Tous droits réservés
    keyboard_arrow_up wpDiscuz
    2
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x
    ()
    x
    | Reply
    "