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 循环变量
This commit is contained in:
YHH
GitHub
232
packages/particle-editor/src/ParticleEditorModule.ts
Normal file
232
packages/particle-editor/src/ParticleEditorModule.ts
Normal file
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* 粒子编辑器模块
|
||||
* Particle Editor Module
|
||||
*
|
||||
* Registers file handlers, panels, and templates for .particle files.
|
||||
*/
|
||||
|
||||
import type { ServiceContainer, Entity } from '@esengine/ecs-framework';
|
||||
import { Core } from '@esengine/ecs-framework';
|
||||
import type {
|
||||
IEditorModuleLoader,
|
||||
PanelDescriptor,
|
||||
EntityCreationTemplate,
|
||||
ComponentInspectorProviderDef,
|
||||
FileActionHandler,
|
||||
FileCreationTemplate,
|
||||
IPlugin,
|
||||
ModuleManifest
|
||||
} from '@esengine/editor-core';
|
||||
import {
|
||||
PanelPosition,
|
||||
InspectorRegistry,
|
||||
EntityStoreService,
|
||||
MessageHub,
|
||||
ComponentRegistry,
|
||||
FileActionRegistry
|
||||
} from '@esengine/editor-core';
|
||||
import { TransformComponent } from '@esengine/engine-core';
|
||||
import {
|
||||
ParticleSystemComponent,
|
||||
ParticleRuntimeModule,
|
||||
createDefaultParticleAsset
|
||||
} from '@esengine/particle';
|
||||
|
||||
import { ParticleEditorPanel } from './panels/ParticleEditorPanel';
|
||||
import { ParticleInspectorProvider } from './providers/ParticleInspectorProvider';
|
||||
import { useParticleEditorStore } from './stores/ParticleEditorStore';
|
||||
|
||||
// 导入编辑器 CSS 样式（会被 vite 自动处理并注入到 DOM）
|
||||
// Import editor CSS styles (automatically handled and injected by vite)
|
||||
import './styles/ParticleEditor.css';
|
||||
|
||||
/**
|
||||
* 粒子编辑器模块
|
||||
* Particle Editor Module
|
||||
*/
|
||||
export class ParticleEditorModule implements IEditorModuleLoader {
|
||||
async install(services: ServiceContainer): Promise<void> {
|
||||
// 注册检视器提供者 | Register inspector provider
|
||||
const inspectorRegistry = services.resolve(InspectorRegistry);
|
||||
if (inspectorRegistry) {
|
||||
inspectorRegistry.register(new ParticleInspectorProvider());
|
||||
}
|
||||
|
||||
// 注册组件到编辑器组件注册表 | Register to editor component registry
|
||||
const componentRegistry = services.resolve(ComponentRegistry);
|
||||
if (componentRegistry) {
|
||||
componentRegistry.register({
|
||||
name: 'ParticleSystem',
|
||||
type: ParticleSystemComponent,
|
||||
category: 'components.category.effects',
|
||||
description: 'Particle system for 2D visual effects',
|
||||
icon: 'Sparkles'
|
||||
});
|
||||
}
|
||||
|
||||
// 注册资产创建消息映射 | Register asset creation message mappings
|
||||
const fileActionRegistry = services.resolve(FileActionRegistry);
|
||||
if (fileActionRegistry) {
|
||||
fileActionRegistry.registerAssetCreationMapping({
|
||||
extension: '.particle',
|
||||
createMessage: 'particle:create-asset'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async uninstall(): Promise<void> {
|
||||
// 清理 | Clean up
|
||||
}
|
||||
|
||||
getPanels(): PanelDescriptor[] {
|
||||
return [
|
||||
{
|
||||
id: 'particle-editor',
|
||||
title: 'Particle Editor',
|
||||
position: PanelPosition.Center,
|
||||
closable: true,
|
||||
component: ParticleEditorPanel,
|
||||
isDynamic: true
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getInspectorProviders(): ComponentInspectorProviderDef[] {
|
||||
return [
|
||||
{
|
||||
componentType: 'ParticleSystem',
|
||||
priority: 100,
|
||||
render: (component, entity, onChange) => {
|
||||
const provider = new ParticleInspectorProvider();
|
||||
return provider.render(
|
||||
{ entityId: String(entity.id), component },
|
||||
{ target: component, onChange }
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getEntityCreationTemplates(): EntityCreationTemplate[] {
|
||||
return [
|
||||
{
|
||||
id: 'create-particle-entity',
|
||||
label: '创建粒子效果',
|
||||
icon: 'Sparkles',
|
||||
category: 'effects',
|
||||
order: 100,
|
||||
create: (): number => {
|
||||
const scene = Core.scene;
|
||||
if (!scene) {
|
||||
throw new Error('Scene not available');
|
||||
}
|
||||
|
||||
const entityStore = Core.services.resolve(EntityStoreService);
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
|
||||
if (!entityStore || !messageHub) {
|
||||
throw new Error('EntityStoreService or MessageHub not available');
|
||||
}
|
||||
|
||||
const particleCount = entityStore.getAllEntities()
|
||||
.filter((e: Entity) => e.name.startsWith('ParticleSystem ')).length;
|
||||
const entityName = `ParticleSystem ${particleCount + 1}`;
|
||||
|
||||
const entity = scene.createEntity(entityName);
|
||||
entity.addComponent(new TransformComponent());
|
||||
entity.addComponent(new ParticleSystemComponent());
|
||||
|
||||
entityStore.addEntity(entity);
|
||||
messageHub.publish('entity:added', { entity });
|
||||
messageHub.publish('scene:modified', {});
|
||||
entityStore.selectEntity(entity);
|
||||
|
||||
return entity.id;
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getFileActionHandlers(): FileActionHandler[] {
|
||||
return [
|
||||
{
|
||||
extensions: ['particle', 'json'],
|
||||
onDoubleClick: (filePath: string) => {
|
||||
// 只处理 .particle 和 .particle.json 文件
|
||||
// Only handle .particle and .particle.json files
|
||||
const lowerPath = filePath.toLowerCase();
|
||||
if (!lowerPath.endsWith('.particle') && !lowerPath.endsWith('.particle.json')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 先设置待打开的文件路径到 store
|
||||
// Set pending file path to store first
|
||||
useParticleEditorStore.getState().setPendingFilePath(filePath);
|
||||
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
if (messageHub) {
|
||||
// 打开粒子编辑器面板（面板挂载后会从 store 读取 pendingFilePath）
|
||||
// Open particle editor panel (panel will read pendingFilePath from store after mount)
|
||||
messageHub.publish('dynamic-panel:open', {
|
||||
panelId: 'particle-editor',
|
||||
title: `Particle Editor - ${filePath.split(/[\\/]/).pop()}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getFileCreationTemplates(): FileCreationTemplate[] {
|
||||
return [
|
||||
{
|
||||
id: 'create-particle',
|
||||
label: 'Particle Effect',
|
||||
extension: 'particle',
|
||||
icon: 'Sparkles',
|
||||
category: 'effects',
|
||||
getContent: (fileName: string) => {
|
||||
const assetData = createDefaultParticleAsset(fileName.replace('.particle', ''));
|
||||
return JSON.stringify(assetData, null, 2);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export const particleEditorModule = new ParticleEditorModule();
|
||||
|
||||
/**
|
||||
* 粒子插件清单
|
||||
* Particle Plugin Manifest
|
||||
*/
|
||||
const manifest: ModuleManifest = {
|
||||
id: '@esengine/particle',
|
||||
name: '@esengine/particle',
|
||||
displayName: 'Particle System',
|
||||
version: '1.0.0',
|
||||
description: 'Particle system for 2D visual effects',
|
||||
category: 'Rendering',
|
||||
isCore: false,
|
||||
defaultEnabled: true,
|
||||
isEngineModule: true,
|
||||
canContainContent: true,
|
||||
dependencies: ['engine-core'],
|
||||
exports: {
|
||||
components: ['ParticleSystemComponent'],
|
||||
systems: ['ParticleUpdateSystem'],
|
||||
loaders: ['ParticleLoader']
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 完整的粒子插件（运行时 + 编辑器）
|
||||
* Complete Particle Plugin (runtime + editor)
|
||||
*/
|
||||
export const ParticlePlugin: IPlugin = {
|
||||
manifest,
|
||||
runtimeModule: new ParticleRuntimeModule(),
|
||||
editorModule: particleEditorModule
|
||||
};
|
||||
|
||||
export default particleEditorModule;
|
||||
Reference in New Issue
Block a user