Je n'ai pas posté depuis très longtemps sur ce topic.
Je pense que je n'y contribuerai plus après ce post. Je vais tenter de résumer mes connaissances (limitées) sur le développement de jeu en HTML5 et en général. (en 2D je précise je ne me suis pas essayé à la 3D).
Globalement:
Pour faire un jeu en HTML5 il faut utiliser la balise HTML canvas, pilotable en Javascript. C'est via cette balise que toute la partie graphique du jeu est gérée. (Certains jeux utilisent l'API WEBGL pour le 2D mais ce n'est pas conseillé pour un débutant si on n'utilise pas de librairie ou de framework).
Il y a des algorithmes et implémentations très différentes en fonction des jeux, mais basiquement on utilise:
Des Spritesheets pour l'animation des différents personnages (Grande image contenant tout les mouvements d'un objet animé, dont on dessine partie par partie pour animer l'objet).
Les tilesets (même principe que les spritesheets, sauf que ce sont les briques élementaires qui forment une map ou un niveau, on utilise une matrice de donnée en deux dimension (des tableaux javascripts imbriqués) pour former les maps à partir de l'image du tilesets. On peux faire plusieurs couches, même faire des tiles animés.
La physique, on utilise généralement l'algorithme de collision AABB quand la géométrie du jeu est basique, même si d'autres techniques existent (ce tutoriel détaille très bien https://openclassrooms.com/fr/courses/1374826-theorie-des-collisions). Pour la physique des sauts ou projectiles, on utilise de la dynamique basique et simplifiée, révisez vos cours de Sciences Physiques !
Pour ce qui est de la programmation concrète, il est très important de précharger tout les fichiers du jeu avant de lancer la boucle d'animation. Pour cela, on peux utiliser des requêtes AJAX. Dès que l'ensemble des données est chargé, on lance la boucle d'animation. Si on ne fait pas ça, des gros bugs liés à la définition des variables et aux chargements des objets en mémoire peuvent apparaître.
Pour la boucle d'animation, un algorithme couramment et la boucle utilisant la différence de temps 𝚫Time. Cela permet d'avoir un jeu dont la vitesse n'est pas dépendante de la puissance de la machine (des FPS autrement dis des images par secondes) mais bien du temps réel. Avec un tel algorithme, si la machine ne suit pas, la fluidité des animations est diminuée mais la vitesse du jeu n'est pas anormalement ralentie.
Si vous avez l'ambition de créer un jeu multijoueur, une solution intéressante sont les websockets. (utilisables facilement avec NodeJS si vous êtes familier au javascript mais on peux les utiliser avec toute autre solution backend.)
Pour le choix des solutions:
Créer un jeu HTML5 n'est pas une mince affaire quand on part de zéro. Beaucoup de choses à gérer (l'affichage, le temps, le son , les animations, les sauvegardes, l'optimisation, les évènements, la physique, etc..).
Je vous préviens car j'ai essayé: c'est chronophage et difficile si on manque d'expérience.
Si votre but est de progresser en programmation et la programmation de jeu 2D à partir de zéro vous intéresse, je vous conseille de partir de zéro. C'est très très très formateur.
MAIS ATTENTION
Si vous souhaitez uniquement programmer un jeu , sans vous occuper de la partie la plus délicate et difficile (comme dis plus haut, affichage, son, temps, etc), Il tombe sous le sens d'utiliser un FRAMEWORK ou une LIBRAIRIE.
Ce sont des bout de code, gratuit ou non , vous permettant une API bien documentée et efficace pour programmer votre jeu et se concentrer uniquement sur celui-ci . C'est l'idéal pour commencer et il y en a une flopée.
Certes, vous développerez moins votre jeu sous l'aspect mathématique du terme. Mais vous gagnerez un temps fou et les possibilités sont très très larges. la plupart de ces moteurs sont maintenant très très puissant et vous permettront de faire à peu près tout. Bon courage !
Bonne année 2019. Merci beaucoup de ce message, des conseils et des liens.
J'ai vraiment envie de progresser en programmation, mais c'est vrai que ça fait très longtemps que je travaille sur ce jeu sans beaucoup avancer.
Comme personne ne semble intéressé par un tuto de ce type, je ne me préoccuperai plus de ça, et j'essaierai surtout d'apprendre de nouvelles choses, par exemple la POO.
Je viens de voir que PhaserJS, ImpactJS et PixiJS nécessitent un serveur local, ce qui ne me fait pas très envie, même si j'en ai déjà utilisé pour apprendre un peu de PHP.
Bon, ce topic va probablement s'arrêter là, vu que personne d'autre que vous ne s'est manifesté. Merci à tous ceux qui y sont passés, au cas où ils reviennent faire un tour par ici.
Comme je n'arrive pas à faire le préchargement des images correctement, j'ai créé un topic pour demander de l'aide pour mon jeu dans un autre sujet, dans une autre partie du forum.
- Edité par doudoulolita 5 janvier 2019 à 18:43:20
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
