Houston 500, un jeu spatiale développé avec Phaser 3

Le principe du jeu vidéo Houston 500 est très simple. Vous incarnez un astronaute à bord de son vaisseau spatiale. Vous devez récupérer le maximum d’étoiles pour vous échapper d’une galaxie lointaine. Trouvez le chemin du retour pour la planète Terre.

Un astronaute perdu dans l’espace !

Informations sur le jeu :

  • 5 niveaux disponibles du plus facile au plus difficile
  • Un classement en ligne des meilleurs astronautes
  • Des passages secrets
  • Disponible sur mobile, tablette et pc

Phaser 3

Phaser est une librairie graphique pour construire des jeux vidéos rapidement. Il contient des outils comme :

  • un moteur physique
  • une gestion de la caméra
  • une gestion des animations
  • un système de particules
  • une gestion des sprites
  • une gestion des cartes

Grâce à son code simple et intuitif, de nombreux jeux ont vu le jour sur Facebook ou plusieurs plateformes de jeux vidéo en ligne.

Documentation

Exemples

Les éléments Phaser 3 utilisés

Houston 500 a été développé avec la librairie Phaser 3 en javascript.

Phaser.Game :

  • Configuration du jeu

Phaser.Scene :

  • La scène du jeu

Phaser.GameObjects :

  • Les éléments du jeu

Phaser.Tilemaps :

  • Les maps

Phaser.Game : Initialiser le jeu

Documentation

Houston 500 est responsive et a besoin d’un monde avec une gravité spatiale ARCADE. Voici sa configuration pour la création de notre Phaser.Game

export default class Houston500 extends Phaser.Game {   
   constructor() {     
      super({       
         type: Phaser.AUTO, //AUTO picks WEBGL if available, otherwise CANVAS
         parent: 'parent-id',
         width: window.innerWidth, //responsive
         height: window.innerHeight, //responsive
         physics: {
            default: 'arcade',
            arcade: {
               gravity: { y: 1000 },
               debug: false,
            },
         },
      });
   }
}

Phaser.Scene : Création d'une scène

Documentation

Afin d’afficher l’univers spatiale de Houston 500, nous avons besoin d’une scène. Voici les événements :

  • preload : chargement des images
  • create : création des éléments de jeu
  • update : mise à jour de notre jeu

export default class Mars extends Phaser.Scene {   
   constructor() {     
      super({       
         key: 'Mars',     
      });   
   }    

   preload() {     
      // load assets   
   }    

   create() {     
      // create your game objects   
   }    

   update(time, delta) {     
      // update your game   
   }  
}

Phaser.GameObjects : Ajout d'un élément

Voir la liste complète

Phaser 3 possède une grande collection d’objets pour Houston 500. Voici quelques éléments :

  • Sprite
  • Image
  • Mesh
  • Text

Voici comment l’astronaute Houston 500 est ajouté à notre scène :

// Load Astronote to Scene 
scene.load.spritesheet('astronaute', './astronaute.png', {   
   width: 64,   
   height: 64,   
   frameWidth: 64,   
   frameHeight: 64, 
});  

// Create Astronaute to Scene 
scene.physics.add.sprite(   
   0,   
   0,   
   'astronaute', 
);

Phaser.Tilemaps : Créer une map

Documentation

Phaser 3 possède un lecteur de carte avec Tiled. Voici un excellent exemple pour gérer vos univers : tutoriel ici.

Les articles du même thème