diff --git a/README.md b/README.md index 43b612c1..f867f65a 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,41 @@ [![NPM version](https://img.shields.io/npm/v/phaser-jsx.svg)](https://www.npmjs.com/package/phaser-jsx) [![build](https://github.com/remarkablegames/phaser-jsx/actions/workflows/build.yml/badge.svg)](https://github.com/remarkablegames/phaser-jsx/actions/workflows/build.yml) -Phaser JSX +> [!NOTE] +> This package is under development so expect breaking changes in future releases. + +Use [JSX](https://facebook.github.io/jsx/) in [Phaser](https://phaser.io/). ## Quick Start -```ts -import { name } from 'phaser-jsx'; +With JSX: + +```jsx +import Phaser from 'phaser'; +import { Text, render } from 'phaser-jsx'; + +new Phaser.Game({ + scene: { + create() { + render(, this); + }, + }, +}); +``` + +Without JSX: + +```js +import Phaser from 'phaser'; +import { jsx, render } from 'phaser-jsx'; + +new Phaser.Game({ + scene: { + create() { + render(jsx(Phaser.GameObjects.Text, { text: 'Hello, world!' }), this); + }, + }, +}); ``` ## Installation @@ -30,6 +59,7 @@ yarn add phaser-jsx [CDN](https://unpkg.com/browse/phaser-jsx/): ```html + ``` @@ -37,25 +67,34 @@ yarn add phaser-jsx ES Modules: -```ts -import { name } from 'phaser-jsx'; +```js +import { createElement, render } from 'phaser-jsx'; ``` CommonJS: -```ts -const { name } = require('phaser-jsx'); +```js +const { createElement, render } = require('phaser-jsx'); ``` UMD: ```html + ``` +## TypeScript + +To get better type support, import the GameObject from `phaser-jsx` instead of `phaser`: + +```ts +import { Text } from 'phaser-jsx'; +``` + ## Release Release is automated with [Release Please](https://github.com/googleapis/release-please).