Costanti

Per accentrare in un unico punto tutte le costanti, ho creato un file dove vado ad esportarle.

Banalmente l'ho chiamato costants.ts e le prime che ho inserito sono:

// COLORI GENERALI
export const BG_COLOR = 0x054701;

// CELLE
export const C_BLACK = 0x6699ff;
export const C_WHITE = 0xff9966;
export const C_SIZE = 24;

La prima indica il colore del background dell'intero gioco.

Le due successive il colore delle celle che costituiranno la scacchiera dove si muoveranno le entità.

Infine la grandezza in pixel della cella della scacchiera.

Scene

Una cosa che ho trovato in un progetto (di cui non ricordo) é la gestione delle scene attraverso il enum.
Quindi andiamo ad aggiungere come ultimo file della cartella utils il file SceneKeys.ts, al cui interno implementeremo l'enum per gestire le scene e lo esportiamo per usarlo.

enum SceneKeys {
  Preloader = "preloader",
  Test = "test",
}

export default SceneKeys;

Come detto al momento solo due scene, una usata per il caricamento dei futuri assets (preloader), l'altra scena é quella di test (test)

Main

Chiudiamo il post con il main.ts, dove tutto inizia.
Dove viene dichiarato e inizializzato il gioco Phaser, aggiungiamo le scene e facciamo partire il tutto.

import Phaser from "phaser";
import { BG_COLOR } from "./game/utils/consts";
import SceneKeys from "./game/utils/SceneKeys";
import Preloader from "./scenes/Preloader";
import TestScene from "./scenes/Test";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 700,
  height: 700,
  backgroundColor: BG_COLOR,
  physics: {
    default: "arcade",
    arcade: {
      gravity: {
        y: 0,
      },
    },
  },
  scale: {
    mode: Phaser.Scale.ScaleModes.FIT,
    autoCenter: Phaser.Scale.Center.CENTER_BOTH,
  },
};

const Game = new Phaser.Game(config);

// SCENES
Game.scene.add(SceneKeys.Preloader, Preloader);
Game.scene.add(SceneKeys.Test, TestScene);

Game.scene.start(SceneKeys.Preloader);
export default Game;

A parte gli "import", troviamo la definizione delle opzioni da passare al costruttore di Phaser.

Aggiungiamo le scene, legandole tramite l'enum destritto sopra.

Infine prima di esportare il gioco creato, lanciamo la scena Preloader che andremo a vedere nel prossimo post.

Pubblicato 23 Nov 2023