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 > HTML5 et Game Developement

HTML5 et Game Developement

access_time14 décembre 2017
perm_identity Publié par Antonella "Lythande"
folder_open HTML5, Javascript, Jeux Vidéo
html5
(Dernière mise à jour: 14 janvier 2019)

Comme on le sait, HTML5 n’est pas seulement l’acronyme de la cinquième version du langage de balisage d’hypertexte, mais aussi un ensemble de technologies introduites ces dernières années pour le développement d’applications Web. C’est des technologies si puissantes qu’elles permettent également de créer des applications complexes telles que jeux vidéos.

Dans ce guide, nous allons examiner de nombreux aspects de la programmation d’un jeu vidéo avec HTML5 et commencer par définir les éléments de base que nous utilisons pour en composer un :

  • markup HTML (partie statique), qui fournit le conteneur du jeu et dans laquelle nous définissons l’API à utiliser et les bibliothèques à lier.
  • du code JavaScript (partie dynamique) est le code que nous utilisons pour exploiter l’API mise à disposition par le conteneur et pour créer notre moteur de jeu.

Au niveau du conteneur, nous introduisons l’utilisation de l’élément canvas, qui apporte avec lui les API pour gérer le rendu des images et des primitives, pour produire des applications animées, des effets et des jeux vidéo.

Grâce à la librairie graphique WebGL, intégrée aux navigateurs récents, vous pouvez enfin profiter des API OpenGL, pour créer des applications et des jeux 3D directement en ligne, mais dans ce guide, nous traiterons tout simplement la réalisation complète d’un jeu 2D, dans tous les cas, il y aura une section dédiée à WebGL, qui montrera les principales fonctionnalités, l’importation d’un modèle, les mouvements dans l’espace 3D.


Pourquoi HTML5 ?

Si nous regardons le Web, la plate-forme Flash est de moins en moins utilisée et c’est pour cela que l’HTML5 n’aura pas de rivaux. Même sur mobile, les perspectives sont certainement encourageantes, voici une très courte liste d’avantages qui profiteront de plus en plus à ceux qui travaillent en HTML5 :

  • HTML5 n’a pas besoin de plugins pour fonctionner : toutes les fonctionnalités sont déjà incluses dans les navigateurs ;
  • les applications créées, seront exécutables sur n’importe quel navigateur compatible HTML5, quel que soit le système d’exploitation (Windows, Mac, Linux, Android, etc.)
  • Il existe des frameworks comme Apache Cordova (PhoneGap) ou Titanium pour convertir nos jeux en applications natives pour les appareils mobiles iOS et Android et Windows Phone de manière simple et rapide.
  • Les logiciels de création de jeux vidéo n’exportent plus vers la plateforme Flash, alors que beaucoup supportent ou soutiennent l’exportation de projets en HTML5.

 

Navigateurs pris en charge

Le W3C a annoncé que la première version standard HTML5 était prête en 2014 et que, depuis quelques années, HTML5 est supporté par la plupart des navigateurs qui, dans les dernières versions, ont ajouté toutes les fonctionnalités que nous utiliserons dans le guide.

Les applications que nous allons examiner dans ce guide ont été testées et fonctionnent sur Chrome, Firefox, Internet Explorer 10), Safari et Opera.


Prérequis et connaissances

Pour bien comprendre les concepts expliqués dans cette série d’articles, il est nécessaire d’avoir les bases de la programmation, de préférence la connaissance du langage JavaScript et de savoir comment est structuré une page HTML (concept de balises, styles et scripts).

 

Le contenu du guide

Le guide se compose de quatre parties :

  • Mise en place d’un moteur de jeu de base : nous allons créer un framework de base, qui va nous permettre de charger des ressources graphiques et sonores, de gérer le rendu et les évènements liés aux objets du jeu.
  • Input et interface utilisateur : nous allons comprendre comment gérer l’entrée depuis la souris, le clavier et l’écran tactile, comment créer des interfaces graphiques (GUI), dessiner du texte avec une police de votre choix.
  • Créer un jeu : en utilisant le framework créé dans les chapitres précédents, nous allons enfin créer un simple jeu de plateforme style megaman.
  • Optimisation et expansion du jeu : nous verrons comment optimiser les performances et améliorer notre jeu en y ajoutant une partie sociale, comment tirer parti des technologies plus avancées: Box2D pour la physique, WebGL pour la 3D et Node.js pour le réseautage.

 

Logiciels et outils à utiliser

Pour suivre les exemples proposés dans le guide, nous aurons besoin de peu de logiciels de base:

  • Un navigateur équipé d’une console pour déboguer notre code (on recommande Firefox)
  • Un éditeur de texte pour écrire le code (parmi les meilleurs Notepad++, un éditeur gratuit et opensource, également téléchargeable en version portable (sans installation), ou SublimeText : éditeur très valide, mais payant, vous pouvez toujours télécharger une version d’essai)
  • Pour certaines parties du guide, comme celle sur WebGL, un serveur HTTP sera requis. Vous pouvez télécharger des fichiers sur votre site Web ou utiliser un programme exécutable sans installation comme Mongoose, qui démarrera un serveur Web local temporaire sur votre ordinateur.
4.7 3 votes
Évaluation de l'article
Vues : 1 367
Mots clés: canvasintroductionOpenGLW3CWebGL
À 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 2. Hello World avec XNA !
Suivant Un game engine en HTML5, concepts de base
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.

1 Commentaire
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

Trop cool merci ! J’ai hate de lire la suite

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
    1
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x
    ()
    x
    | Reply