Phaser 2.0 Tutoriel : Flappy Bird (Partie 3)

Publié le .

Phaser 2 Tutoriel
Phaser 2.0 Tutoriel : Flappy Bird (Partie 3)

Une introduction au mouvement du joueur

Dans la première et la deuxième partie de ce tutoriel, nous avons parlé de mettre en place un workflow avec le generator-phaser-official, de création de sprite, de tweens, de physique et de détection de collision. Dans cette partie du tutoriel, nous allons voir comment faire bouger le joueur lorsqu’une action est détectée...

Pour rappel, ce tutoriel est basé sur un tutoriel rédigé en anglais par Jeremy Dowell.

En avant ! Faisons battre les ailes de notre oiseau !

Mettons le « flappy » dans Flappy bird !

Flappy vient de flap qui veut dire battre des ailes pour voler dans notre cas...

Ouvrons game/prefabs/bird.js et ajoutons-y, après la fonction Bird.prototype.update(), une fonction flap().

  1. Bird.prototype.flap = function() {  
  2. };

Télécharger

Cela servira de base à notre méthode flap(). Maintenant, faisons « flapper » notre oiseau en le faisant bouger vers le haut.

  1. Bird.prototype.flap = function() {  
  2.     this.body.velocity.y = -400;
  3. };

Télécharger

Tout ce que nous avons fait, c’est de dire au corps physique de notre oiseau d’avoir une velocité Y de -400. Le résultat de cela est d’avoir notre oiseau qui va vers le haut à une vitesse de 400 pixels par seconde. Ceci pourrait être alarmant comme nous ne voulons pas que notre oiseau ne s’envole vers l’infini et au-delà...Heureusement, nousavaons implanté la gravité dans notre jeu. Rappelez-vous, dans la partie 2 de cet tutoriel. Du coups, notre oiseau est soumis à la gravité !

Maintenant, la partie importante :

Mise en place des interactions utilisateur

Bien. Nous avons une méthode pour qui va faire « flapper » ou plutôt voler notre oiseau. Mais comment savoir quand appeler cette méthode ?
Simple, lorsque l’on presse la barre espace !

Il y a deux façon de faire cela :

  1. Nous pouvons mettre en place un listener dans notre état de jeu
  2. Nous pouvons mettre en place un listener dans notre bird prefab
Qu’est ce qu’un listener ?

Un listener, en français écouteur, est un terme anglais utilisé de façon générale en informatique pour qualifier un élément logiciel qui est à l’écoute d’évènements afin d’effectuer des traitements... ( D’après wikipedia )

Cela dépends de vous et du jeu que vous développez. Dans le cas présent, nous allons mettre en place le listener à l’état de jeu play.

Ouvrons maintenant le fichier game/states/play.js et ajoutons-y les lignes de code suivantes :

  1. create: function() {  
  2.     /* previous setup code */
  3.  
  4.     // keep the spacebar from propogating up to the browser
  5.     this.game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);
  6.  
  7.     // add keyboard controls
  8.     var flapKey = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
  9.     flapKey.onDown.add(this.bird.flap, this.bird);
  10.  
  11.  
  12.     // add mouse/touch controls
  13.     this.input.onDown.add(this.bird.flap, this.bird);
  14.  
  15.  
  16. }

Télécharger

Nous faison trois choses importantes dans ce code :

  1. this.game.input.keyboard.addKeyCapture([Phaser.Keyboard.SPACEBAR]);  

Depuis un navigateur, presser la barre espace fait défiler la page vers le bas. Nous ne voulons pas que cela arrive lorsque nous jouerons à notre jeu, nous disons à Phaser de ne pas propager cet événement au navigateur. C’est juste une façon alambiquée de dire que la page ne devra pas défiler vers le bas lorsque la barre d’espace sera pressée. Cela devrait être fait pour les touches du claviers comme les flèche, tab et autres touches qui affecte le comportement du navigateur.

Qu’est ce que Phaser.Keyboard.SPACEBAR ?

Phaser.Keyboard.SPACEBAR est ce que dans un language de programmation, est appelé un « enumerable ». C’est à dire une valeur constante. Ainsi, SPACEBAR est une propriété de Phaser.Keyboard qui correspond à une valeur constante. Dans ce cas Phaser.Keyboard.SPACEBAR correspond à 32 qui est, tenez-vous bien, le event.keyCode de la barre d’espace. keyCode est donc le numéro correspondant à un élément d’un périphérique de pilotage d’un ordinateur. Dans notre cas, la touche barre d’espace du clavier.

Les lignes suivantes ressemblent à cela :

  1. var flapKey = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);  
  2.     flapKey.onDown.add(this.bird.flap, this.bird);

Télécharger

Ici, nous disons à l’input de l’objet de notre état de lié une touche du clavier à une variable locale flapkey. La méthode addKey créait un objet qui a de nombreuses propriétés, méthodes et signales. Mais celui qui nous intéresse maintenant est le signal « onDown », c’est à dire lorsque l’on presse une touche. Note : le « onDown » est pris en compte seulement lorsque l’on presse la touche et ne se relance pas tant que la touche est pressée.

Qu’est ce qu’un signal ?

Un signal, dans la terminologie de Phaser ( Phaser.Signal ) est un objet de communication. Il marche comme un listener d’événement standart, mais utilise un canal de diffusion personnalisé. Pour en savoir plus, en anglais, sur les Observer or Publish/Subscribe pattern.

Regardons de plus près

  1. flapKey.onDown.add(this.bird.flap, this.bird);

C’est cette ligne qui fait toute la magie par rapport à votre clavier. Nous disons à l’objet flapkey que lorsqu’il est pressé, d’appeler la méthode flap() de this.bird. Et bien voilà ! C’est la première que nous utilisons une fonction de rappel dans un autre contexte que this.

Vous souvenez-vous de notre méthode flap() dans notre prefab bird ?

  1. Bird.prototype.flap = function() {  
  2.   this.body.velocity.y = -400;
  3. };

Télécharger

Si nous passions comme contexte à notre fonction de rappel flapKey.onDown, this, le contexte ferait référence à l’état Play au lieu de this.bird et essaierais de modifier Play.body.velocity.y qui n’existe pas et n’a aucun sens...

Control par la souris et le touché

  1. // add mouse/touch controls
  2. this.input.onDown.add(this.bird.flap, this.bird);

Télécharger

Cet appel est pratiquement identique à celui concernant le clavier, avec une différence notable : this.input fait référence à la fois à la souris et à l’écran tactile selon celui qui est disponible. Lorsque nous chargerons notre jeu dans un appareil mobile, taper sur l’écran enverra le signal onDown et appellera this.bird.flap.

Contrôlons ce que nous avons fait !

Pas mal, mais ce n’est pas encore ça...

Jouons avec la physique

Actuellement notre oiseau vole trop loin et la gravité est un peu faible. Nous pouvons arranger cela en une seule étape. La gravité dans flappy bird est presque réaliste ( 9.7m/s^2 pour 9.86/s^2 dans la réalité ). Cependant, nous n’avons pas fait de calcul pour ce qui est dans notre jeu. Sentez-vous libre d’expérimenter avec le réglage de la gravité dans la méthodecreate() du fichier game/states/play.js. Jeremy a déterminé qu’un valeur de gravité de 1200 fonctionnait bien.

  1. // give our world an initial gravity of 1200
  2. this.game.physics.arcade.gravity.y = 1200;

Télécharger

Parfait ! Ou presque...

Ajoutons une rotation !

Bien ! Maintenant, notre oiseau monte et redescend ! Mais ce n’est pas encore tout à fait ça... Dans le jeu original, l’oiseau pivote vers le haut lorsqu’il s’envole. Et reviens à l’horizontal lorsqu’il redescend. Et ce, à un maximum de 90° par rapport au sol...

Ajoutons ce comportement.

Pour cela, ouvrons game/prefabs/bird.js et allons à la méthode flap() et mettez y cette ligne

  1.     // rotate the bird to -40 degrees
  2.     this.game.add.tween(this).to({angle: -40}, 100).start();

Télécharger

C’est un simple tween, comme nous l’avons vu auparavant. Il met l’anle de notre propriété à -40° en 100 millisecondes.

Mais comment revenir à la position initiale ?

Rendez-vous à la fonction update() de notre prefab Bird et ajoutons les lignes suivantes :

  1. Bird.prototype.update = function() {  
  2.   // check to see if our angle is less than 90
  3.   // if it is rotate the bird towards the ground by 2.5 degrees
  4.   if(this.angle < 90) {
  5.     this.angle += 2.5;
  6.   }
  7. };

Télécharger

C’est une action conditionnée simple. Chaque fois que nous « bouclons » sur le update du prefab Bird, si l’angle est inférieur à 90, il est augment de 2.5°.

Voici le résultat :

Vous aurez peut être remarqué que lorsque l’oiseau touche le sol, celui-ci ne s’arrête pas de pivoter jusqu’à atteindre 90°. Nous arrangerons cela dans une prochaine partie.

Code source

Tout le code pertinent de cette partie du tutoriel est disponible sous forme gist ici.

Vous avez aimé ? Partager !

Twitter Facebook Google Plus Tumblr Linkedin
Cet article à 5 articles connexes :

Répondre à cet article

Tous les champs sont obligatoires

Qui êtes-vous ?
Ajoutez votre commentaire ici

  • Pour créer des paragraphes, laissez simplement des lignes vides. Par ailleurs, les raccourcis SPIP [nom du lien->lien] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins> sont acceptés.

Suivre les commentaires : RSS 2.0 | Atom