Files
esengine/packages/particle/src/modules/VelocityOverLifetimeModule.ts
YHH 32d35ef2ee feat(particle): 添加完整粒子系统和粒子编辑器 (#284)
* feat(editor-core): 添加用户系统自动注册功能

- IUserCodeService 新增 registerSystems/unregisterSystems/getRegisteredSystems 方法
- UserCodeService 实现系统检测、实例化和场景注册逻辑
- ServiceRegistry 在预览开始时注册用户系统,停止时移除
- 热更新时自动重新加载用户系统
- 更新 System 脚本模板添加 @ECSSystem 装饰器

* feat(editor-core): 添加编辑器脚本支持(Inspector/Gizmo)

- registerEditorExtensions 实际注册用户 Inspector 和 Gizmo
- 添加 unregisterEditorExtensions 方法
- ServiceRegistry 在项目加载时编译并加载编辑器脚本
- 项目关闭时自动清理编辑器扩展
- 添加 Inspector 和 Gizmo 脚本创建模板

* feat(particle): 添加粒子系统和粒子编辑器

新增两个包:
- @esengine/particle: 粒子系统核心库
- @esengine/particle-editor: 粒子编辑器 UI

粒子系统功能:
- ECS 组件架构,支持播放/暂停/重置控制
- 7种发射形状:点、圆、环、矩形、边缘、线、锥形
- 5个动画模块:颜色渐变、缩放曲线、速度控制、旋转、噪声
- 纹理动画模块支持精灵表动画
- 3种混合模式:Normal、Additive、Multiply
- 11个内置预设:火焰、烟雾、爆炸、雨、雪等
- 对象池优化,支持粒子复用

编辑器功能:
- 实时 Canvas 预览,支持全屏和鼠标跟随
- 点击触发爆发效果(用于测试爆炸类特效)
- 渐变编辑器:可视化颜色关键帧编辑
- 曲线编辑器:支持缩放曲线和缓动函数
- 预设浏览器:快速应用内置预设
- 模块开关:独立启用/禁用各个模块
- Vector2 样式输入(重力 X/Y)

* feat(particle): 完善粒子系统核心功能

1. Burst 定时爆发系统
   - BurstConfig 接口支持时间、数量、循环次数、间隔
   - 运行时自动处理定时爆发
   - 支持无限循环爆发

2. 速度曲线模块 (VelocityOverLifetimeModule)
   - 6种曲线类型:Constant、Linear、EaseIn、EaseOut、EaseInOut、Custom
   - 自定义关键帧曲线支持
   - 附加速度 X/Y
   - 轨道速度和径向速度

3. 碰撞边界模块 (CollisionModule)
   - 矩形和圆形边界类型
   - 3种碰撞行为:Kill、Bounce、Wrap
   - 反弹系数和最小速度阈值
   - 反弹时生命损失

* feat(particle): 添加力场模块、碰撞模块和世界/本地空间支持

- 新增 ForceFieldModule 支持风力、吸引点、漩涡、湍流四种力场类型
- 新增 SimulationSpace 枚举支持世界空间和本地空间切换
- ParticleSystemComponent 集成力场模块和空间模式
- 粒子编辑器添加 Collision 和 ForceField 模块的 UI 编辑支持
- 新增 Vortex、Leaves、Bouncing 三个预设展示新功能
- 编辑器预览实现完整的碰撞和力场效果

* fix(particle): 移除未使用的 transform 循环变量
2025-12-05 23:03:31 +08:00

202 lines
6.7 KiB
TypeScript

import type { Particle } from '../Particle';
import type { IParticleModule } from './IParticleModule';
/**
* 速度关键帧
* Velocity keyframe
*/
export interface VelocityKey {
/** 时间点 (0-1) | Time (0-1) */
time: number;
/** 速度乘数 | Velocity multiplier */
multiplier: number;
}
/**
* 速度曲线类型
* Velocity curve type
*/
export enum VelocityCurveType {
/** 常量(无变化)| Constant (no change) */
Constant = 'constant',
/** 线性 | Linear */
Linear = 'linear',
/** 缓入(先慢后快)| Ease in (slow then fast) */
EaseIn = 'easeIn',
/** 缓出(先快后慢)| Ease out (fast then slow) */
EaseOut = 'easeOut',
/** 缓入缓出 | Ease in out */
EaseInOut = 'easeInOut',
/** 自定义关键帧 | Custom keyframes */
Custom = 'custom'
}
/**
* 速度随生命周期变化模块
* Velocity over lifetime module
*/
export class VelocityOverLifetimeModule implements IParticleModule {
readonly name = 'VelocityOverLifetime';
enabled = true;
// ============= 速度曲线 | Velocity Curve =============
/** 速度曲线类型 | Velocity curve type */
curveType: VelocityCurveType = VelocityCurveType.Constant;
/** 起始速度乘数 | Start velocity multiplier */
startMultiplier: number = 1;
/** 结束速度乘数 | End velocity multiplier */
endMultiplier: number = 1;
/** 自定义关键帧(当 curveType 为 Custom 时使用)| Custom keyframes */
customCurve: VelocityKey[] = [];
// ============= 阻力 | Drag =============
/** 线性阻力 (0-1),每秒速度衰减比例 | Linear drag (0-1), velocity decay per second */
linearDrag: number = 0;
// ============= 额外速度 | Additional Velocity =============
/** 轨道速度(绕发射点旋转)| Orbital velocity (rotation around emitter) */
orbitalVelocity: number = 0;
/** 径向速度(向外/向内扩散)| Radial velocity (expand/contract) */
radialVelocity: number = 0;
/** 附加 X 速度 | Additional X velocity */
additionalVelocityX: number = 0;
/** 附加 Y 速度 | Additional Y velocity */
additionalVelocityY: number = 0;
update(p: Particle, dt: number, normalizedAge: number): void {
// 计算速度乘数 | Calculate velocity multiplier
const multiplier = this._evaluateMultiplier(normalizedAge);
// 应用速度乘数到当前速度 | Apply multiplier to current velocity
// 我们需要存储初始速度来正确应用曲线 | We need to store initial velocity to properly apply curve
if (!('startVx' in p)) {
(p as any).startVx = p.vx;
(p as any).startVy = p.vy;
}
const startVx = (p as any).startVx;
const startVy = (p as any).startVy;
// 应用曲线乘数 | Apply curve multiplier
p.vx = startVx * multiplier;
p.vy = startVy * multiplier;
// 应用阻力(在曲线乘数之后)| Apply drag (after curve multiplier)
if (this.linearDrag > 0) {
const dragFactor = Math.pow(1 - this.linearDrag, dt);
p.vx *= dragFactor;
p.vy *= dragFactor;
// 更新存储的起始速度以反映阻力 | Update stored start velocity to reflect drag
(p as any).startVx *= dragFactor;
(p as any).startVy *= dragFactor;
}
// 附加速度 | Additional velocity
if (this.additionalVelocityX !== 0 || this.additionalVelocityY !== 0) {
p.vx += this.additionalVelocityX * dt;
p.vy += this.additionalVelocityY * dt;
}
// 轨道速度 | Orbital velocity
if (this.orbitalVelocity !== 0) {
const angle = Math.atan2(p.y, p.x) + this.orbitalVelocity * dt;
const dist = Math.sqrt(p.x * p.x + p.y * p.y);
p.x = Math.cos(angle) * dist;
p.y = Math.sin(angle) * dist;
}
// 径向速度 | Radial velocity
if (this.radialVelocity !== 0) {
const dist = Math.sqrt(p.x * p.x + p.y * p.y);
if (dist > 0.001) {
const nx = p.x / dist;
const ny = p.y / dist;
p.vx += nx * this.radialVelocity * dt;
p.vy += ny * this.radialVelocity * dt;
}
}
}
/**
* 计算速度乘数
* Evaluate velocity multiplier
*/
private _evaluateMultiplier(normalizedAge: number): number {
let t: number;
switch (this.curveType) {
case VelocityCurveType.Constant:
return this.startMultiplier;
case VelocityCurveType.Linear:
t = normalizedAge;
break;
case VelocityCurveType.EaseIn:
t = normalizedAge * normalizedAge;
break;
case VelocityCurveType.EaseOut:
t = 1 - (1 - normalizedAge) * (1 - normalizedAge);
break;
case VelocityCurveType.EaseInOut:
t = normalizedAge < 0.5
? 2 * normalizedAge * normalizedAge
: 1 - Math.pow(-2 * normalizedAge + 2, 2) / 2;
break;
case VelocityCurveType.Custom:
return this._evaluateCustomCurve(normalizedAge);
default:
t = normalizedAge;
}
return lerp(this.startMultiplier, this.endMultiplier, t);
}
/**
* 计算自定义曲线值
* Evaluate custom curve value
*/
private _evaluateCustomCurve(normalizedAge: number): number {
if (this.customCurve.length === 0) return this.startMultiplier;
if (this.customCurve.length === 1) return this.customCurve[0].multiplier;
// 在边界外返回边界值 | Return boundary values outside range
if (normalizedAge <= this.customCurve[0].time) {
return this.customCurve[0].multiplier;
}
if (normalizedAge >= this.customCurve[this.customCurve.length - 1].time) {
return this.customCurve[this.customCurve.length - 1].multiplier;
}
// 找到相邻关键帧 | Find adjacent keyframes
for (let i = 0; i < this.customCurve.length - 1; i++) {
const start = this.customCurve[i];
const end = this.customCurve[i + 1];
if (normalizedAge >= start.time && normalizedAge <= end.time) {
const range = end.time - start.time;
const t = range > 0 ? (normalizedAge - start.time) / range : 0;
return lerp(start.multiplier, end.multiplier, t);
}
}
return this.startMultiplier;
}
}
function lerp(a: number, b: number, t: number): number {
return a + (b - a) * t;
}