vue-phaserjs 4.4.0 → 4.5.0
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 +19 -14
- package/dist/index.d.ts +11038 -0
- package/dist/index.js +2039 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[![NPM downloads][badge-npm-downloads]][url-npm]
|
|
6
6
|
[![NPM Unpacked Size (with version)][badge-npm-unpacked-size]][url-npm]
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
This package integrates the [Phaser](https://phaser.io) game engine with Vue. It provides Vue components and composables that bridge Phaser scenes, game objects and Pinia state to the Vue component lifecycle.
|
|
9
9
|
|
|
10
10
|
Design notes live in [the specs](https://github.com/Esposter/Esposter/tree/main/openspec/specs/vue-phaserjs).
|
|
11
11
|
|
|
@@ -19,14 +19,19 @@ Design notes live in [the specs](https://github.com/Esposter/Esposter/tree/main/
|
|
|
19
19
|
|
|
20
20
|
## <a name="getting-started">🚀 Getting Started</a>
|
|
21
21
|
|
|
22
|
+
1. Install the packages.
|
|
23
|
+
|
|
22
24
|
```bash
|
|
23
25
|
pnpm i vue-phaserjs @esposter/shared parse-tmx vue phaser phaser4-rex-plugins pinia
|
|
24
26
|
```
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
Check: the install ends with no peer or version conflict, and `package.json` lists `vue-phaserjs`.
|
|
29
|
+
|
|
30
|
+
2. Add these type declaration files. The editor shows intellisense for scene keys and custom plugins.
|
|
31
|
+
- [`phaser.d.ts`](https://github.com/Esposter/Esposter/blob/main/apps/web/app/types/phaser.d.ts) narrows the scene key types.
|
|
32
|
+
- [`vue-phaserjs.d.ts`](https://github.com/Esposter/Esposter/blob/main/apps/web/app/types/vue-phaserjs.d.ts) provides the custom plugin types.
|
|
27
33
|
|
|
28
|
-
|
|
29
|
-
- [`vue-phaserjs.d.ts`](https://github.com/Esposter/Esposter/blob/main/apps/web/app/types/vue-phaserjs.d.ts) — provides custom plugin types
|
|
34
|
+
3. Create a component from this code. The page shows the text `Hello`.
|
|
30
35
|
|
|
31
36
|
```vue
|
|
32
37
|
<script setup lang="ts">
|
|
@@ -42,19 +47,19 @@ import { Game, Scene, Text } from "vue-phaserjs";
|
|
|
42
47
|
</template>
|
|
43
48
|
```
|
|
44
49
|
|
|
45
|
-
|
|
50
|
+
For a complete example, see [the dungeons page](https://github.com/Esposter/Esposter/blob/main/apps/web/app/pages/dungeons.vue). It embeds a Phaser game in a Nuxt/Vue page with Pinia-driven state.
|
|
46
51
|
|
|
47
52
|
## <a name="key-exports">🧩 Key Exports</a>
|
|
48
53
|
|
|
49
|
-
| Export | Kind | Purpose
|
|
50
|
-
| ------------------------------------------------------------------------- | ---------- |
|
|
51
|
-
| `Game` | component | Starts a Phaser game in its element
|
|
52
|
-
| `onCreate`, `onInit`, `onNextTick`, `onPreload`, `onShutdown`, `onUpdate` | function | Runs a callback at one stage of a scene's lifecycle
|
|
53
|
-
| `Scene` | component | Adds a Phaser scene
|
|
54
|
-
| `Sprite` | component | A sprite drawn in the enclosing scene from its configuration
|
|
55
|
-
| `useAnimations` | composable | Creates a scene's animation frames
|
|
56
|
-
| `useGame` | composable | The Phaser game in the store
|
|
57
|
-
| `useTween` | composable | Sets a tween on a ref
|
|
54
|
+
| Export | Kind | Purpose |
|
|
55
|
+
| ------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------- |
|
|
56
|
+
| `Game` | component | Starts a Phaser game in its element. Renders its slot once the game is ready. |
|
|
57
|
+
| `onCreate`, `onInit`, `onNextTick`, `onPreload`, `onShutdown`, `onUpdate` | function | Runs a callback at one stage of a scene's lifecycle. Returns the function that removes the callback. |
|
|
58
|
+
| `Scene` | component | Adds a Phaser scene. Starts it when `autoStart` is set. Renders its children while it is active. |
|
|
59
|
+
| `Sprite` | component | A sprite drawn in the enclosing scene from its configuration |
|
|
60
|
+
| `useAnimations` | composable | Creates a scene's animation frames. Removes them on shutdown or unmount. |
|
|
61
|
+
| `useGame` | composable | The Phaser game in the store. Throws until a Game component has created it. |
|
|
62
|
+
| `useTween` | composable | Sets a tween on a ref. Clears the ref when the tween completes. |
|
|
58
63
|
|
|
59
64
|
## <a name="license">⚖️ License</a>
|
|
60
65
|
|