pixi-solid 0.0.24 → 0.0.26
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 +4 -73
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,13 +7,15 @@ A custom renderer for [PixiJS](https://pixijs.com/) that lets you build your sce
|
|
|
7
7
|
|
|
8
8
|
- 💙 Lightweight and flexible SolidJS library for creating PixiJS applications.
|
|
9
9
|
- 🎁 Provides a set of custom SolidJS components that create PixiJS objects instead of HTML elements.
|
|
10
|
-
-
|
|
11
|
-
-
|
|
10
|
+
- 💪 Supports all PixiJS features.
|
|
11
|
+
- 🥳 The convenience and speed of SolidJS stores and signals to manage state.
|
|
12
12
|
- ✨ All events emitted by PixiJS objects are supported.
|
|
13
13
|
- 😎 No limitations. Break out of SolidJS any time and interact directly with PixiJS.
|
|
14
14
|
- 💫 Useful helper utilities included.
|
|
15
15
|
- 🤩 Full Typescript support for type safety and auto completion.
|
|
16
16
|
|
|
17
|
+
Take a look at the [docs site 🧑💻](https://lukecarlthompson.github.io/pixi-solid/) for more information.
|
|
18
|
+
|
|
17
19
|
---
|
|
18
20
|
|
|
19
21
|
### Install
|
|
@@ -53,77 +55,6 @@ Peer dependencies of
|
|
|
53
55
|
|
|
54
56
|
---
|
|
55
57
|
|
|
56
|
-
### Basic Usage
|
|
57
|
-
|
|
58
|
-
Here's a simple example to get you started. This will render a "Hello World" text on the screen that follows your mouse.
|
|
59
|
-
|
|
60
|
-
```jsx
|
|
61
|
-
import { render } from "solid-js/web";
|
|
62
|
-
import { PixiApplication, PixiStage, getPixiApp } from "pixi-solid";
|
|
63
|
-
import { Text, FederatedPointerEvent } from "pixi.js";
|
|
64
|
-
import { createSignal, onMount } from "solid-js";
|
|
65
|
-
|
|
66
|
-
const FollowText = () => {
|
|
67
|
-
const [position, setPosition] = createSignal({ x: 0, y: 0 });
|
|
68
|
-
|
|
69
|
-
const handlePointerMove = (e: FederatedPointerEvent) => {
|
|
70
|
-
setPosition({ x: e.global.x, y: e.global.y });
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<Text
|
|
75
|
-
text="Hello World"
|
|
76
|
-
onglobalpointermove={handlePointerMove}
|
|
77
|
-
anchor={{ x: 0.5, y: 0.5 }}
|
|
78
|
-
x={position().x}
|
|
79
|
-
y={position().y}
|
|
80
|
-
style={{ fill: "white", fontSize: 24 }}
|
|
81
|
-
/>
|
|
82
|
-
);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
const App = () => (
|
|
86
|
-
<div style={{ width: "100vw", height: "100vh", display: "flex", "flex-direction": "column" }}>
|
|
87
|
-
<PixiApplication background={"#1099bb"}>
|
|
88
|
-
<PixiCanvas>
|
|
89
|
-
<PixiStage eventMode={"static"}>
|
|
90
|
-
<FollowText />
|
|
91
|
-
</PixiStage>
|
|
92
|
-
</PixiCanvas>
|
|
93
|
-
</PixiApplication>
|
|
94
|
-
</div>
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
render(() => <App />, document.getElementById("root"));
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Core Components & Hooks
|
|
101
|
-
|
|
102
|
-
### `<PixiApplication>`
|
|
103
|
-
|
|
104
|
-
This component creates the main PixiJS `Application` instance and provides it to all child components via context. Any options passed to it are forwarded to the `Application` constructor.
|
|
105
|
-
|
|
106
|
-
### `<PixiCanvas>`
|
|
107
|
-
|
|
108
|
-
This component creates a `div` and mounts the PixiJS canvas into it. It automatically handles resizing the canvas to fit the container. Your scene components should be placed as children of `<PixiCanvas>`.
|
|
109
|
-
|
|
110
|
-
### `<PixiStage>`
|
|
111
|
-
|
|
112
|
-
This component gives us a reference to the Pixi stage which is the top level container of your scene. It is useful for listening to global events.
|
|
113
|
-
|
|
114
|
-
### `getPixiApp()`
|
|
115
|
-
|
|
116
|
-
A hook to get access to the PixiJS `Application` instance.
|
|
117
|
-
|
|
118
|
-
### `getTicker()`
|
|
119
|
-
|
|
120
|
-
A hook to get access to the Pixi ticker instance.
|
|
121
|
-
|
|
122
|
-
### `onTick()`
|
|
123
|
-
|
|
124
|
-
A hook to auto subscribe and unsubscribe to the ticker in sync with the components lifecycle.
|
|
125
|
-
Any function passed in here will be called every frame whilst the component is mounted.
|
|
126
|
-
|
|
127
58
|
## Contributing
|
|
128
59
|
|
|
129
60
|
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.
|