Zelda les Mystères de Phaser CE

Nazim Boudeffa
Aug 31, 2018 · 4 min read

Maintenant que Phaser 3 a été crée que reste il de la version précédente avec laquelle on s’est amusé pendant assez de temps pour qu’on ai encore envie d’y revenir avec notre logique du départ ?

Suite au passage à la version CE, cela fait maintenant un certain temps que je ne fais plus que suivre les développement lié à cette version précisément car elle est orientée communauté d’où son nom Phaser Community Edition

J’ai donc voulu faire un petit jeu qui s’inspire de mes meilleurs moment entrain de chercher la princesse Zelda dans ma tendre enfance sur ma console nintendo et en pixel art, d’où m’est venu l’idée de faire un jeu qui s’appelle Zelda Mystery of Phaser CE, ne nous emballons pas trop vite car créer un jeu ça demande du temps

Zelda Mystery of Phaser CE

Si je vous donne ce code tel quel qu’en pensez vous ? La réponse sera certainement que ce n’est pas amusant, et effectivement, je vous l’accorde car on a tous envie de faire notre propre expérience de développement de jeu

Alors pour être franc avec vous j’ai voulu créer un cours sur openclassroom mais j’ai pas réussi à le développer plus pour des raisons de ces mystères de Phaser CE et pas que avec Link et Zelda, et ce qui m’a prit le plus de temps c’est de pouvoir continuer à suivre ce qui se passe côté développement chez photonstorm mais sachez que je suis assez présent dans la communauté pour savoir où ça en est sans avoir à m’impliquer plus aujourd’hui et rester concentré sur la version 2/CE

Après maintes tentatives de créer le cours sur openclassroom j’ai découvert Medium et je trouves que c’est beaucoup plus simple d’écrire un article qui traite d’un sujet particulier comme mon article sur le développement d’un jeu avec Phaser CE

Premier tuto d’une série sur Zelda MOP

Donc vous imaginez un peu ce que ça pourrait donner comme jeu, des exercices à faire pour s’améliorer en développement Javascript avec PhaserJS mais avec un monde entièrement dédié à la quête de Link dans Hyrule

Qu’avons nous besoin pour commencer à développer ?

La première chose qui me vient à l’esprit c’est de récupérer tout le pixel art et ne se focaliser que sur le codage

Lorsque je streamais des cours sur un site dédié aux codeurs qui souhaitaient partager un peu de leur temps avec du monde juste avant de lancer ce projet j’ai fais la connaissance d’un développeur qui avait créé un repository sur GitHub que j’ai cloné sur l’un de mes comptes bidons pour la simple raison que je ne sais toujours pas quel droit s’applique quand à l’utilisation de ces ressources artistiques

Vous pouvez donc observer le spritesheet de Link ainsi que le tilemap du monde d’Hyrule

Le Spritesheet de Link
Le Tileset de Hyrule

On a donc ensuite besoin de créer une map et d’y ajouter Link

Pour créer une map avec un tilset je vous laisse suivre un des tutos qui traite de Tiled Map Editor et vous laisser voguer à votre imagination, mais je vous laisse une petite initiation à cet art subtile

Un des tutos d’une série sur Zelda MOP

Pour la partie animation de Link la version actuelle l’animation est très simple avec le spritesheet comme il est en créant dans la fonction update() du projet le code suivant

player.body.velocity.x = 0;                           player.body.velocity.y = 0;                                                   var speed = 160;                                                   if (cursors.right.isDown)                           
{
game.camera.x += 4;
player.body.velocity.x = +speed;
player.animations.play('right');
}
else if (cursors.up.isDown)
{
game.camera.y -= 4;
player.body.velocity.y = -speed;
player.animations.play('up');
}
else if (cursors.left.isDown)
{
game.camera.x -= 4;
player.body.velocity.x = -speed;
player.animations.play('left');
}
else if (cursors.down.isDown)
{
game.camera.y += 4;
player.body.velocity.y = +speed;
player.animations.play('down');
}
else
{
player.animations.stop();
}

Ce qui correspond à associer à chacun des boutons directionnels du clavier une animation particulaire avec une vitesse constante égale à 160 et que l’on aura paramétré au préalable

Mais si vous souhaitez plus de précision il suffit de passer par un site qui s’appelle https://www.leshylabs.com/apps/sstool/ et qui permet de faire un fichier json avec le spritesheet puis de le charger facilement avec la fonction atlasJSONHash

atlasJSONHash

Je vous laisse donc le lien vers la version actuelle de Zelda Mystery of Phaser CE mais ça reste un secret entre nous

Pour la suite des mystères de Phaser CE et pas forcément qu’avec Link et Zelda je vous laisse naviguer sur ma chaine YouTube

Nazim Boudeffa

Written by

Take it easy man ! I am a dudeist and never finish something. Read my wip books https://leanpub.com/u/nazimboudeffa

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade