Overview

The level folder contains everything related to the phaser levels. This includes the scenes, entities, and overlays. On every level start the levelBridge is used to initialize the Phaser game and wait until all assets are loaded. After that, the PhaserGame vue component is used to display the Phaser game.

When initializing the Phaser game, the current Colyseus room connection and tilemap are passed to the game.

Folder Structure

level
├── @types - custom types
├── components - entity components with game logic
├── entities - entity classes
├── managers - managers for the game
├── overlays - overlays for displaying information in the HUD scene
├── scenes - phaser scenes
└── util - utility functions

Architecture

In this game, we are using a component-based architecture. This means that entities are composed of components that define their behavior.

We decided against a classical entity-component-system (ECS) architecture because Phaser does not support this out of the box and in combination with multiplayer, it would be too complex. While not as flexible as an ECS, the component-based architecture is still easy to test and maintain.

Constants

In the level folder, you can find a constants.ts file. This file contains all constants that are used in the game. By collecting all constants in one file, it is easier to tweak the game's behavior.