[!NOTE] This package is under development so expect breaking changes in future releases.

@erboladaiorg/explicabo-rerum

📝 Use JSX in Phaser.

Examples

• CodeSandbox
• Replit
• JSFiddle
• Examples

Quick Start

With JSX:

// index.jsx
import Phaser from 'phaser';
import { Text, render } from '@erboladaiorg/explicabo-rerum';

new Phaser.Game({
  scene: {
    create() {
      render(<Text text="Hello, world!" />, this);
    },
  },
});

Without JSX:

// index.js
import Phaser from 'phaser';
import { jsx, render } from '@erboladaiorg/explicabo-rerum';

new Phaser.Game({
  scene: {
    create() {
      render(jsx(Phaser.GameObjects.Text, { text: 'Hello, world!' }), this);
    },
  },
});

Install

NPM:

npm install @erboladaiorg/explicabo-rerum

Yarn:

yarn add @erboladaiorg/explicabo-rerum

CDN:

<script src="https://unpkg.com/phaser@latest/dist/phaser.min.js"></script>
<script src="https://unpkg.com/@erboladaiorg/explicabo-rerum@latest/umd/@erboladaiorg/explicabo-rerum.min.js"></script>

Usage

ES Modules:

import { createElement, render } from '@erboladaiorg/explicabo-rerum';

CommonJS:

const { createElement, render } = require('@erboladaiorg/explicabo-rerum');

UMD:

<script src="https://unpkg.com/phaser@latest/dist/phaser.min.js"></script>
<script src="https://unpkg.com/@erboladaiorg/explicabo-rerum@latest/umd/@erboladaiorg/explicabo-rerum.min.js"></script>
<script>
  const { render, jsx } = window.PhaserJSX;
</script>

TypeScript

For better type support, import GameObject from @erboladaiorg/explicabo-rerum instead of phaser:

import { Text } from '@erboladaiorg/explicabo-rerum';

[!TIP] All GameObjects exported from @erboladaiorg/explicabo-rerum are aliases of GameObjects from phaser.

Update tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@erboladaiorg/explicabo-rerum"
  }
}

Vite

Update vite.config.mjs:

import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    jsxImportSource: '@erboladaiorg/explicabo-rerum',
  },
});

JSX Pragma

If you're not using jsxImportSource, you can set JSX pragma at the top of your file:

/** @jsx jsx */
import { jsx } from '@erboladaiorg/explicabo-rerum';

How Does It Work?

The package follows React conventions like having createElement and jsx-runtime.

The render function renders the game object(s) inside the scene.

If you need nesting and relative positioning, use Container:

<Container>
  <Text text="Child 1" />
  <Text text="Child 2" />
</Container>

Hooks

useScene

If you start a single Scene, retrieve it with the useScene hook:

import { useScene } from '@erboladaiorg/explicabo-rerum';

const scene = useScene();

[!WARNING] Don't use this hook if you start multiple Scenes.

To specify a Scene class in TypeScript:

class MyScene extends Phaser.Scene {}

const scene = useScene<MyScene>();

Release

Release is automated with Release Please.

License

MIT