@duyquangnvx/pixi-game-engine 0.1.0 → 0.1.2

package/README.md

@@ -1,17 +1,17 @@
-# @pixi-game/game-engine
+# @duyquangnvx/pixi-game-engine
 
 Full-featured PixiJS v7 game engine with TypeScript support.
 
 ## Installation
 
 ```bash
-pnpm add @pixi-game/game-engine
+pnpm add @duyquangnvx/pixi-game-engine
 ```
 
 ## Quick Start
 
 ```typescript
-import { Game, Scene, PIXI } from '@pixi-game/game-engine';
+import { Engine, Scene, PIXI } from '@duyquangnvx/pixi-game-engine';
 
 class GameScene extends Scene {
   private player!: PIXI.Sprite;
@@ -20,13 +20,13 @@ class GameScene extends Scene {
     this.player = new PIXI.Graphics();
     this.player.beginFill(0x4ecca3);
     this.player.drawRect(-25, -25, 50, 50);
-    this.player.x = this.game.screen.width / 2;
-    this.player.y = this.game.screen.height / 2;
+    this.player.x = Engine.screen.width / 2;
+    this.player.y = Engine.screen.height / 2;
     this.addChild(this.player);
   }
 
   onUpdate(delta: number) {
-    const { keyboard } = this.game.input;
+    const { keyboard } = Engine.input;
 
     if (keyboard.isDown('ArrowLeft')) this.player.x -= 5 * delta;
     if (keyboard.isDown('ArrowRight')) this.player.x += 5 * delta;
@@ -37,15 +37,15 @@ class GameScene extends Scene {
   onExit() {}
 }
 
-const game = new Game({
+Engine.init({
   width: 800,
   height: 600,
   backgroundColor: 0x1a1a2e,
 });
 
-document.body.appendChild(game.view as HTMLCanvasElement);
-game.scenes.add('game', GameScene);
-game.scenes.start('game');
+document.body.appendChild(Engine.view as HTMLCanvasElement);
+Engine.scenes.add('game', GameScene);
+Engine.scenes.start('game');
 ```
 
 ## Features

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
   BaseModal: () => BaseModal,
   COUNT_PRESETS: () => COUNT_PRESETS,
   CountAnimator: () => CountAnimator,
-  Game: () => Game,
+  Engine: () => Engine,
   GamepadManager: () => GamepadManager,
   InputManager: () => InputManager,
   KeyboardManager: () => KeyboardManager,
@@ -63,7 +63,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/core/game.ts
+// src/core/engine.ts
 var PIXI10 = __toESM(require("pixi.js"), 1);
 
 // src/ui/alert/alert-manager.ts
@@ -174,19 +174,19 @@ var BaseModal = class extends PIXI.Container {
   didHide = new Signal();
   /** Signal emitted when modal is shown (with data) */
   didShow = new Signal();
-  /** Get screen width from Game singleton */
+  /** Get screen width from Engine */
   get screenWidth() {
-    return Game.instance.screen.width;
+    return Engine.screen.width;
   }
-  /** Get screen height from Game singleton */
+  /** Get screen height from Engine */
   get screenHeight() {
-    return Game.instance.screen.height;
+    return Engine.screen.height;
   }
   constructor(config) {
     super();
     this.config = { ...DEFAULT_CONFIG, ...config };
     this.setup();
-    this.resizeBinding = Game.instance.onResize.add(() => {
+    this.resizeBinding = Engine.onResize.add(() => {
       this.drawBackdrop();
       if (this.config.centered) {
         this.centerModal();
@@ -320,7 +320,7 @@ var BaseModal = class extends PIXI.Container {
   drawBackdrop() {
     this.backdrop.clear();
     if (this.config.backdrop) {
-      const bounds = Game.instance.getFullscreenBounds();
+      const bounds = Engine.getFullscreenBounds();
       this.backdrop.beginFill(0, this.config.backdropAlpha);
       this.backdrop.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
       this.backdrop.endFill();
@@ -979,17 +979,17 @@ var PointerManager = class {
     this.onPointerMove = this.onPointerMove.bind(this);
     this.onPointerDown = this.onPointerDown.bind(this);
     this.onPointerUp = this.onPointerUp.bind(this);
-    const view = Game.instance.view;
+    const view = Engine.view;
     view.addEventListener("pointermove", this.onPointerMove);
     view.addEventListener("pointerdown", this.onPointerDown);
     view.addEventListener("pointerup", this.onPointerUp);
     view.addEventListener("pointerleave", this.onPointerUp);
   }
   getCanvasCoords(event) {
-    const view = Game.instance.view;
+    const view = Engine.view;
     const rect = view.getBoundingClientRect();
-    const scaleX = Game.instance.screen.width / rect.width;
-    const scaleY = Game.instance.screen.height / rect.height;
+    const scaleX = Engine.screen.width / rect.width;
+    const scaleY = Engine.screen.height / rect.height;
     return {
       x: (event.clientX - rect.left) * scaleX,
       y: (event.clientY - rect.top) * scaleY
@@ -1047,7 +1047,7 @@ var PointerManager = class {
   }
   /** Clean up event listeners */
   destroy() {
-    const view = Game.instance.view;
+    const view = Engine.view;
     view.removeEventListener("pointermove", this.onPointerMove);
     view.removeEventListener("pointerdown", this.onPointerDown);
     view.removeEventListener("pointerup", this.onPointerUp);
@@ -1285,13 +1285,13 @@ var SceneManager = class {
     }
     if (this.currentScene) {
       this.currentScene.onExit();
-      Game.instance.stage.removeChild(this.currentScene);
+      Engine.stage.removeChild(this.currentScene);
       this.currentScene.destroy({ children: true });
     }
     const scene = new SceneClass();
     this.currentScene = scene;
     this.currentSceneName = name;
-    Game.instance.stage.addChild(scene);
+    Engine.stage.addChild(scene);
     await scene.onEnter();
   }
   /** Get current scene name */
@@ -1856,13 +1856,13 @@ var ToastManager = class {
   currentColors;
   currentThemeName;
   resizeBinding = null;
-  /** Get screen width from Game singleton */
+  /** Get screen width from Engine */
   get screenWidth() {
-    return Game.instance.screen.width;
+    return Engine.screen.width;
   }
-  /** Get screen height from Game singleton */
+  /** Get screen height from Engine */
   get screenHeight() {
-    return Game.instance.screen.height;
+    return Engine.screen.height;
   }
   constructor(stage, config) {
     if (config?.theme) {
@@ -1882,7 +1882,7 @@ var ToastManager = class {
     this.layer.sortableChildren = true;
     this.layer.zIndex = 9999;
     stage.addChild(this.layer);
-    this.resizeBinding = Game.instance.onResize.add(() => {
+    this.resizeBinding = Engine.onResize.add(() => {
       this.repositionToasts();
     });
   }
@@ -2350,135 +2350,198 @@ var UIManager = class {
   }
 };
 
-// src/core/game.ts
-var Game = class _Game {
-  static _instance = null;
-  /** Get the singleton Game instance. Throws if not initialized. */
-  static get instance() {
-    if (!_Game._instance) {
-      throw new Error("Game not initialized. Call Game.init() first.");
-    }
-    return _Game._instance;
-  }
-  /** Initialize the Game singleton. Throws if already initialized. */
-  static init(config) {
-    if (_Game._instance) {
-      throw new Error("Game already initialized. Call destroy() first to reinitialize.");
-    }
-    return new _Game(config);
+// src/core/engine.ts
+var Engine = class _Engine {
+  constructor() {
   }
-  app;
-  scenes;
-  input;
-  assets;
-  sound;
-  particles;
-  tween;
-  ui;
-  spine;
-  toast;
-  alert;
-  modal;
-  /** Logger instance for consistent logging across the game */
-  logger = Logger;
-  /** Signal emitted when game is paused */
-  onPause = new Signal();
-  /** Signal emitted when game is resumed */
-  onResume = new Signal();
-  /** Signal emitted when game is resized */
-  onResize = new Signal();
-  /** Signal emitted when game is updated */
-  onUpdate = new Signal();
+  static _app;
+  static _scenes;
+  static _input;
+  static _assets;
+  static _sound;
+  static _particles;
+  static _tween;
+  static _ui;
+  static _spine;
+  static _toast;
+  static _alert;
+  static _modal;
+  /** Signal emitted when engine is paused */
+  static onPause = new Signal();
+  /** Signal emitted when engine is resumed */
+  static onResume = new Signal();
+  /** Signal emitted when engine is resized */
+  static onResize = new Signal();
+  /** Signal emitted when engine is updated */
+  static onUpdate = new Signal();
+  /** Signal emitted at the end of init() after all managers are constructed */
+  static onReady = new Signal();
+  /** Signal emitted at the start of destroy() before any teardown */
+  static onDestroy = new Signal();
+  /** Signal emitted when browser tab visibility changes (true = visible, false = hidden) */
+  static onVisibilityChange = new Signal();
+  /** Signal emitted when browser window gains/loses focus (true = focused, false = blurred) */
+  static onFocusChange = new Signal();
   /** Design resolution width (original config width) */
-  designWidth;
+  static _designWidth;
   /** Design resolution height (original config height) */
-  designHeight;
+  static _designHeight;
   /** Current scale mode */
-  scaleMode;
+  static _scaleMode;
   /** Current scale factor */
-  _scale = 1;
-  _isRunning = false;
-  _resizeHandler;
-  constructor(config) {
-    _Game._instance = this;
-    this.designWidth = config.width;
-    this.designHeight = config.height;
-    this.scaleMode = config.scaleMode ?? "letterbox";
-    this.app = new PIXI10.Application({
-      width: config.width,
-      height: config.height,
-      backgroundColor: config.backgroundColor ?? 0,
-      antialias: config.antialias ?? true,
-      resolution: config.resolution ?? window.devicePixelRatio,
-      autoDensity: config.autoDensity ?? true
-    });
-    this.app.stage.sortableChildren = true;
-    this.scenes = new SceneManager();
-    this.input = new InputManager();
-    this.assets = new AssetManager();
-    this.sound = new SoundManager();
-    this.particles = new ParticleManager();
-    this.tween = new TweenManager();
-    this.ui = new UIManager();
-    this.spine = new SpineManager();
-    this.toast = new ToastManager(this.app.stage);
-    this.alert = new AlertManager(this.app.stage);
-    this.modal = new ModalManager(this.app.stage);
-    this._resizeHandler = () => this.resizeToWindow();
-    if (config.autoResize !== false) {
-      window.addEventListener("resize", this._resizeHandler);
-    }
-    this.app.ticker.add(this.update, this);
-    this._isRunning = true;
+  static _scale = 1;
+  static _isRunning = false;
+  static _resizeHandler;
+  static _visibilityHandler;
+  static _focusHandler;
+  static _blurHandler;
+  static _initialized = false;
+  /** Logger instance for consistent logging across the engine */
+  static logger = Logger;
+  static get scenes() {
+    return _Engine._scenes;
   }
-  update(delta) {
-    this.onUpdate.emit(delta);
-    this.input.update();
-    this.scenes.update(delta);
-    this.particles.update(delta);
-    this.input.postUpdate();
+  static get input() {
+    return _Engine._input;
+  }
+  static get assets() {
+    return _Engine._assets;
+  }
+  static get sound() {
+    return _Engine._sound;
+  }
+  static get particles() {
+    return _Engine._particles;
+  }
+  static get tween() {
+    return _Engine._tween;
+  }
+  static get ui() {
+    return _Engine._ui;
+  }
+  static get spine() {
+    return _Engine._spine;
+  }
+  static get toast() {
+    return _Engine._toast;
   }
-  get view() {
-    return this.app.view;
+  static get alert() {
+    return _Engine._alert;
   }
-  get stage() {
-    return this.app.stage;
+  static get modal() {
+    return _Engine._modal;
+  }
+  static get app() {
+    return _Engine._app;
+  }
+  static get view() {
+    return _Engine._app.view;
+  }
+  static get stage() {
+    return _Engine._app.stage;
   }
   /** Returns design resolution dimensions (use for positioning game elements) */
-  get screen() {
-    return new PIXI10.Rectangle(0, 0, this.designWidth, this.designHeight);
+  static get screen() {
+    return new PIXI10.Rectangle(0, 0, _Engine._designWidth, _Engine._designHeight);
   }
   /** Returns actual renderer/viewport dimensions */
-  get viewport() {
-    return this.app.screen;
+  static get viewport() {
+    return _Engine._app.screen;
   }
-  get isRunning() {
-    return this._isRunning;
+  static get isRunning() {
+    return _Engine._isRunning;
   }
-  pause() {
-    this.app.ticker.stop();
-    this._isRunning = false;
-    this.onPause.emit();
+  /** Design resolution width (original config width) */
+  static get designWidth() {
+    return _Engine._designWidth;
   }
-  resume() {
-    this.app.ticker.start();
-    this._isRunning = true;
-    this.onResume.emit();
+  /** Design resolution height (original config height) */
+  static get designHeight() {
+    return _Engine._designHeight;
+  }
+  /** Current scale mode */
+  static get scaleMode() {
+    return _Engine._scaleMode;
+  }
+  static set scaleMode(value) {
+    _Engine._scaleMode = value;
   }
   /** Get current scale factor */
-  get scale() {
-    return this._scale;
+  static get scale() {
+    return _Engine._scale;
+  }
+  /** Initialize the Engine. Throws if already initialized. */
+  static init(config) {
+    if (_Engine._initialized) {
+      throw new Error("Engine already initialized. Call destroy() first to reinitialize.");
+    }
+    _Engine._initialized = true;
+    _Engine._designWidth = config.width;
+    _Engine._designHeight = config.height;
+    _Engine._scaleMode = config.scaleMode ?? "letterbox";
+    _Engine._app = new PIXI10.Application({
+      width: config.width,
+      height: config.height,
+      backgroundColor: config.backgroundColor ?? 0,
+      antialias: config.antialias ?? true,
+      resolution: config.resolution ?? window.devicePixelRatio,
+      autoDensity: config.autoDensity ?? true
+    });
+    _Engine._app.stage.sortableChildren = true;
+    _Engine._scenes = new SceneManager();
+    _Engine._input = new InputManager();
+    _Engine._assets = new AssetManager();
+    _Engine._sound = new SoundManager();
+    _Engine._particles = new ParticleManager();
+    _Engine._tween = new TweenManager();
+    _Engine._ui = new UIManager();
+    _Engine._spine = new SpineManager();
+    _Engine._toast = new ToastManager(_Engine._app.stage);
+    _Engine._alert = new AlertManager(_Engine._app.stage);
+    _Engine._modal = new ModalManager(_Engine._app.stage);
+    _Engine._resizeHandler = () => _Engine.resizeToWindow();
+    if (config.autoResize !== false) {
+      window.addEventListener("resize", _Engine._resizeHandler);
+    }
+    _Engine._app.ticker.add(_Engine.update);
+    _Engine._isRunning = true;
+    _Engine._visibilityHandler = () => {
+      _Engine.onVisibilityChange.emit(!document.hidden);
+    };
+    _Engine._focusHandler = () => _Engine.onFocusChange.emit(true);
+    _Engine._blurHandler = () => _Engine.onFocusChange.emit(false);
+    document.addEventListener("visibilitychange", _Engine._visibilityHandler);
+    window.addEventListener("focus", _Engine._focusHandler);
+    window.addEventListener("blur", _Engine._blurHandler);
+    _Engine.onReady.emit();
+  }
+  static update(delta) {
+    _Engine.onUpdate.emit(delta);
+    _Engine._input.update();
+    _Engine._scenes.update(delta);
+    _Engine._particles.update(delta);
+    _Engine._input.postUpdate();
+  }
+  static pause() {
+    _Engine._app.ticker.stop();
+    _Engine._isRunning = false;
+    _Engine.onPause.emit();
+  }
+  static resume() {
+    _Engine._app.ticker.start();
+    _Engine._isRunning = true;
+    _Engine.onResume.emit();
   }
   /**
    * Get bounds in stage coordinates that cover the full viewport (including letterbox areas).
    * Use this for fullscreen overlays, backdrops, modals that need to cover the entire screen.
    */
-  getFullscreenBounds() {
-    const scale = this._scale || 1;
-    const stagePos = this.app.stage.position;
-    const resolution = this.app.renderer.resolution || 1;
-    const rendererWidth = this.app.renderer.width / resolution;
-    const rendererHeight = this.app.renderer.height / resolution;
+  static getFullscreenBounds() {
+    const scale = _Engine._scale || 1;
+    const stagePos = _Engine._app.stage.position;
+    const resolution = _Engine._app.renderer.resolution || 1;
+    const rendererWidth = _Engine._app.renderer.width / resolution;
+    const rendererHeight = _Engine._app.renderer.height / resolution;
     return {
       x: -stagePos.x / scale,
       y: -stagePos.y / scale,
@@ -2489,75 +2552,76 @@ var Game = class _Game {
   /**
    * Resize to fit window while maintaining aspect ratio based on scaleMode
    */
-  resizeToWindow() {
-    const parent = this.app.view.parentElement;
+  static resizeToWindow() {
+    const parent = _Engine._app.view.parentElement;
     const windowWidth = parent?.clientWidth ?? window.innerWidth;
     const windowHeight = parent?.clientHeight ?? window.innerHeight;
-    this.resize(windowWidth, windowHeight);
+    _Engine.resize(windowWidth, windowHeight);
   }
   /**
-   * Resize game to fit target dimensions while maintaining aspect ratio
+   * Resize engine to fit target dimensions while maintaining aspect ratio
    */
-  resize(targetWidth, targetHeight) {
-    if (this.scaleMode === "none") {
-      this.app.renderer.resize(targetWidth, targetHeight);
-      this._scale = 1;
-      this.app.stage.scale.set(1);
-      this.app.stage.position.set(0, 0);
-      this.propagateResize(targetWidth, targetHeight);
-      this.onResize.emit({ width: targetWidth, height: targetHeight, scale: 1 });
+  static resize(targetWidth, targetHeight) {
+    if (_Engine._scaleMode === "none") {
+      _Engine._app.renderer.resize(targetWidth, targetHeight);
+      _Engine._scale = 1;
+      _Engine._app.stage.scale.set(1);
+      _Engine._app.stage.position.set(0, 0);
+      _Engine.onResize.emit({ width: targetWidth, height: targetHeight, scale: 1 });
       return;
     }
-    const designRatio = this.designWidth / this.designHeight;
+    const designRatio = _Engine._designWidth / _Engine._designHeight;
     const targetRatio = targetWidth / targetHeight;
     let scale;
-    if (this.scaleMode === "letterbox") {
-      scale = targetRatio > designRatio ? targetHeight / this.designHeight : targetWidth / this.designWidth;
+    if (_Engine._scaleMode === "letterbox") {
+      scale = targetRatio > designRatio ? targetHeight / _Engine._designHeight : targetWidth / _Engine._designWidth;
     } else {
-      scale = targetRatio > designRatio ? targetWidth / this.designWidth : targetHeight / this.designHeight;
-    }
-    this._scale = scale;
-    this.app.renderer.resize(targetWidth, targetHeight);
-    this.app.stage.scale.set(scale);
-    this.app.stage.position.set(
-      (targetWidth - this.designWidth * scale) / 2,
-      (targetHeight - this.designHeight * scale) / 2
+      scale = targetRatio > designRatio ? targetWidth / _Engine._designWidth : targetHeight / _Engine._designHeight;
+    }
+    _Engine._scale = scale;
+    _Engine._app.renderer.resize(targetWidth, targetHeight);
+    _Engine._app.stage.scale.set(scale);
+    _Engine._app.stage.position.set(
+      (targetWidth - _Engine._designWidth * scale) / 2,
+      (targetHeight - _Engine._designHeight * scale) / 2
     );
-    this.propagateResize(targetWidth, targetHeight);
-    this.onResize.emit({ width: targetWidth, height: targetHeight, scale });
-  }
-  /**
-   * Propagate resize to all managers that need viewport dimensions
-   * Note: Toast/BaseModal auto-resize via Game.instance.onResize signal
-   */
-  propagateResize(_width, _height) {
-  }
-  destroy() {
-    window.removeEventListener("resize", this._resizeHandler);
-    this.app.ticker.remove(this.update, this);
-    this.input.destroy();
-    this.scenes.destroy();
-    this.sound.destroy();
-    this.particles.destroy();
-    this.tween.destroy();
-    this.toast.destroy();
-    this.alert.destroy();
-    this.modal.destroy();
-    this.onPause.clear();
-    this.onResume.clear();
-    this.onResize.clear();
-    this.app.destroy(true, { children: true, texture: true });
-    this._isRunning = false;
-    _Game._instance = null;
+    _Engine.onResize.emit({ width: targetWidth, height: targetHeight, scale });
+  }
+  static destroy() {
+    if (!_Engine._initialized) return;
+    _Engine.onDestroy.emit();
+    document.removeEventListener("visibilitychange", _Engine._visibilityHandler);
+    window.removeEventListener("focus", _Engine._focusHandler);
+    window.removeEventListener("blur", _Engine._blurHandler);
+    window.removeEventListener("resize", _Engine._resizeHandler);
+    _Engine._app.ticker.remove(_Engine.update);
+    _Engine._input.destroy();
+    _Engine._scenes.destroy();
+    _Engine._sound.destroy();
+    _Engine._particles.destroy();
+    _Engine._tween.destroy();
+    _Engine._toast.destroy();
+    _Engine._alert.destroy();
+    _Engine._modal.destroy();
+    _Engine.onPause.clear();
+    _Engine.onResume.clear();
+    _Engine.onResize.clear();
+    _Engine.onReady.clear();
+    _Engine.onDestroy.clear();
+    _Engine.onVisibilityChange.clear();
+    _Engine.onFocusChange.clear();
+    _Engine._app.destroy(true, { children: true, texture: true });
+    _Engine._isRunning = false;
+    _Engine._initialized = false;
   }
 };
 
 // src/scenes/scene.ts
 var PIXI11 = __toESM(require("pixi.js"), 1);
 var Scene = class extends PIXI11.Container {
-  /** Get game instance */
-  get game() {
-    return Game.instance;
+  /** Get engine class for static access */
+  get engine() {
+    return Engine;
   }
   /** Called when scene is paused (another scene pushed on top) */
   onPause() {
@@ -2785,7 +2849,7 @@ var import_pixi_spine3 = require("pixi-spine");
   BaseModal,
   COUNT_PRESETS,
   CountAnimator,
-  Game,
+  Engine,
   GamepadManager,
   InputManager,
   KeyboardManager,