• May 26, 2014
• 4 min read

A La Découverte De Phaser - 4

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à

Les Groupes

Les Groupes sont vraiment puissants. Comme leur nom l’indique, ils vous permettent de grouper ensemble des objets similaires et de les controler comme une seule entité. Il est aussi possible de calculer les collisions entre Groupes, et pour ce jeu, nous allons utiliser deux groupes différents, l’un deux sera créé par le code suivant pour les plateformes :

platforms = game.add.group();

Comme pour les Sprites , game.add crée un objet Group. Nous l’assignons à une nouvelle variable locale appellée platforms. Une fois créé, nous pouvons lui ajouter des objets.
Tout d’abord, le sol. Il est positionné tout en bas de la zone de jeu et utilise l’image ‘ground’ chargé auparavant. Le sol est ensuite mis à l’échelle pour remplir la largeur de l’écran de jeu.
Pour terminer, nous postionnons la valeur de la propriété ‘immovable’ à true (NdT: vrai). Si nous le faisions pas, le sol bougerait quand le joueur rentrerai en collision avec lui (plus de détails à ce sujet dans la rubrique Physique).

Une fois le sol en place, nous crééons 2 éléments plus petits pour sauter dessus en utilisant la même technique que pour le sol.

Joueur Un Prêt

Crééons une nouvelle variable locale appellée ‘player’ (NdT: nous traduirons le code plus tard si besoin) et ajoutons le code suivant à la fonction create.
Vous pouvez lire ce code dans le fichier part5.html :

    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  We need to enable physics on the player
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);

Cela va créer un nouveau Sprite appellé ‘player’ , positionné aux coordonnées 32 pixels du bord gauche du jeu et 150 pixels à partir du bas du jeu.
Nous indiquons d’utiliser la ressource ‘dude’ chargé auparavant. Si vous allez voir la fonction preload , vous verrez que ‘dude’ a été chargé en temps que feuille de Sprite , pas comme une image. Cela est du au fait qu’il contient les différentes images de l’animation.
Voici à quoi ressemble la feuille de Sprite dans son intégralité :

Vous pouvez voir 9 frames au total (NdT : les frames sont comme de petites diapositives de chaque étape de l’animation), 4 représentant la course à gauche, 1 qui fait face à la caméra et 4 pour la course à droite. Notez que Phaser est capable de gérer des Sprites par symétrie pour gagner de la place dans les frames, mais pour la simplicité de ce tutoriel, nous conserverons l’approche à l’ancienne.
Nous définissons 2 animations appellées ‘left’ et ‘right’ (NdT : gauche et droite). L’animation ‘left’ utilisera les frames 0, 1, 2 et 3 à la vitesse de 10 frames par seconde. Le paramètre true indique que l’animation se fera en boucle. Ce sera notre cycle standard de course et nous utiliserons une animation similaire pour la direction opposée.
Une fois les animations créées, occupons nous de quelques propriétés de physique.

Objet Body et Velocity : un monde de Physiques

Phaser propose une grande variété de système de gestion de la physique. Il est fourni avec le système Arcade Physics , le système Ninja Physics et le système P2.JS Full-Body Physics. (NdT : ce sont les noms que vous retrouverez dans la documentation).
Pour les besoins de ce tutoriel, nous allons utiliser le système Arcade Physics , qui est à la fois simple et léger, un choix parfait pour les navigateurs mobiles.
Vous verrez dans le code que nous aurons à démarrer le système de physique, puis pour chaque Sprite ou Group que nous voudrons gérer par ce système, nous devrons l’activer un à un.

Une fois que cela est fait, chaque Sprite se retrouve avec une propriété body , qui est une instance de celui du système ArcadePhysics. Cela représente le Sprite comme un corps physique dans le moteur Arcade Physics de Phaser.
L’objet body en lui même possède un certain nombre de propriétés avec lesquelles nous pourrons jouer. Pour simuler les effets de la gravité sur un Sprite , c’est aussi simple que d’écrire ce qui suit :

player.body.gravity.y = 300;

C’est une valeur arbitraire, mais logiquement, plus la valeur est élevée, plus l’objet est lourd et plus vite il chute.
Si vous ajoutez ceci à votre code ou si vous lancer le fichier part5.html , vous verrez le joueur tomber sans s’arrêter, ce jusqu’au bas du monde du jeu, en ignorant le sol que nous avons créé auparavant :

A bientôt

Voilà, la suite expliquera comment faire pour que le joueur s’arrête au sol et comment le déplacer avec le clavier.

Entre temps, ne soyez pas timides : laissez des commentaires ou écrivez moi et surtout amusez vous !