Comme le savent ceux qui ont lu mes précédent tutoriels, je suis un adepte des jeux isométriques. Nous allons ici les aborder une fois encore, mais maintenant en HTML et Javascript. Il est cependant difficile d'avoir un rendu aussi bon qu'avec flash, et de garder une compatibilité parfaite avec les anciens navigateurs. Le développement de jeux en HTML à un grand avantage : il ne pose pas les problèmes de compatibilité que rencontre flash aujourd'hui (sur iOS par exemple), mais il peu cependant poser d'autres problèmes sur les anciens navigateurs selon les technologies utilisées. Nous allons voir ici quelques exemples de petits moteurs isométriques avec différentes technologies. En effet, plusieurs méthodes sont utilisables, chacune ayant ses avantages et défauts.

Chapitre 1 : Moteur isométrique et HTML

Pour commencer, nous allons revoir brièvement le concept d'un moteur isométrique, et surtout comment nous allons pouvoir en coder un en HTML et Javascript.

Chapitre 2 : Dessiner en JavaScript avec la balise Canvas

Dans ce second chapitre nous allons voir comment afficher les objets de notre jeu en JavaScript à l'aide de notre balise Canvas.

Chapitre 3 : Classe Tile

Nous allons créer une classe “Tile” qui gérera les tuiles isométriques.

Chapitre 4 : Classe Map

Dans ce quatrième chapitre, nous allons réaliser la classe “Map”.

Chapitre 5 : Génération de sprites

Nous avons déjà nos deux premières classes prêtes, il est temps de voir ce que ça donne !

Chapitre 6 : Le classe Player

La classe Player va nous permettre … d'ajouter le héros !

Chapitre 7 : Un petit jeu !

Enfin, nous allons réaliser un petit jeu, pour terminer cette partie “pas à pas”.

Chapitre 8 : Emballage !

Nous allons maintenant voir comment préparer un moteur pour une utilisation réelle !

A partir d'ici, les cours seront assez différents. Pour commencer, ils s'appuient tous, au niveau du code, sur le résultat donnė (en .zip) à la fin du chapitre 8.

Ensuite, ces cours sont d'un niveau plus avancé et concernent des points précis, utiles au développement de jeux professionnels notamment. Évidemment, un niveau un peu supérieur peut être attendu.

Chaque chapitre aborde un point précis, de façon a éviter la lecture de cours qui ne vous intéressent pas.

Carte XML

Nous allons voir comment charger un carte créée dans un fichier XML.

Carte PNG

Une seconde annexe sur les cartes au format PNG, ce qui peu être très utile, mais également complexe à mettre en oeuvre en JavaScript.

Carte JSON

Enfin, une annexe sur les cartes au format JSON, beaucoup plus simples à traiter, mais bien utiles en JavaScript tout comme en ActionScript 3.

L'A* en JS

Dans cette annexe, nous allons voir le principe du PathFinding, et comment transcrire l'algorithme A* en JavaScript, pour pouvoir l'utiliser dans nos jeux.

Mise en place : modification de la classe Map

Nous allons maintenant modifier notre moteur pour permettre l'utilisation de la classe “Pathfinder” !

Mise en place : modification de la classe Player

Ultime étape : animer le déplacement du joueur lors du clic sur une tuile !

Et voila ! Nous somme à la fin de cette introduction aux jeux isométriques en HTML 5 et JavaScript ! J'espère que ce cours vous aura aidé, et n'hésitez pas à venir en parler sur le forum !