Fix particle effect recipe hot reloading section

This commit is contained in:
thepaperpilot 2023-04-10 08:14:19 -05:00
parent b7c4cefa4f
commit 35f5ec739e

View file

@ -2,6 +2,8 @@
This is a more comprehensive example based on the Kronos example used in the [nodes](../advanced-concepts/nodes) docs. You will design a particle effect, make it appear on another feature, and ensure it adapts to the game state. This is a more comprehensive example based on the Kronos example used in the [nodes](../advanced-concepts/nodes) docs. You will design a particle effect, make it appear on another feature, and ensure it adapts to the game state.
## Design the Effect
First, design the particle effect. Profectus uses [pixi-particles](https://github.com/pixijs/particle-emitter), and you can use the online particle effect editor [here](http://pixijs.github.io/pixi-particles-editor/). However, the editor returns an older format of the particle effect emitter config, so you'll need to convert it like this: First, design the particle effect. Profectus uses [pixi-particles](https://github.com/pixijs/particle-emitter), and you can use the online particle effect editor [here](http://pixijs.github.io/pixi-particles-editor/). However, the editor returns an older format of the particle effect emitter config, so you'll need to convert it like this:
```ts ```ts
@ -11,6 +13,8 @@ import { upgradeConfig } from "@pixi/particle-emitter"
const particleEffect = upgradeConfig(myParticleEffect); const particleEffect = upgradeConfig(myParticleEffect);
``` ```
## Create the Particles
Next, create the particles feature and render it. You'll also want to track the bounding rect of the particle effects. Consider the following step: Next, create the particles feature and render it. You'll also want to track the bounding rect of the particle effects. Consider the following step:
```ts ```ts
@ -24,7 +28,11 @@ const particles = createParticles(() => ({
})); }));
``` ```
This code adds a bounding rect for the particles and updates it when the container is created or resizes. Now, create the emitter. Pull in the Kronos example, which displays a particle effect when `actualGain > 0`. This code adds a bounding rect for the particles and updates it when the container is created or resizes.
## Adding the Effect
Now, create the emitter. Pull in the Kronos example, which displays a particle effect when `actualGain > 0`.
```ts ```ts
const particlesEmitter = ref(particles.addEmitter(element.particlesConfig)); const particlesEmitter = ref(particles.addEmitter(element.particlesConfig));
@ -56,7 +64,25 @@ watch(
This code watches for whether the node exists and the `boundingRect` exists, which are required to display the effect. You can additionally watch any other values that would have an impact on the particle effect, like whether or not it should be emitting. This code watches for whether the node exists and the `boundingRect` exists, which are required to display the effect. You can additionally watch any other values that would have an impact on the particle effect, like whether or not it should be emitting.
If you're using hot reloading, you might need to reload the particle effect. Here's an example from Kronos: ## Support Hot Reloading
If you're using hot reloading, you might need to reload the particle effect. Here's an example from Kronos of adding the callback to the particles constructor:
```ts
const particles = createParticles(() => ({
fullscreen: false,
zIndex: -1,
boundingRect: ref<null | DOMRect>(null),
onContainerResized(boundingRect) {
this.boundingRect.value = boundingRect;
},
onHotReload() {
Object.values(elements).forEach(element => element.refreshParticleEffect());
}
}));
```
The `refreshParticleEffect` function destroys the emitter, creates a new one, and updates it:
```ts ```ts
const refreshParticleEffect = () => { const refreshParticleEffect = () => {