pixi-solid 0.1.19 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,11 +14,7 @@ A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your sce
|
|
|
14
14
|
- 💫 Useful helper utilities included.
|
|
15
15
|
- 🤩 Full Typescript support for type safety and auto completion.
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
### Install
|
|
17
|
+
## Install
|
|
22
18
|
|
|
23
19
|
```bash
|
|
24
20
|
npm i pixi-solid pixi.js solid-js
|
|
@@ -28,33 +24,60 @@ Peer dependencies of
|
|
|
28
24
|
|
|
29
25
|
```json
|
|
30
26
|
{
|
|
31
|
-
"pixi.js": "
|
|
32
|
-
"solid-js": "
|
|
27
|
+
"pixi.js": ">=8.14.3 <9",
|
|
28
|
+
"solid-js": ">=1.9.10 <2"
|
|
33
29
|
}
|
|
34
30
|
```
|
|
35
31
|
|
|
36
|
-
|
|
32
|
+
## Basic usage
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { PixiCanvas, Sprite } from "pixi-solid";
|
|
36
|
+
import { createSignal } from "solid-js";
|
|
37
|
+
import { Texture } from "pixi.js";
|
|
38
|
+
|
|
39
|
+
export const DemoApp = () => {
|
|
40
|
+
const [scale, setScale] = createSignal(10);
|
|
41
|
+
|
|
42
|
+
const handleSpriteTap = () => {
|
|
43
|
+
setScale((currentScale) => currentScale + 1);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<PixiCanvas style={{ width: "100%", height: "100vh" }}>
|
|
48
|
+
<Sprite
|
|
49
|
+
texture={Texture.WHITE}
|
|
50
|
+
scale={scale()}
|
|
51
|
+
onpointertap={handleSpriteTap}
|
|
52
|
+
tint="#ff0000"
|
|
53
|
+
/>
|
|
54
|
+
</PixiCanvas>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Documentation and examples
|
|
60
|
+
|
|
61
|
+
Check out the [documentation site 🧑💻](https://lukecarlthompson.github.io/pixi-solid/) for more comprehensive information and live examples.
|
|
37
62
|
|
|
38
|
-
|
|
63
|
+
## Why combine SolidJS with PixiJS?
|
|
39
64
|
|
|
40
|
-
- **Declarative PixiJS scene graph**: Using SolidJS's JSX templating means we get declarative control over the scene graph.
|
|
65
|
+
- **Declarative PixiJS scene graph**: Using SolidJS's JSX templating means we get declarative control over the scene graph. For improved separation of concerns, simpler views and more scalable projects.
|
|
41
66
|
|
|
42
|
-
- **
|
|
67
|
+
- **SolidJS hooks in our PixiJS components**: SolidJS rendering PixiJS components means we can take advantage of the built in lifecycle methods in SolidJS `onMount`, `onCleanup` as well as extra custom hooks for responsive behaviour and ticker subscriptions.
|
|
43
68
|
|
|
44
|
-
- **Shared State and Reactivity**:
|
|
69
|
+
- **Shared State and Reactivity**: HTML and PixiJS graphics can stay in sync effortlessly because they can subscribe to the same state.
|
|
45
70
|
|
|
46
|
-
- **Combine the best of both worlds**: Pixi Solid makes it easy to use HTML elements alongside a PixiJS canvas, allowing you to create rich user interfaces that combine the strengths of both technologies.
|
|
71
|
+
- **Combine the best of both worlds**: Pixi Solid makes it easy to use HTML elements alongside or on top of a PixiJS canvas, allowing you to create rich user interfaces that combine the strengths of both technologies.
|
|
47
72
|
|
|
48
73
|
- **Composability**: Pixi Solid components can be easily composed together to create complex scenes and animations out of reusable components.
|
|
49
74
|
|
|
50
75
|
- **SolidJS is a thin wrapper**: While Pixi Solid provides a nice abstraction over PixiJS it provides access to all the properties and events of PixiJS objects.
|
|
51
76
|
|
|
52
|
-
- **SolidJS is really fast**:
|
|
77
|
+
- **SolidJS is really fast**: SolidJS is one of the fastest front-end frameworks out there so the overhead is very minimal.
|
|
53
78
|
|
|
54
79
|
- **SolidJS is fully featured**: It has stores, signals, suspense, error boundaries, resource fetching and more. It's a great feature set for simple or complex applications and you won't have to reach for other libraries to manage templating or state.
|
|
55
80
|
|
|
56
|
-
---
|
|
57
|
-
|
|
58
81
|
## Contributing
|
|
59
82
|
|
|
60
83
|
Contributions are welcome! This project is still in its early stages, so feel free to open an issue to report a bug, suggest a feature, or submit a pull request.
|