Vous allez apprendre à créer des jeux avec l’API JavaScript Canvas.
Dans cette vidéo vous allez voir comment créer une barre de progression pour le chargement de votre jeux sur le navigateur du visiteur.
Tout est expliqué dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez une progression du chargement avec JavaScript et Canvas – loading in progress
Bonjour à tous et bienvenu sur Développement Facile.
Dans cette nouvelle série de cours dédiée à HTML 5 et à JavaScript, vous allez apprendre à créer des jeux avec l’API Canvas. Il y a quelques semaines dans les cours de développement facile vous aviez commencé à découvrir l’API Canvas, comment utiliser les fonctionnalités de dessins et les fonctionnalités de base, bien là vous allez aller beaucoup plus loin à travers une série de cours pour créer des jeux vidéo directement avec l’API Canvas de JavaScript. Donc ensemble on va voir plusieurs jeux, ce qui va vous permettre à vous aussi petit à petit de progresser dans la création de jeux avec l’API Canvas de JavaScript.
Là le but c’est tout simplement de recréer le jeu pong, donc dans ce premier cours vous allez apprendre à effectuer une barre de chargement comme vous voyez ici, tout en JavaScript c’est-à-dire que là, vous voyez dans le debug, le chargement de tous les éléments donc des images ici, vous avez le chargement de toutes les images, des sons, les sons au format MP3 du jeu et donc tout ça c’est un chargement dynamique et vous allez apprendre à créer cette petite barre de progression tout simplement, et après vous avez un jeu « classique » et donc dans les prochains cours vous apprendrez à développer ce jeu. Et comme ça, ça vous donnera un modèle pour apprendre à utiliser les Frameworks JavaScript propres à ce jeu et donc créer pour vos propres jeux et applications performantes.
Alors tout de suite, je vous montre de quoi il en retourne donc vous avez la classe mail.js rappelez-vous, il y a quelques semaines la gestion du cache d’un fichier JavaScript lorsque vous êtes en phase de développement donc là forcément je désactive le cache et je force le navigateur à recharger à chaque fois une nouvelle version du fichier JavaScript et là vous avez la div avec l’API Canvas, avec le Canvas, la largeur et la hauteur de la div que vous allez utiliser pour créer le jeu flash.
La barre de chargement, là aujourd’hui vous avez le code source évidemment complet et commenté, mais là je vais vous expliquer la barre de chargement, donc déjà on récupère la balise Canvas, notre div, et ensuite très important il y a d’autres include, create.js, préload.js notamment les plus importants, je vous conseille de vous rendre sur ce site Internet, createJS.com pour télécharger leur Framework, leur bibliothèque de code JavaScript qui est vraiment très performant et ça va littéralement simplifier votre développement JavaScript.
Codes sources pouvant VOUS intéresser :
gSkinner pour ceux qui connaissent, vous devez le reconnaître il est également un excellent développeur ActionScript, actionscript2, actionScript3, alors la barre de progression, on va créer un graphique comme vous avez vu dans les cours précédents avec une couleur, donc le code hexadécimal de la couleur, le code RGB de la même couleur. On crée un container pour la barre de chargement, là on crée un dessin pour notre barre avec un graphique évidemment, une taille pour la barre, on positionne la barre, on la centre en fait, tout simplement dans la zone du Canvas, du jeu et vous ajoutez cette barre sur le stage donc c’est le stage c’est la zone graphique en fait le stage on à créer une variable ici, c’est la scène graphique de l’application, ça équivaut au stage que vous avez en ActionScript donc votre scène graphique donc vous ajoutez votre barre de progression dans le stage ici, le container barre, tout simplement, que vous avez là et ensuite qu’est-ce que vous faites ? Et bien vous allez activer la classe preload.js donc initialiser le chargement, installer le plug-in de son et lancer donc ici, les écouteurs donc sur progression vous appelez handleprogress, la fonction handleprogresse qui est juste en dessous sur l’événement onComplete vous allez rappeler handlecomplete ici, et onFileLoad vous allez appeler la fonction onFileLoad, là vous lancer le chargement de tous les éléments du jeu donc le manifeste il est où ? Il est là, c’est ici ou vous indiquez les URL avec l’identifiant, pour chaque URL, chaque image, vous avez un identifiant, pareil pour les MP3 vous pouvez charger soit le fichier au format MP3, soit au format ogg comme ça le système s’adapte automatiquement, soit il lit via HTML 5 le fichier au format ogg, si ce n’est pas possible il va lire le fichier via le flash Player au format MP3, comme ça vous serez sûr que votre jeu va fournir du son à votre joueur, soit via le flash Player avec le format MP3, soit via HTML 5 directement avec le format ogg, si vous listez tous les fichiers à charger avec un identifiant, cet identifiant ça permettra de réutiliser le fichier dans votre code JavaScript donc là vous chargez, lancer le chargement des fichiers manifestes donc c’est un tableau tout simplement un tableau d’objet, et ici vous écoutez donc vous faites progresser la barre avec event.loaded, le pourcentage de chargement, donc event.loaded, je vais rajouter en commentaire le pourcentage de chargement total de l’ensemble des fichiers et vous faites un ratio quoi loaderWidth, la taille de votre barre de chargement que vous avez définis à taille de la barre de chargement et voilà, vous faites à chaque fois que les fichiers vont charger, vont progresser, la barre de chargement va devenir de plus en plus grande, une fois que tous les éléments du manifeste sont chargés, tous ces éléments-là sont chargés, il faut masquer la barre de chargement, soit vous faites un loader.visible = false, vous la masquez, moi je vous conseille de carrément la supprimer un stage.removeChild(loaderBar), ça va libérer de la mémoire du coup c’est mieux, prenez l’habitude, quand vous avez plus besoin d’un objet graphique dans votre jeu, dans votre application vous le supprimez du Canvas via un removeCild tout simplement. Et là lorsqu’un fichier est chargé ici, on crée l’image par exemple ou le son et donc la si tous les fichiers du manifeste sont chargés donc .lenght=totalLoaded, on compte totalLoaded il doit être égal à zéro donc c’est le nombre de fichiers chargés ici, donc on l’incrémente à chaque fois, parce que ça à chaque fin de chargements d’un élément du jeu ici et bien, on rajoute, on incrémente cette zone et donc dès que tout est chargé on ajoute les éléments à la fin du jeu ou alors vous pouvez bien ajouter ici, très bien faire ça, le mettre là, donc quand tous les éléments du jeu sont chargés vous faites ça donc ça fait que vous n’avez plus du tout besoin de handleFileload, donc ça c’est à la fin d’un chargement d’un élément alors il est là, fichier chargé, je vais rajouter un seul élément de la liste et charger donc je mets chargement, un élément par un, et bien vous avez plus besoin de ça donc vous le désactiver tout simplement, vous désactivez ce code et donc là je renvoie bien évidemment les fichiers sur le ftp ici, donc vu que le cache est géré, en fait on oblige le navigateur a recharger le fichier à chaque fois, le chargement s’effectue et vous avez exactement le même résultat donc en fait le jeu est encore plus optimisé, tout simplement parce que il y a ça qui est inutile donc du coup je vais le supprimer ça ne sert à rien, voilà on n’en a pas besoin, du coup de handleComplete, là aussi je le supprime, donc je viens de voir cette optimisation du jeu que je n’avais pas vu, voilà je sauvegarde, je renvoie par FTP tous les fichiers sur le serveur et je lance le chargement et qu’est-ce qui se passe ?
Tout se charge, le fichier, le jeu fonctionne toujours, donc en fait je vais carrément supprimer le code qui ne sert à rien, ce n’est pas la peine de garder du code inutile, là c’est en commentaire, voilà ça y en a pas besoin du coup et ça je l’enlève, je remets à jour le jeu et donc la barre de progression fonctionne toujours bien évidemment. Voilà chargement du jeu en cours, le jeu est chargé et vous pouvez également y jouer donc regardez, c’est très simple à mettre en place une barre de progression suffit d’insérer, je vous répète une dernière fois le preload, bien sur le main on en a besoin, le main il faut savoir qu’il est appelé dès que le DOM est chargé on appelle la fonction main, aussi simple que ça, vous renseignez le manifeste vous créez les graphismes de votre barre ici pensez bien à l’ajouter sur la scène stage.addChild, vous créez l’objet preload, preloader il doit être déclaré ici, et donc vous affectez les événements, preloader la classe diffuse des événements, vous les affectés à vos fonctions en local ici, voilà et là tout simplement donc là on crée une image, un objet image dès qu’elle est chargée, et à la fin du chargement on ajoute les éléments graphiques du jeu sur le jeu voilà.
Maintenant c’est à vous de jouer, de mettre en place, de commencer à travailler un peu plus profondément avec l’API Canvas, vous pouvez mettre en place le chargement d’un ensemble de fichiers grâce à ça, à manifeste et à la bibliothèque vous trouverez sur createJS.com et vous pouvez justement lancer le chargement d’un ensemble de fichiers en écoutant les événements adéquates, donc maintenant si vous avez des questions comme d’habitude posez les directement sous cette vidéo, vous trouverez également sous cette vidéo le code source complet en téléchargement et moi je vous invite dès maintenant à aller beaucoup plus loin, juste au-dessus de cette vidéo il y a une image et un lien cliquable qui vous invite à aller dans la deuxième vidéo c’est-à-dire dans la deuxième vidéo, vous allez tout savoir pour créer des jeux, pour utiliser le potentiel de JavaScript, HTML 5 et créer des jeux de plus en plus performants ou des applications de plus en plus performantes avec l’API canvas, avec les fonction JavaScript, des frameworks JavaScript qui simplifies votre développement, vous allez aller vraiment beaucoup plus loin dans la création d’applications ou de jeux avec JavaScript et HTML 5, je vous invite dès maintenant au-dessus de cette vidéo à cliquer sur l’image cliquer ici pour lancer la vidéo deux, et à aller beaucoup plus loin donc soit sur l’image, soit sur le lien, moi je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle] [/ppmaccordion]
Téléchargez le code source du jeux Pong
Retrouvez le code source commenté du jeux pong et notament de la barre de chargement qui vous a été présenté dans la vidéo
Téléchargement du code source Pong
Posez vos questions sur ce cours
Utilisez la zone commentaire pour poser vos questions sur les barres de chargement.