Un astronaute perdu dans l’espace !

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.

  • 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
Houston 500 Classement

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

Houston 500 a été développé avec la librairie Phaser 3 en javascript. Voici quelques éléments utilisés :

  1. Phaser.Game

    Configuration du jeu

  2. Phaser.Scene

    La scène du jeu

  3. Phaser.GameObjects

    Les éléments du jeu

  4. Phaser.Tilemaps

    Les maps

#1 Initialiser le jeu

Phaser.Game

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,
        },
      },
    });
  }
}

#2 Création d’une scène

Phaser.Scene

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
  }
}

#3 Ajouter un élément de jeu

Phaser.GameObjects

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',
);

#4 Créer une map

Phaser.Tilemaps

Documentation

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