Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remarkablegames/phaser-jsx
📝 Use JSX in Phaser
https://github.com/remarkablegames/phaser-jsx
game javascript jsx library npm pacakge phaser react typescript ui
Last synced: 4 months ago
JSON representation
📝 Use JSX in Phaser
- Host: GitHub
- URL: https://github.com/remarkablegames/phaser-jsx
- Owner: remarkablegames
- License: mit
- Created: 2024-01-08T06:07:42.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-29T02:28:42.000Z (4 months ago)
- Last Synced: 2024-09-29T22:56:18.530Z (4 months ago)
- Topics: game, javascript, jsx, library, npm, pacakge, phaser, react, typescript, ui
- Language: TypeScript
- Homepage: https://remarkablegames.org/phaser-jsx
- Size: 2.47 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
> [!NOTE]
> This package is under development so expect _breaking changes_ in future releases.
# phaser-jsx
[](https://nodei.co/npm/phaser-jsx/)
[](https://www.npmjs.com/package/phaser-jsx)
[](https://github.com/remarkablegames/phaser-jsx/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablegames/phaser-jsx)
📝 Use [JSX](https://facebook.github.io/jsx/) in [Phaser](https://phaser.io/).
### Examples
- [CodeSandbox](https://codesandbox.io/p/devbox/phaser-jsx-9ldp6n)
- [Replit](https://replit.com/@remarkablemark/phaser-jsx)
- [JSFiddle](https://jsfiddle.net/remarkablemark/dLhvuo42/)
- [Examples](https://github.com/remarkablegames/phaser-jsx/tree/master/examples)
## Quick Start
With JSX:
```jsx
// index.jsx
import Phaser from 'phaser';
import { Text, render } from 'phaser-jsx';
new Phaser.Game({
scene: {
create() {
render(, this);
},
},
});
```
Without JSX:
```js
// index.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);
},
},
});
```
## Install
[NPM](https://www.npmjs.com/package/phaser-jsx):
```sh
npm install phaser-jsx
```
[Yarn](https://yarnpkg.com/package/phaser-jsx):
```sh
yarn add phaser-jsx
```
[CDN](https://unpkg.com/browse/phaser-jsx/):
```html
```
## Usage
ES Modules:
```js
import { createElement, render } from 'phaser-jsx';
```
CommonJS:
```js
const { createElement, render } = require('phaser-jsx');
```
UMD:
```html
const { render, jsx } = window.PhaserJSX;
```
## TypeScript
For better type support, import [GameObject](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.html) from `phaser-jsx` instead of `phaser`:
```ts
import { Text } from 'phaser-jsx';
```
> [!TIP]
> All GameObjects exported from `phaser-jsx` are aliases of GameObjects from `phaser`.
Update `tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "phaser-jsx"
}
}
```
## Vite
Update `vite.config.mjs`:
```js
import { defineConfig } from 'vite';
export default defineConfig({
esbuild: {
jsxImportSource: 'phaser-jsx',
},
});
```
### JSX Pragma
If you're not using `jsxImportSource`, you can set JSX pragma at the top of your file:
```jsx
/** @jsx jsx */
import { jsx } from 'phaser-jsx';
```
## How Does It Work?
The package follows [React](https://react.dev/) 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`:
```jsx
```
## Hooks
### `useScene`
If you start a single Scene, retrieve it with the `useScene` hook:
```js
import { useScene } from 'phaser-jsx';
const scene = useScene();
```
> [!WARNING]
> Don't use this hook if you start multiple Scenes.
To specify a Scene class in TypeScript:
```ts
class MyScene extends Phaser.Scene {}
const scene = useScene();
```
## Release
Release is automated with [Release Please](https://github.com/googleapis/release-please).
## License
[MIT](https://github.com/remarkablegames/phaser-jsx/blob/master/LICENSE)