Yeoman Phaser Generator

Publié le .

Phaser 2 Ma vie de geek
Yeoman Phaser Generator

Bonne nouvelle ! Il existe un générateur Yeoman pour faire des jeux avec Phaser. Il a été développé par Jeremy Dowell et il le présente sur cette page. personnellement, je trouve que c’est vraiment une bonne nouvelle. En effet, je débute avec Phaser et j’aime bien quand tout est bien organisé. Mais je manque cruellement d’expérience pour faire cela avec Phaser. Donc, je suis très heureux que Jeremy Dowell ai fait un générateur qui de par lui-même structure le code.

Le principe

On installe sur son ordinateur le generator-phaser-official. Ensuite, dans un terminal depuis un dossier, on lance une ligne de commande qui créait un échafaudage, une structure à partir de laquelle on codera son jeu. Au fur et à mesure que l’on sauvegarde ce que l’on code, les fichiers du dossier dist sont remplis. Le dossier dist contient le jeu en lui-même. En gros, c’est lui qui sera déployé pour que l’on puisse jouer au jeu.

L’installation sur un ubuntu 13.10

Je vais vous parler de mon expérience à propos de l’installation de ce générateur.

J’ai ouvert mon terminal et j’ai du taper sudo npm install -g yo generator-phaser-official pour installer generator-phaser-official. En tapant seulement npm install -g yo generator-phaser-official, j’avais des erreurs...

Pour votre information, npm était déjà installé sur mon ordinateur. Si ce n’est pas le cas sur le votre et que vous êtes sous ubuntu, faites d’abord un sudo apt-get install npm. Si vous rencontrez des problèmes, Google est votre ami ! J’aimerais pouvoir vous aider, mais je ne peux pas prévoir tous les cas de figure et c’est un peu en dehors de l’objet de ce billet.

Débuter avec generator-phaser-official

Comme indiqué sur cette page, j’ai créé un dossier pour mon projet puis m’y suis rendu. J’ai lancé dans le terminal la ligne de commande : $ mkdir nom-durepertoire-pour-mon-projet && cd $_ puis $ yo phaser-official. J’ai ensuite répondu au questions :

Le générateur a créé la structure et soi-disant installé les dépendances. Un simple jeu est présent comme " Hello world ! ". Il permet de voir le wokflow.

J’ai ensuite tapé $ grunt qui a construit l’index et d’autres fichiers nécessaires au jeu final ( dans dist ). Pour votre information, au fur et à mesure que l’on va coder et sauvegarder, le code sera compilé dans le répertoire dist. Le navigateur par défaut est également ouvert à l’url du serveur sur le port 9000. Lors des sauvegardes, lorsque le code est compilé, la page se recharge avec les changements...

On a ceci comme structure :

  1. ── Gruntfile.js
  2. ├── assets
  3. │ ├── preloader.gif
  4. │ └── yeoman-logo.png
  5. ├── bower.json
  6. ├── config.json
  7. ├── css
  8. │ └── styles.css
  9. ├──dist
  10. │ ├── assets
  11. │ │ ├── preloader.gif
  12. │ │ └── yeoman-logo.png
  13. │ ├── css
  14. │ │ └── styles.css
  15. │ ├── js
  16. │ │ └── game.js
  17. │ └── index.html
  18. ├── game
  19. │ ├── main.js
  20. │ └── states
  21. │ ├── boot.js
  22. │ ├── gameover.js
  23. │ ├── menu.js
  24. │ ├── play.js
  25. │ └── preload.js
  26. ├── package.json
  27. └── templates
  28. ├── _index.html.tpl
  29. └── _main.js.tpl

Télécharger

Attention, je n’ai pas mis les répertoires bower_components et node_modules pour que ce soit plus facile à lire.

Enfin, au début, ça marche pas... J’avais ceci à l’écran ceci à l’écran :

Dans la structure nouvellement créée, il manque un phaser quelque part...
J’ai créé un projet depuis le répertoire principal dans netbeans et lorsque je lance l’index.html de "dist", il m’indique qu’il ne trouve pas le fichier "js/phaser.js"...

Ayant indiqué que je voulais un projet avec Phaser 2.0.2, je suis allé télécharger celui-ci depuis le github de Phaser dans la partie "relesases" et l’ai mis mettre dans "dist>js"

Ceci fait, j’ai rafraîchi la page : http://localhost:9000/... Et voilà !

Le mini jeu "Hello World !" est fonctionnel...

Pour votre information, ne fermez pas le terminal ! Sinon, Ca ferme aussi Grunt et l’automatisation de créations et de mise à jours des fichiers dans dist ne se fait plus...

Subgenerators

Pour votre information, Yeoman Phaser generator contient deux sous générateurs pour modifier le jeu... Je ne m’en suis pas encore servi, je n’en parlerais donc pas maintenant...

La suite

Je vais reprendre ce tutoriel en français bientôt sur mon site. Il montre comment créer une page d’accueil pour un jeu avec Phaser et on voit un peu comment les choses ce passe avec le Yeoman Phaser Generator !

Vous avez aimé ? Partager !

Twitter Facebook Google Plus Tumblr Linkedin
Cet article à 1 article connexe :