La technique pour la mise en place de vos interfaces graphiques en JavaScript avec l’API Canvas

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Apprenez à réaliser un élément essentiel dans tout jeu : l’interface graphique.

Cette interface va servir à faire le rendu graphique de votre jeu. C’est là que se trouveront les boutons, personnage, ennemis, ou tout autre élément servant à la représentation de votre jeu.

Avec l’API Canvas c’est vraiment très simple d’implémenter tout ça.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

 La technique pour la mise en place de vos interfaces graphiques en JavaScript avec l’API Canvas

Bonjour et bienvenu sur développement facile !

Donc la cette fois vous allez apprendre à toujours dans la série de de création d’applications et de jeux avec JavaScript et en utilisant l’API Canvas va cette fois dans ce cours vous allez découvrir les interfaces graphiques c’est-à-dire grâce à l’API Canvas et à des Framework, comment créer simplement vos interfaces graphiques que ce soit le plus simple pour vous, le plus dynamique et surtout toujours très performant et très efficace. Donc comme d’habitude, vous allez récupérer les fichiers les Framework qui simplifie votre développement sur  createjs.com puis vous les intégrer. Pensez aussi à désactiver le cache de votre navigateur pendant la phase de développement après une fois que le développement sera terminé vous pourrez remettre cette ligne sans aucun problème. Et donc pour les interfaces graphiques, vous avez plusieurs solutions donc que je vais vous montrer la solution que j’ai utilisé : vous avez un manifeste vous allez charger dynamiquement toutes les images tous les sons MP3 donc tous les sons soit au format MP3 soit au format OGG suivant la compatibilité du navigateur qui va exécuter le jeu et à chaque image vous allez associer un identifiant donc par exemple imagestart vous avez un identifiant btnStart, btnCredit donc c’est ce que vous voyez ici btnStart,  btnCredit, moi j’ai fait des graphismes vraiment très très simples, le but c’est de se concentrer sur le développement de votre application de votre jeu bien évidemment vous vous avez des graphistes professionnels dans votre équipe donc vous ferrez des boutons beaucoup plus sympas et plus jolis et donc il faudra renseigner l’URL ici et un identifiant et après à la fin du chargement donc vous avez découvert dans un cours précédent le preload avec les écouteurs donc les écouteurs de chargement, le chargement de tous les éléments de tous les fichiers et donc btnStart qui correspond au bouton start vous le positionnez tout simplement avec X et Y vous lui donnez un nom vous positionner de la même façon le bouton crédit donc c’est aussi simple que ça et vous pouvez ajouter sur votre interface donc les éléments backgroundMain c’est tout simplement l’image de fond de votre jeu donc c’est cette image de fond où il y a écrit Pong DevFacile plus un petit dégradé blanc gris tout simplement. Donc cette image est chargée en 0, 0 par défaut donc il n’y a pas pas besoin de la toucher vous avez juste à ajouter btnStart et btnCredit que vous avez positionné la où vous le souhaiter en x et en y, vous les ajoutez, ensuite vous ajoutez le background du jeu aussi tout simplement, et la vue title que vous avez construit donc tout ça vous ajoutez sur le stage vous faites une mise à jour du stage, le stage c’est votre scène graphique c’est l’équivalent en flash du stage, la scène graphique vous pouvez ajouter des écouteurs sur les boutons donc des qu’on clic sur onPress ça va appeler title view qui est ici à faire une apparition de la vue title … enfin une disparition de la vue title avec une tween que vous avez vue dans le cours précédent et on va ajouter la vue title, création des personnages etc. tout ce qu’il y a à ajouter sur la vue élément de jeu c’est-à-dire quand vous cliquez sur start ça ajoute sur l’interface tous les éléments du jeu que vous reconnaissez ici le score les joueurs le CPU et la bal c’est aussi simple que ça ensuite comme éléments graphiques,  showCredits dès que l’utilisateur clique sur le bouton showCredits ça va afficher l’interfaces des crédits donc ici je vous montre ce que ça donne, voilà, l’interface des crédits, tween tout simplement et dès que l’utilisateur la re-clique c’est-à-dire qu’on a changé, on a rajouté un élément une action un événement onPress sur credits donc sur l’interface credits qui correspond à une image png tout simplement donc on va ajouter des actions utilisateur sur une image des que l’utilisateur clique on va masquer les crédits et donc ça fait disparaître l’image crédit via une tween ce que vous reconnaissez ici … disparition via une tween … donc les interfaces se gèrent vraiment très très simplement avec ce Framework donc le Framework createjs.com vous avez un manifeste où vous chargez tous vos éléments toutes vos images vous les associez à des identifiants et ensuite vous pouvez positionner tous ces éléments image, rajouter des actions dessus et apeller des fonctions JavaScript directement dessus et tout le jeu est construit de cette façon. Player c’est aussi une image ici la ball, gagner, perdre on travail comme ça avec JavaScript avec des images vous avez associer des identifiants que vous positionnez que vous pouvez déplacer, rappelez-vous le cours sur le clavier ou déplacez directement le Player donc l’image ici en boucle en appelant en continue tout simplement updatePlayer et donc ça fait cet élément, ce déplacement de la balle, de l’ordinateur ici, du joueur à gauche la mise à jour des scores en fonction des points marqués soit par l’ordinateur, soit par moi tout simplement, soit par le joueur voilà donc c’est aussi simple que ça de gérer vos interfaces donc rappelez-vous les addchild où vous ajoutez tous les éléments graphiques via les identifiants que vous avez positionné stage.update pour mettre à jour la scène graphique.

Donc de toute façon vous avez le code source complet de ce jeu en téléchargement sous ce cours vidéo avec … il est entièrement commenter si vous avez des questions posez-les sous ce cours vidéo l’équipe développement facile vous répondra. Quant à moi je vous propose de nous retrouver dès maintenant là, tout de suite dans la deuxième vidéo juste au-dessus de ce cours il y a une image cliquer-ici pour lancer la deuxième vidéo donc un lien cliquable qui va vous renvoyer directement sur la deuxième vidéo. Dans la deuxième vidéo vous allez aller beaucoup plus loin dans la création d’applications, donc d’applications de ce style en beaucoup plus évoluer en beaucoup plus complexes pour créer des applications ou des jeux performantes tout ça avec des Framework, des stratégies très précis utilisées par les experts en développement pour simplifier votre code pour éliminer 90 % debug dès la conceptions de votre application en utilisant les designs patterns donc les modèles de conceptions, des Framework de développement JavaScript donc tout ça, c’est tout expliqué dans la deuxième vidéo l’équipe développement facile répondra à toutes vos questions en priorité si vous rencontrez des difficultés dans votre développement des bugs que vous n’arrivez pas à résoudre donc je vous explique tout ça en détail dans la deuxième vidéo. Cliquez simplement sur l’image la juste au-dessus de ce cours vidéo sur le lien cliquable, moi je vous retrouve tout de suite dans la deuxième vidéo, à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Téléchargez le code source complet du jeux Pong

Retrouvez le code source commenté du jeux Pong avec l’utilisation du clavier

Downloads

  • Pong
    Pong

    Code source commenté complet du jeux pong avec les fichiers JavaScript, HTML et CSS

Montrez nous vos interfaces graphiques !

Venez poster les captures d’écrans des interfaces graphiques que vous avez réalisé avec l’API JavaScript Canvas

Créez des Jeux JavaScript / HTML5 Performants avec la Formation Gratuite Jeux Faciles!

Apprenez Comment Développer des Jeux sur Mobiles iOS / Androïd, Tablettes et le Web avec les Frameworks Phaser, Threejs...