粒子动画

上次修改时间:2021-07-03 18:41:45

Oasis Engine 的粒子渲染器 ParticleRenderer 是常用的渲染组件,具备丰富的属性,通过调节各个属性值达到绚丽多彩的粒子效果。

/**
 * @title Particle Renderer
 * @category Particle
 */
// import { OrbitControl } from "@oasis-engine/controls";
import { AssetType, Camera, Color, ParticleRenderer, Texture2D, Vector3, WebGLEngine } from "oasis-engine";

//-- create engine object
const engine = new WebGLEngine("canvas");
engine.canvas.resizeByClientSize();

const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity();

//-- create camera
const cameraEntity = rootEntity.createChild("camera_entity");
cameraEntity.transform.position = new Vector3(0, 0, 50);
cameraEntity.addComponent(Camera);

engine.run();

const particleEntity = rootEntity.createChild("particle");

let particles: ParticleRenderer = particleEntity.addComponent(ParticleRenderer);

engine.resourceManager
  .load<Texture2D>({
    url: "https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*kxloQYq2YDEAAAAAAAAAAAAAARQnAQ",
    type: AssetType.Texture2D
  })
  .then((resource) => {
    particles.maxCount = 100;
    particles.startTimeRandomness = 10;
    particles.lifetime = 4;
    particles.position = new Vector3(0, 20, 0);
    particles.positionRandomness = new Vector3(100, 0, 0);
    particles.velocity = new Vector3(0, -3, 0);
    particles.velocityRandomness = new Vector3(1, 2, 0);
    particles.accelerationRandomness = new Vector3(0, 1, 0);
    particles.velocityRandomness = new Vector3(-1, -1, -1);
    particles.rotateVelocity = 1;
    particles.rotateVelocityRandomness = 1;
    particles.size = 1;
    particles.sizeRandomness = 0.8;
    particles.color = new Color(0.5, 0.5, 0.5);
    particles.colorRandomness = 1;
    particles.isFadeIn = true;
    particles.isFadeOut = true;
    particles.texture = resource;
    particles.start();
  });

代码示例

let particles: ParticleRenderer = particleEntity.addComponent(ParticleRenderer);

particles.maxCount = 100;
particles.velocity = new Vector3(1, 1, 1);
particles.acceleration = new Vector3(-1, -1, -1);
particles.accelerationRandomness = new Vector3(-3, -3, -3);
particles.velocityRandomness = new Vector3(-1, -1, -1);
particles.rotateRate = 1;
particles.rotateRateRandomness = 1;
particles.size = 1;
particles.is2d = true;

// Start play
particleComp.start();

// Stop
particleComp.stop();

属性

粒子渲染器包含生命周期、材质、变换等属性。

基础属性

  • maxCount:最大粒子数,决定所占内存的大小,需要合理分配。

生命周期

材质

  • texture : 粒子形状贴图。
  • color:粒子颜色。
  • colorRandomness:颜色随机因子,取值在 0~1 之间,颜色的 R、G、B通道的色值会分别在随机因子范围内取一个随机值,然后截取在 0~1 范围内。
  • isUseOriginColor :是否使用图片原色,为 true (默认) 时使用图片原色,为 false  时,图片原色混合用户配置的颜色,可以在原图的基础上混合出任意的颜色。
  • spriteSheet:精灵图表,每个粒子可以渲染精灵图中某块区域:
/**
 * @title Particle Sprite Sheet
 * @category Particle
 */
import { OrbitControl } from "@oasis-engine/controls";
import {
  AssetType,
  Camera,
  Color,
  ParticleRenderer,
  ParticleRendererBlendMode,
  Texture2D,
  Vector3,
  WebGLEngine
} from "oasis-engine";

//-- create engine object
const engine = new WebGLEngine("canvas");
engine.canvas.resizeByClientSize();

const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity();

//-- create camera
const cameraEntity = rootEntity.createChild("camera_entity");
cameraEntity.transform.position = new Vector3(0, 0, 50);
cameraEntity.addComponent(Camera);
const controls = cameraEntity.addComponent(OrbitControl);
controls.autoRotate = true;
controls.autoRotateSpeed = Math.PI / 5;

engine.run();

const particleEntity = rootEntity.createChild("particle");

let particles: ParticleRenderer = particleEntity.addComponent(ParticleRenderer);

const spriteSheet = [
  {
    x: 0,
    y: 0,
    w: 100,
    h: 95,
    offX: 0,
    offY: 0,
    sourceW: 100,
    sourceH: 95
  },
  {
    x: 100,
    y: 0,
    w: 48,
    h: 46,
    offX: 0,
    offY: 0,
    sourceW: 48,
    sourceH: 46
  },
  {
    x: 148,
    y: 0,
    w: 97,
    h: 90,
    offX: 0,
    offY: 0,
    sourceW: 97,
    sourceH: 90
  },
  {
    x: 245,
    y: 0,
    w: 148,
    h: 128,
    offX: 0,
    offY: 0,
    sourceW: 148,
    sourceH: 128
  },
  {
    x: 393,
    y: 0,
    w: 118,
    h: 249,
    offX: 0,
    offY: 0,
    sourceW: 118,
    sourceH: 249
  },
  {
    x: 100,
    y: 90,
    w: 124,
    h: 94,
    offX: 0,
    offY: 0,
    sourceW: 124,
    sourceH: 94
  },
  {
    x: 0,
    y: 184,
    w: 249,
    h: 185,
    offX: 0,
    offY: 0,
    sourceW: 249,
    sourceH: 185
  },
  {
    x: 0,
    y: 95,
    w: 86,
    h: 83,
    offX: 0,
    offY: 0,
    sourceW: 86,
    sourceH: 83
  }
];

engine.resourceManager
  .load<Texture2D>({
    url: "https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*_oorR5SrpXcAAAAAAAAAAAAAARQnAQ",
    type: AssetType.Texture2D
  })
  .then((resource) => {
    particles.maxCount = 400;
    particles.startTimeRandomness = 5;
    particles.position = new Vector3(0, -10, 0);
    particles.velocity = new Vector3(0, 20, 0);
    particles.velocityRandomness = new Vector3(10, 2, 10);
    particles.acceleration = new Vector3(0, -10, 0);
    particles.accelerationRandomness = new Vector3(2, 4, 5);
    particles.rotateVelocity = 1;
    particles.rotateVelocityRandomness = 1;
    particles.size = 1;
    particles.sizeRandomness = 1;
    particles.color = new Color(0.5, 0.5, 0.5);
    particles.colorRandomness = 1;
    particles.isFadeIn = true;
    particles.isFadeOut = true;
    particles.texture = resource;
    particles.spriteSheet = spriteSheet;
    particles.blendMode = ParticleRendererBlendMode.Additive;
    particles.start();
  });

变换

  • position :初始位置。
  • positionRandomness:位置随机因子。
  • positionArray :位置数组。
  • velocity :移动速度。
  • velocityRandomness:移动速度随机因子。
  • acceleration`:加速度。
  • accelerationRandomness:加速度随机因子。
  • angle: 初始旋转角度。
  • angleRandomness: 初始旋转角度随机因子,取值在 0~1 之间,例如:rotate 为 0,随机因子为 0,则生成的粒子角度均为 0,随机因子为 1,则生成的角度在 -PI~PI 之间随机。
  • rotateVelocity: 旋转速度。
  • rotateVelocityRandomness: 旋转速度随机因子。
  • isRotateToVelocity:是否跟随粒子运动速度的方向,默认 false,为 true  时,将粒子贴图的单位向量旋转至粒子运动速度的方向,例如烟花。为 false 时,无旋转,适用于方向一致的场景,例如孔明灯。
  • is2d:是否是 2D 粒子,默认 true
  • size:粒子大小。
  • sizeRandomness:粒子大小随机因子。
  • scale:粒子缩放。
  • isScaleByLifetime :是否随生命周期缩小至消失。为 true 时粒子会越来越小,为 false 时粒子大小保持不变,只有透明度会降低,可用于制作淡出消失的效果。

    方法

  • start():开始播放。
  • stop():停止播放。