https://github.com/sammccord/solid-pixi
Create PIXI applications with JSX and Signals
https://github.com/sammccord/solid-pixi
gamedev pixijs solidjs
Last synced: 6 months ago
JSON representation
Create PIXI applications with JSX and Signals
- Host: GitHub
- URL: https://github.com/sammccord/solid-pixi
- Owner: sammccord
- License: mit
- Created: 2022-11-28T01:16:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-16T18:50:38.000Z (8 months ago)
- Last Synced: 2025-04-12T22:05:09.431Z (6 months ago)
- Topics: gamedev, pixijs, solidjs
- Language: TypeScript
- Homepage: https://sammccord.github.io/solid-pixi/
- Size: 2.53 MB
- Stars: 40
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Create Pixi.js experiences using JSX and Signals
## Install
```sh
npm install --save solid-pixi solid-js pixi.js
```
If you need to execute code in environments that don't support `new Function`, use `solid-pixi-unsafe` instead.
`npm install --save pixi-unsafe solid-js solid-pixi-unsafe`
## Basic Usage
- [Basic Examples](https://sammccord.github.io/solid-pixi/guides/basic/assets/)
- [Examples Source](./packages/docs/src/components/)
```tsx
import { Texture } from 'pixi.js'
import { createSignal, Suspense } from 'solid-js'
import { render, Application, useAsset, P, useApplication } from 'solid-pixi'
render(() => )
function Click(props) {
return (
)
}
function ClickContainer() {
const app = useApplication()
const [texture] = useAsset('https://pixijs.com/assets/bunny.png')
const [scale, setScale] = createSignal(1)
return (
{
setScale(s => s * 1.25)
}}
scale={{ x: scale(), y: scale() }}
anchor={{ x: 0.5, y: 0.5 } as PointLike}
x={app.screen.width / 2}
y={app.screen.height / 2}
/>
)
}
```
## Contributing
Sure, go ahead and fork.
`solid-pixi` is a `pnpm` monorepo so run `pnpm install` from the root of the workspace.
Source code can be found in `/packages`, with the main published package in `/packages/solid-pixi`
### Developing
`cd packages/docs && npm run dev` will run the example page to quickly iterate on components