Skip to content

Commit

Permalink
docs: Update particle docs
Browse files Browse the repository at this point in the history
  • Loading branch information
eonarheim committed Oct 1, 2024
1 parent 217b33d commit d4305f1
Showing 1 changed file with 61 additions and 16 deletions.
77 changes: 61 additions & 16 deletions site/docs/12-other/13-particles.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,74 @@ Particles can be used to generate dust, smoke, or fire effects in your games.
The easiest way to create a [[ParticleEmitter]] is to use the
[Particle Tester](https://excaliburjs.com/particle-tester/) to generate code for emitters.

:::warning
The particle tester constructor is currently out of date, you will need to modify it to match the below.
:::

### Example: Adding an emitter

```js
const actor = new ex.Actor(...);
const emitter = new ex.ParticleEmitter(...);
emitter.emitterType = ex.EmitterType.Circle; // Shape of emitter nozzle
emitter.radius = 5;
emitter.minVel = 100;
emitter.maxVel = 200;
emitter.minAngle = 0;
emitter.maxAngle = Math.PI * 2;
emitter.emitRate = 300; // 300 particles/second
emitter.opacity = 0.5;
emitter.fadeFlag = true; // fade particles overtime
emitter.particleLife = 1000; // in milliseconds = 1 sec
emitter.maxSize = 10; // in pixels
emitter.minSize = 1;
emitter.particleColor = ex.Color.Rose;
// set emitter settings
emitter.isEmitting = true; // should the emitter be emitting
const emitter = new ParticleEmitter({
x: 100,
y: 100,
radius: 5,
emitterType: ex.EmitterType.Circle, // Shape of emitter nozzle
minVel: 100,
maxVel: 200,
minAngle: 0,
maxAngle: Math.PI * 2,
isEmitting: true, // should the emitter be emitting
emitRate: 300, // 300 particles/second
opacity: 0.5,
fadeFlag: true, // fade particles overtime
particleLife: 1000, // in milliseconds = 1 sec
minSize: 1, // random size minimum in pixels
maxSize: 10, // random size maximum in pixels
startSize: 10, // starting size in pixels
endSize: 1, // ending size in pixels
acceleration: new Vector(accelX, accelY),
beginColor: ex.Color.Red,
endColor: ex.Color.Blue,
focusAccel: 800
});
// add the emitter as a child actor, it will draw on top of the parent actor
// and move with the parent
actor.add(emitter);
// or, alternatively, add it to the current scene
engine.add(emitter);
```

### 🧪 Alpha Particle Emitter

In the latest build particle specific properties are nested under the `particle` config

```typescript
const emitter = new ParticleEmitter({
x: game.halfDrawWidth,
y: game.halfDrawHeight,
width,
height,
emitterType,
radius,
isEmitting,
emitRate,
focusAccel: 800,
particle: {
minVel,
maxVel,
minAngle,
maxAngle,
opacity,
fade,
life,
minSize,
maxSize,
startSize,
endSize,
acc: new Vector(accelX, accelY),
beginColor: ex.Color.Red,
endColor: ex.Color.Blue,
}
});
```

0 comments on commit d4305f1

Please sign in to comment.