• May 20, 2014
• 2 min read

A La Découverte De Phaser - 3

Dans les arcanes de game.add.sprite , un nouvel objet Phaser.Sprite est créé et le sprite est ajouté au “monde du jeu”. Ce monde est l’endroit où tous vos objets vont vivre, cela peut être comparé à un Stage de ActionScript3.

Note : Le monde de jeu n’a pas de taille fixe et s’étend à l’infini dans toutes les directions, avec le point 0,0 au centre. Par commodité, Phaser positionne le 0,0 en haut et à gauche de votre monde, mais vous pouvez le déplacer à l’aide de l’objet Camera intégré.

La classe représentant le monde est accessible par l’objet game.world et est fournie avec un tas de méthodes et propriétés pratiques pour vous aider à répartir vos objets au sein du monde.
Cela comprend quelques propriétés simples comme game.world.height , mais aussi certaines plus élaborées que nous utiliserons dans un autre tutoriel.

Pour le moment, construisons notre scène en ajoutant un fond et des plate-formes.
Voici une version plus à jour de la fonction create :

var platforms;

function create() {

    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');

    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;

    // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);

    //  This stops it from falling away when you jump on it
    ground.body.immovable = true;

    //  Now let's create two ledges
    var ledge = platforms.create(400, 400, 'ground');

    ledge.body.immovable = true;

    ledge = platforms.create(-150, 250, 'ground');

    ledge.body.immovable = true;

}

Si vous exécutez ce code, que vous trouverez dans le fichier part4.html du zip du tutoriel, vous devriez voir un écran qui ressemble un peu plus à une scène d’un jeu :

La première partie est identique à ce que nous avions fait pour l’étoile, nous avons simplement changé la clé en ‘sky’ et cela a permis d’afficher notre ciel en fond d’écran à la place.
C’est une image au format PNG de dimensions 800x600 qui remplit notre écran.

A bientôt

Voilà, je vous laisse avec la traduction qui correspond à la partie 4 et, comme promis, je continue au plus vite.

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