Particles make the game much more visual! We can use the explode utility from @latticexyz/phaser-middleware to animate blood particles every time the Life component value of an entity decreases.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { defineReactionSystem, defineUpdateQuery, getComponentValue, Has } from "@latticexyz/mobx-ecs";
|
|
2
|
-
import { drawBar, worldCoordToPixelTopLeft } from "@latticexyz/phaser-middleware";
|
|
2
|
+
import { drawBar, explode, worldCoordToPixelTopLeft } from "@latticexyz/phaser-middleware";
|
|
3
3
|
import { Context } from "../types";
|
|
4
4
|
|
|
5
5
|
export function createLifeSystem(context: Context) {
|
|
6
6
|
const {
|
|
7
7
|
world,
|
|
8
8
|
components: { Life, Position },
|
|
9
|
-
phaser: { map, graphicsPool },
|
|
9
|
+
phaser: { map, graphicsPool, particles },
|
|
10
10
|
} = context;
|
|
11
11
|
|
|
12
12
|
const lifePositionQuery = defineUpdateQuery(world, [Has(Life), Has(Position)]);
|
|
@@ -33,4 +33,21 @@ export function createLifeSystem(context: Context) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
);
|
|
36
|
+
|
|
37
|
+
const lifeQuery = defineUpdateQuery(world, [Has(Life)]);
|
|
38
|
+
defineReactionSystem(
|
|
39
|
+
world,
|
|
40
|
+
() => lifeQuery.get(),
|
|
41
|
+
async (entities) => {
|
|
42
|
+
for (const entity of entities) {
|
|
43
|
+
const life = getComponentValue(Life, entity);
|
|
44
|
+
const position = getComponentValue(Position, entity);
|
|
45
|
+
|
|
46
|
+
if (!life || !position) return;
|
|
47
|
+
|
|
48
|
+
// Blood explosion
|
|
49
|
+
explode(position, particles, map, 0x700000);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
);
|
|
36
53
|
}
|