Multi-Céphale

Description

Premier test de la bibliothèque PhaserJS.

L'idée derrière ce mini-projet était de construire les bases d'une architecture permettant d'intégrer un nouveau type de page sur Gatsby.

J'en ai profité également pour mettre à jour toutes les dépendances et la version de node, ainsi que de passer sur Typescript.

Je peux désormais facilement créer des nouvelles pages "game" qui pourront accueillir des prototypes de jeu réalisé avec Phaser.

J'ai toujours été passionné par les jeux videos ainsi que leur développement, et j'ai eu la chance au cours de mon cursus scolaire d'en créer plusieurs :

un clone de mario vs. donkey kong ( en C, avec une bibliothèque maison proche de la SDL )
un clone bomberman en 3D ( en C++, avec une bibliothèque maison proche de la SDL )
un beat'em'up en flash ( il y a trèèès longtemps 😅 )

J'aimerai renouer avec cette passion en me lançant le petit défi de faire quelques (clones de) petits jeu au cours des prochains mois.

Chargement du jeu en cours ...

Code source

Multicephale/MulticephaleGame.ts

import * as Phaser from "phaser";
import MulticephalePlayScene from "./scenes/MulticephalePlayScene";
import { GameCreator } from "@/types/game";

const DEFAULT_WIDTH = 1080;
const DEFAULT_HEIGHT = 500;

let config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  parent: "phaser-container",
  backgroundColor: "#282c34",
  scale: {
    mode: Phaser.Scale.ScaleModes.FIT,
    width: DEFAULT_WIDTH,
    height: DEFAULT_HEIGHT,
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: {
        y: 200,
        x: 0,
      },
    },
  },
  scene: [MulticephalePlayScene],
};

interface MulticephaleGameProps {
  width: number;
  height: number;
}

const createGame: GameCreator = (props: MulticephaleGameProps) => {
  const { width, height } = props;

  if (config.scale) {
    config.scale.width = width || DEFAULT_WIDTH;
    config.scale.height = height || DEFAULT_HEIGHT;
  }

  const game = new Phaser.Game(config);
  return game;
};

export default createGame;

Multicephale/scenes/MulticephalePlayScene.ts

// games/Multicephale/scenes/MulticephalePlayScene.ts

import * as Phaser from "phaser";
import { random } from "lodash";

export default class MulticephaleGameScene extends Phaser.Scene {
  headCount?: number;
  scoreText?: Phaser.GameObjects.Text;
  particles?: Phaser.GameObjects.Particles.ParticleEmitter;

  constructor() {
    super("multicephale");
    this.headCount = 0;
  }

  preload(): void {
    this.load.setBaseURL("/images/games/multicephale/");

    this.load.image("head", "avatar.png");
    this.load.image("red", "muzzleflash7.png");
  }

  create(): void {
    this.createScoreText();
    this.createHead();
  }

  createScoreText(): void {
    this.scoreText = this.add.text(10, 10, "", {
      fontSize: "26px",
      fontFamily: "PressStart2P",
    });
  }

  update(): void {}

  updateText(headsAmount: number): void {
    this.scoreText?.setText(`Head count: ${headsAmount.toString()}`);
  }

  createHead(): void {
    const head: Phaser.Types.Physics.Arcade.ImageWithDynamicBody =
      this.physics.add.image(random(100, 400), random(100, 400), "head");

    const sizeScale: number = random(0.3, 0.6);
    head.setScale(sizeScale, sizeScale);
    head.setVelocity(random(-300, 300), random(-300, 300));
    head.setBounce(1, 1);
    head.setCollideWorldBounds(true);
    head.setInteractive();

    // Create particles for this head
    const particles = this.add.particles(0, 0, "red", {
      speed: random(50, 150),
      scale: { start: 0.5, end: 0 },
      blendMode: Phaser.BlendModes.ADD,
      lifespan: 1000,
      frequency: 50,
    });

    // Set particles to render behind the head
    particles.setDepth(-1);
    head.setDepth(0);

    particles.startFollow(head);

    head.on("pointerdown", () => {
      head.destroy();
      particles.destroy();
      this.headCount! -= 1;
      this.updateText(this.headCount!);
    });

    this.headCount! += 1;
    this.updateText(this.headCount!);
  }
}