phaser3-rex-plugins-types

0.2.0 verified Sat Apr 25 auth: no javascript

TypeScript type definitions for phaser3-rex-plugins, a comprehensive collection of plugins for Phaser 3. Current stable version 0.2.0, released 2023-09-12. Provides type safety and autocompletion for popular plugins like Webfont loader, Container Lite, Input text, and more. Updated infrequently; supports only a subset of all rex plugins (marked as [x] in README). No built-in tests or CI beyond Travis. Differentiator: fills the gap for TypeScript users of the rexrainbow plugin ecosystem, unlike the JS-only original.

Common errors

error Cannot find name 'rexWebfont'. Did you mean 'webfont'? ↓

cause WebfontLoader is not loaded in the current scene's loader; types only augment after correct loading.

fix

Ensure you have installed and imported phaser3-rex-plugins (the JS package) and added the plugin to the Phaser config. Example: import RexPlugins from 'phaser3-rex-plugins'; const config = { plugins: { scene: [{ key: 'rexWebfont', plugin: RexPlugins.WeFontLoader, sceneKey: 'rexWebfont' }] } }; Then use this.load.rexWebfont(...).

error Property 'rexContainerLite' does not exist on type 'GameObjectFactory'. ↓

cause ContainerLite types not yet loaded or tsconfig include misconfigured.

fix

Confirm you have added this package to tsconfig include array AND that the plugin is registered in Phaser config via phaser3-rex-plugins. Example: import RexPlugins from 'phaser3-rex-plugins'; const config = { plugins: { scene: [{ key: 'rexContainerLite', plugin: RexPlugins.ContainerLite, sceneKey: 'rexContainerLite' }] } }.

error Module 'phaser3-rex-plugins-types' has no default export. ↓

cause This package only provides global type augmentation, not a default export.

fix

Do not use import something from 'phaser3-rex-plugins-types'. Instead, just import 'phaser3-rex-plugins-types' once at the top of your entry file.

Warnings

gotcha Types are only provided for a subset of rex plugins; many popular plugins (e.g., BBCodeText, NinePatch, GridTable) are not yet typed. ↓

fix Check the README for supported plugins; for unsupported ones, you must write custom declarations or use `any`.

gotcha The types augment Phaser's global namespace using module augmentation. This may conflict with other Phaser type augmentations or cause unexpected behavior if not loaded correctly. ↓

fix Ensure tsconfig includes this package and that no other package provides conflicting augmentations.

breaking Version 0.1.0 changed the way types are included: previously you could just import the module; now you must add to tsconfig.json's include array. ↓

fix Add "node_modules/phaser3-rex-plugins-types" to the include array in tsconfig.json. See quickstart.

gotcha Some plugin types may be incomplete or incorrect, as the package is in early development (v0.2.0). ↓

fix Validate types against the original rex plugins documentation. Report issues on GitHub.

Install

npm install phaser3-rex-plugins-types

yarn add phaser3-rex-plugins-types

pnpm add phaser3-rex-plugins-types

Imports

Default export (package.json)
wrong
```
import RexPlugins from 'phaser3-rex-plugins-types'
```
correct
```
import 'phaser3-rex-plugins-types'
```
This package provides global augmentation, not a default export. Just import the module for types.

Include in tsconfig

wrong

Not adding to include or using triple-slash directives

correct

Add "node_modules/phaser3-rex-plugins-types" to tsconfig.json include array

Must be explicitly included to ensure types are loaded.

WebfontLoader (example plugin)

wrong

import { WebfontLoader } from 'phaser3-rex-plugins-types'

correct

// types are available via Phaser.Loader.LoaderPlugin extension. No explicit import needed.

Types augment Phaser's global namespace; plugin-specific exports are not available.

Quickstart

Initializes a basic Phaser 3 game with TypeScript, demonstrating how to use rex plugins types (WebfontLoader and ContainerLite) without explicit imports.

// 1. Install: npm i --save phaser3-rex-plugins-types
// 2. Add to tsconfig.json:
/* {
  "include": ["**/*", "node_modules/phaser3-rex-plugins-types"]
} */
// 3. In your game code, types are automatically available:
import Phaser from 'phaser';

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: { create },
};

function create(this: Phaser.Scene) {
  // WebfontLoader: rexWebfont is augmented on this.load
  this.load.rexWebfont({ key: 'font', custom: 'https://fonts.googleapis.com/css?family=Roboto' });
  // ContainerLite is available via this.add.rexContainerLite
  const container = this.add.rexContainerLite(400, 300, 200, 100);
}

new Phaser.Game(config);