A La Découverte De Phaser - 3

| Comments

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

Construction du monde

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 :

part4

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 !

Comments