feat/particles

examples/public/bubbles.json

@@ -0,0 +1,53 @@
+{
+	"alpha": {
+		"start": 1,
+		"end": 0
+	},
+	"scale": {
+		"start": 0.2,
+		"end": 0.11,
+		"minimumScaleMultiplier": 1
+	},
+	"color": {
+		"start": "#e4f9ff",
+		"end": "#3fcbff"
+	},
+	"speed": {
+		"start": 100,
+		"end": 50,
+		"minimumSpeedMultiplier": 1
+	},
+	"acceleration": {
+		"x": 0,
+		"y": 0
+	},
+	"maxSpeed": 0,
+	"startRotation": {
+		"min": 160,
+		"max": 20
+	},
+	"noRotation": false,
+	"rotationSpeed": {
+		"min": 0,
+		"max": 0
+	},
+	"lifetime": {
+		"min": 0.2,
+		"max": 0.8
+	},
+	"blendMode": "normal",
+	"frequency": 0.001,
+	"emitterLifetime": -1,
+	"maxParticles": 500,
+	"pos": {
+		"x": 0,
+		"y": 0
+	},
+	"addAtBack": false,
+	"spawnType": "circle",
+	"spawnCircle": {
+		"x": 0,
+		"y": 0,
+		"r": 0
+	}
+}

examples/src/particles.ts

@@ -0,0 +1,71 @@
+import { RendererSystem } from "@eva/plugin-renderer";
+import { Game, GameObject, resource, RESOURCE_TYPE } from "@eva/eva.js";
+import { Particles, ParticleSystem } from "@eva/plugin-renderer-particles";
+import { Event, EventSystem, HIT_AREA_TYPE } from "@eva/plugin-renderer-event";
+export const name = 'image';
+export async function init(canvas) {
+  resource.addResource([
+    {
+      name: 'bubbles',
+      type: RESOURCE_TYPE.PARTICLES,
+      src: {
+        img_0: {
+          type: 'png',
+          url: 'https://gw.alicdn.com/imgextra/i2/O1CN01Fi8ma31eWAcqY8pXg_!!6000000003878-2-tps-99-99.png',
+        },
+        json: {
+          type: "json",
+          url: "./public/bubbles.json"
+        }
+      },
+      preload: true,
+    },
+  ]);
+
+  const game = new Game({
+    systems: [
+      new RendererSystem({
+        canvas,
+        width: window.innerWidth,
+        height: window.innerHeight - 200,
+      }),
+      new ParticleSystem(),
+      new EventSystem()
+    ],
+  });
+
+  const particlesObject = new GameObject('particlesObject', {
+    size: { width: 0, height: 0 },
+    origin: { x: 0, y: 0 },
+    position: { x: 0, y: 0 },
+    anchor: {
+      x: 0,
+      y: 0,
+    },
+  });
+
+  let emitter = particlesObject.addComponent(
+    new Particles({
+      resource: 'bubbles',
+    }),
+  );
+  game.scene.addChild(particlesObject);
+  emitter.play()
+
+  const evt = game.scene.addComponent(new Event({
+    hitArea: {
+      type: HIT_AREA_TYPE.Rect,
+      style: {
+        x: 0, y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight - 200,
+      }
+    }
+  }))
+  evt.on('touchmove', (e) => {
+    // console.log(emitter.emitter)
+    // emitter.emitter.ownerPos.set(e.data.position.x, e.data.position.y)
+    particlesObject.transform.position = e.data.position
+  })
+
+}

examples/tsconfig.json

@@ -79,8 +79,11 @@
       "@eva/plugin-transition": [
         "./packages/plugin-transition/lib"
       ],
-      "@eva/drenderer-adapter": [
-        "./packages/drenderer-adapter/lib"
+      "@eva/renderer-adapter": [
+        "./packages/renderer-adapter/lib"
+      ],
+      "@eva/plugin-renderer-particles": [
+        "./packages/plugin-renderer-particles/lib"
       ],
       "@eva/spine-base": [
         "./packages/spine-base/lib"

packages/plugin-renderer-particles/README.md

@@ -0,0 +1,6 @@
+# @eva/plugin-renderer-particles
+
+More Introduction
+
+- [EN](https://eva.js.org)
+- [中文](https://eva-engine.gitee.io)

packages/plugin-renderer-particles/__tests__/plugin-renderer-particles.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const pluginRendererParticles = require('..');
+
+describe('plugin-renderer-particles', () => {
+    it('needs tests');
+});

packages/plugin-renderer-particles/api-extractor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../api-extractor.json",
+  "mainEntryPointFilePath": "./dist/packages/plugin-renderer-particles/lib/index.d.ts",
+  "dtsRollup": {
+    "publicTrimmedFilePath": "./dist/plugin-renderer-particles.d.ts"
+  }
+}

packages/plugin-renderer-particles/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/plugin-renderer-particles.cjs.prod.js')
+} else {
+  module.exports = require('./dist/plugin-renderer-particles.cjs.js')
+}

packages/plugin-renderer-particles/lib/component.ts

@@ -0,0 +1,120 @@
+import { Component, resource } from '@eva/eva.js';
+import {
+  Emitter,
+  ParticleUtils,
+  PathParticle,
+  AnimatedParticle
+} from './pixi-particles.js'
+
+import { Container } from '@eva/renderer-adapter';
+
+
+interface ParticleParams {
+  resource: string,
+  type?: 'anim' | 'path',
+  colorStep?: number
+}
+
+export default class ParticleComponent extends Component<ParticleParams> {
+  static componentName: string = 'ParticleComponent';
+  emitter: any;
+  updateHook: any;
+  stage: any;
+  colorStep: any;
+  _resource: string;
+  type: 'anim' | 'path';
+  launched: boolean = false;
+  ready: boolean = false;
+  private times
+  set resource(val) {
+    if (val === this._resource) return
+    this._resource = val
+    this.stage?.removeChild()
+    this.emitter?.destroy()
+    this.emitter = undefined
+    this.ready = false
+    this.launched = false
+  }
+  get resource() {
+    return this._resource
+  }
+  init(
+    {
+      resource,
+      type,
+      colorStep
+    }
+  ) {
+    this.updateHook = null;
+    this.stage = null;
+    this.resource = resource;
+    this.colorStep = colorStep;
+    this.type = type;
+  }
+  /**
+   * 设置发射器的Container
+   * @param stage Container
+   */
+  async setStage(stage?: Container) {
+    this.stage = stage || this.stage;
+    const container = new Container();
+    this.stage.addChild(container);
+
+    const { instance, data } = await resource.getResource(this.resource)
+    this.emitter = new Emitter(container, instance, data.json);
+    if (this.colorStep) {
+      this.emitter.startColor = ParticleUtils.createSteppedGradient(
+        data.json.color.list,
+        this.colorStep
+      );
+    }
+    if (this.type === 'path') {
+      this.emitter.particleConstructor = PathParticle;
+    } else if (this.type === 'anim') {
+      this.emitter.particleConstructor = AnimatedParticle;
+    }
+    this.ready && this.play()
+  }
+  play(times: number = 1) {
+    if (!this.emitter) {
+      this.ready = true
+      this.times = times
+      return;
+    }
+    this.launched = true;
+    let currentTimes = 0;
+    const loop = () => {
+      currentTimes++
+      if (currentTimes < this.times) {
+        this.emitter.playOnce(loop)
+      }
+    }
+    this.emitter.playOnce(loop)
+  }
+  update(e) {
+    if (!this.launched) return
+    this.emitter && this.emitter.update(e.deltaTime * 0.001)
+    this.updateHook && this.emitter && this.updateHook(e.deltaTime);
+  }
+  change() {
+    this.setStage()
+  }
+  /**
+   * 停止粒子活动
+   * @param clear 是否在画布中清除所有粒子
+   */
+  pause(clear: boolean = false) {
+    if (clear) {
+      this.emitter.destroy()
+      return;
+    }
+    this.launched = false;
+  }
+  resume() {
+    this.launched = true
+  }
+
+  destroy() {
+    this.emitter.destroy()
+  }
+}

packages/plugin-renderer-particles/lib/index.ts

@@ -0,0 +1,4 @@
+import Particles from './component';
+import ParticleSystem from './system';
+
+export { Particles, ParticleSystem };