Voici la suite de la traduction du tutoriel écrit par Alvin Ourad et Richard Davey.
Elle commence dans ce premier article
Puis se poursuit avec ce second article
Alors que le troisième article est làLogiquement, il y a eu ce quatrième article

Nous en étions resté au moment ou le joueur tombait en ignorant le sol que nous avions créé.

La raison est simple : nous ne testons pas encore la collision entre le sol et le joueur.
Nous avons déjà indiqué à Phaser que notre sol et nos plateformes  étaient inamovibles. Si nous ne l’avions pas fait, le joueur les aurait  rencontré, aurait marqué un temps d’arrêt, puis tous les élements se  seraient dispersés.
A moins d’indiquer le contraire, le Sprite du sol est un objet  physique qui peut se déplacer (appellé aussi corps dynamique) et quand  le joueur le percute, les forces résultantes sont appliquées au sol, et  les deux objects modifient leur vélocités et le sol se met à tomber lui  aussi.

Donc, pour permettre au joueur d’entrer en collision et d’utiliser  les propriétés physiques, nous devons ajouter un test de collision dans  la fonction update :

function update() {

    game.physics.arcade.collide(player, platforms);

}

La fonction update est appelée par la boucle de jeu toutes les frames. La fonction Physics.collide est celle qui fait toute la magie. Elle utilise deux objets pour tester  la collision et les sépare. Dans notre cas, nous lui passons notre Sprite de joueur et le Group de plateformes. Cette fonction est suffisament maline pour vérifier la collision avec chaque membre du Group. Cet appel va donc vérifier les collisions avec le sol et les plateformes.

Le résultat est une plateforme solide:

Contrôler le jouer avec le clavier

Gérer les collisions, c’est bien beau, mais nous avons besoin de  faire bouger le joueur. Peut être êtes vous tentés de plonger dans la  documentation et chercher comment ajouter des event et les écouter, mais ce n’est pas utile ici.
Phaser inclus un gestionnaire de clavier et un des avantages de l’utiliser est cette petite fonction bien pratique :

cursors = game.input.keyboard.createCursorKeys();

Cela va peupler l’objet cursors avec quatre propriétés : up, down, left, right (NdT : haut, bas, gauche, droite) qui sont des instances des objets Phaser.key. Tout ce qu’il nous reste à faire est d’aller vérifier ces instances à chaque boucle :

    //  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 4;
    }

    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }

Même si nous venons d’ajouter pas mal de code, cela devrait rester assez lisible.
La première chose que nous faisons est de réinitialiser la vélocité horizontale du Sprite.
Nous vérifions ensuite si la flèche vers le bas est appuyée. Si c’est le  cas, nous appliquons une vélocité horizontale négative et nous  déclenchons l’animation de course à gauche.
Si à la place nous avons la touche flèche vers la droite appuyée, nous faisons exactement l’inverse.
En remettant à zéro la vélocité et en la modifiant de cette façon à chaque frame, cela crée un mouvement de type “stoppe-repart”.

Le Sprite du joueur ne bougera que lorsqu’une touche est appuyée et s’arrête immédiatement quand ce n’est plus le cas.
Phaser vous permet de créer des mouvements plus complexes, avec de  l’inertie et de l’accélération, mais nous nous satisferons de notre  mouvement pour ce jeu.
La dernière portion de code remet le sprite du joueur avec la frame 4 si aucune touche n’est appuyée. La frame 4 dans la feuille de Sprite est celle où le joueur vous regarde, immobile.

Sautons

La dernière portion de code ajoute la possibilité de sauter. La  touche flêche vers le haut sera la touche de saut et nous testons si  elle est appuyée.
Malgré tout, nous testerons également si le joueur touche le sol, sinon il pourait sauter alors qu’il serait déjà dans les airs.
Si ces deux conditions sont respectées, nous appliquons une vélocité verticale de 350 pixel/sec.
Le joueur retombera vers le sol automatiquement grâce à la valeur de gravité que nous lui appliquons.
Essayez de jouer avec des valeurs plus ou moins grandes que 350 pour voir l’effet produit.

Pluie d’étoiles

Il est grand temps de donner un but à notre petit jeu. Faisons  pleuvoir des étoiles sur la scène et permettons au joueur de les  ramasser.
Pour y parvenir, nous allons créer un Group appelé ‘stars’ et nous le peuplerons. Dans notre fonction create, nous ajoutons le code suivant (qui peut être vu dans le fichier part8.html)

    stars = game.add.group();

    stars.enableBody = true;

    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 12; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');

        //  Let gravity do its thing
        star.body.gravity.y = 6;

        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }

Le procédé utilisé est similaire à celui que nous avons utilisé pour le Group de plateformes. En utilisant l’instruction de boucle for de Javascript, nous indiquons que nous créons 12 étoiles dans notre jeu.
Elles ont une coordonnée x de i * 70, ce qui signifie que nous les répartissons équitablement dans la scène tous les 70 pixels.
Comme pour le joueur, nous leur donnons une gravité pour qu’elles tombent, et une valeur de bounce (NdT : rebond) pour qu’elle rebondissent un peu quand elles touchent les plateformes.
Le rebond bounce a une valeur entre 0 (pas de rebond du tout)  et 1 (rebond total). Les notres rebondiront avec une valeur entre 0,7 et  0,9. Si nous executions le code tel que, les étoiles tomberaient et  passeraient à travers le bas du jeu. Pour arrêter ce phénomène, nous  devons vérifier les collisions entre les étoiles et les plaformes au  sein de notre boucle for :

game.physics.arcade.collide(stars, platforms);

Nous en profiterons pour tester si le joueur et les étoiles ne partagent pas la même zone de jeu.

game.physics.arcade.overlap(player, stars, collectStar, null, this);

Cela indique à Phaser qu’il doit vérifier les recoupements entre le joueur et chacune des étoiles du Group. S’il trouve un recoupement, il passe ces éléments à la fonction ‘collecStar’

function collectStar (player, star) {

    // Removes the star from the screen
    star.kill();

}

L’étoile est alors simplement éliminée par l’instruction kill,  ce qui a pour effet de la retirer de l’affichage. Le jeu a donc maintenant un joueur qui peut librement se ballader,  sauter, bondir des plateformes et ramasser les étoiles qui tombent du  ciel.
Pas mal pour quelques lignes de code que l’on peut qualifier d’assez lisibles :)

Touche finale

La dernière petite modification que nous allons faire va consister à ajouter un score.
Pour cela, nous allons utiliser un objet Phaser.Text.
Nous créerons deux nouvelles variables, une qui contiendra le score actuel et l’autre l’objet texte lui même :

var score = 0;
var scoreText;

Le scoreText est paramétré dans la fonction create :

scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

Les deux premiers paramètres 16,16 représentent les coordonnées d’affichage du texte. ‘score: 0’ est la chaîne par défaut qui sera affichée et l’objet qui suit contient  la taille de la fonte et sa couleur de remplissage. En ne précisant pas  la fonte, nous allons en fait utiliser celle que le navigateur choisira  par défaut, ce qui correspond à Arial sous Windows par exemple.

Nous allons devoir ensuite modifier la fonction collectStar pour que lorsque le joueur attrape une étoile son score augmente et le texte est mis à jour pour refléter ce changement :

function collectStar (player, star) {

    // Removes the star from the screen
    star.kill();

    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;

}

Donc 10 points seront ajoutés pour chaque étoile et le texte du score scoreText est mis à jour avec le nouveau total.
Si vous ouvrez le fichier part9.html vous verrez le jeu au final.

Conclusion

Vous avez appris comment créer un Sprite avec des propriétés physiques, à contrôler son déplacement et le faire interagir avec d’autres objets dans un petit jeu.
Il y a beaucoup d’autres choses que vous pouvez réaliser pour  l’améliorer, par exemple ajouter une fin ou un but. Pourquoi ne pas  ajouter des pieux qu’il faudrait éviter ? Vous pourriez créer un nouveau  Group ‘spikes’ (NdT: pieux) et vérifier les  collisions avec le joueur, puis vous feriez disparaitre le joueur au  lieu du pieu. Ou pour un style de jeu non violent, faire du jeu une  course contre la montre et simplement défier les joueurs de ramasser les  étoiles le plus vite possible.
Nous avons inclus d’autres ressources graphiques dans le fichier zip de ce tutoriel pour vous inspirer.

Avec l’aide de ce que vous avez appris dans ce tutoriel et les plus de 250 exemples à votre disposition, vous devrier alors aboir de solides fondations pour un projet futur.
Mais comme toujours, si vous avez des questions, si vous avez besoin  d’un conseil ou si vous souhaitez partager vos travaux, n’hésitez pas à  demander de l’aide dans le forum Phaser.

Conclusion de la traduction

J’ajouterai que comme toujours, je répond avec plaisir aux commentaires et emails.
Merci de votre patience et si je vois qu’il y a des motivés pour  continuer l’aventure, je prendrai un peu de temps pour rédiger une suite  à ce tutoriel.
Qui sait, Alvin ou Richard feront alors une traduction anglaise ;)

Amusez vous, codez comme des fous, à bientôt.