Retour au parcours HTML5

Gérez les images et les animations de vos jeux HTML5 comme un pro

Dans cet atelier apprenez les techniques des pros pour gérer le chargement et l’affichage de vos images dans un jeu Web codé en HTML5.

Tout d’abord nous allons coder un « Image Loader » pour pouvoir charger les images de votre jeu en une seule fois et afficher une barre de progression. Vous contournez ainsi le problème classique des images en HTML5 : qu’elles ne se chargent pas immédiatement et provoquent un bug dans votre jeu !

 

Ensuite nous construirons une classe « Sprite » super pratique, capable d’afficher des animations image par image, issues d’une « sprite sheet ». Ainsi, vous pourrez regroupez vos images au sein d’une seule image, comme le font les pros, et construisez puis affichez n’importe quelle séquence d’images afin de créer des animations.

Cette structure sera réutilisable dans vos propres jeux vidéo et elle est parfaitement évolutive pour coller à vos propres besoins spécifiques.

Adhérez aujourd'hui

Gamecodeur c’est à partir de 8 € / mois (facturé annuellement)

Comments (4)

Excellent tuto !

(pour infos, tu peux taper directement dans ton invité de commande « cmd » pour executer un nouveau shell Dos ou « powershell » pour un nouveau shell powershell, ça va ouvrir une instance, au lieu de chercher partout l’un ou l’autre.
Exit va fermer ces instances).

Merci

Bonjour David,

Super Atelier que tu as fais là , tes conseils sont précieux et je gagne du temps en suivant tes cours.
J’ai progressé mais j’ai encore beaucoup de choses à apprendre en JavaScript / HTML 5.
Dans le chapitre chargement des images (avec les cartes)
j’ai eu cette erreur :
Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.
at Sprite.draw (http://127.0.0.1:5500/sprite.js:10:14)
at http://127.0.0.1:5500/game.js:195:16
at Array.forEach ()
at draw (http://127.0.0.1:5500/game.js:194:16)
at run (http://127.0.0.1:5500/main.js:14:5)

dans le fichier game.js :
for (let image of Object.values(imageLoader.getListImages())) {
let mySprite = new Sprite(image);
mySprite.x = Math.random() * 800;
mySprite.y = Math.random() * 600;
lstSprites.push(mySprite);
}

la classe Sprite ne prend pas pas en 1er parametre une reference d’objet mais plutôt un path non ?
j’ai donc remplacé ceci :
let mySprite = new Sprite(image);
par
let mySprite = new Sprite(image.src);

ou bien on peut aussi changer le début de la boucle for :
for (let image of imageLoader.getLstPaths()) {

en rajoutant cette methode dans la classe imageLoader:
getLstPaths() {
return this.lstPaths;
}

Si cela peut aider d’autres élèves qui ont eu ce problème..

Laisser un commentaire

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

Comments (4)

Excellent tuto !

(pour infos, tu peux taper directement dans ton invité de commande « cmd » pour executer un nouveau shell Dos ou « powershell » pour un nouveau shell powershell, ça va ouvrir une instance, au lieu de chercher partout l’un ou l’autre.
Exit va fermer ces instances).

Merci

Bonjour David,

Super Atelier que tu as fais là , tes conseils sont précieux et je gagne du temps en suivant tes cours.
J’ai progressé mais j’ai encore beaucoup de choses à apprendre en JavaScript / HTML 5.
Dans le chapitre chargement des images (avec les cartes)
j’ai eu cette erreur :
Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.
at Sprite.draw (http://127.0.0.1:5500/sprite.js:10:14)
at http://127.0.0.1:5500/game.js:195:16
at Array.forEach ()
at draw (http://127.0.0.1:5500/game.js:194:16)
at run (http://127.0.0.1:5500/main.js:14:5)

dans le fichier game.js :
for (let image of Object.values(imageLoader.getListImages())) {
let mySprite = new Sprite(image);
mySprite.x = Math.random() * 800;
mySprite.y = Math.random() * 600;
lstSprites.push(mySprite);
}

la classe Sprite ne prend pas pas en 1er parametre une reference d’objet mais plutôt un path non ?
j’ai donc remplacé ceci :
let mySprite = new Sprite(image);
par
let mySprite = new Sprite(image.src);

ou bien on peut aussi changer le début de la boucle for :
for (let image of imageLoader.getLstPaths()) {

en rajoutant cette methode dans la classe imageLoader:
getLstPaths() {
return this.lstPaths;
}

Si cela peut aider d’autres élèves qui ont eu ce problème..

Laisser un commentaire

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