IDE 创建 2D 粒子系统指南
简介
LayaAir IDE 提供了可视化的 2D 粒子编辑器,通过图形界面配置粒子参数,比纯代码方式更直观高效。
具体使用方式参考官方2d粒子。
优势:
- 实时预览效果
- 可视化曲线编辑
- 无需编译即可调试
- 参数调节更直观

目录
创建粒子预制体
| 步骤 | 操作 |
|---|---|
| 1 | 资源面板右键 → 创建 → 2D 预制体 |
| 2 | 命名(如 FireEffect.prefab) |
| 3 | 双击打开预制体编辑场景 |
添加粒子组件
| 步骤 | 操作 |
|---|---|
| 1 | 在场景中创建一个 Sprite2D 节点 |
| 2 | 选中节点,属性面板点击 添加组件 → 2D粒子渲染器 |
添加后会看到 ShurikenParticle2DRenderer 组件:
ShurikenParticle2DRenderer
├── Material (材质,必须设置)
├── Simulation Space (模拟空间)
└── Particle System (粒子系统配置)
├── Main (主模块)
├── Emission (发射器)
├── Shape (发射形状)
├── Color over Lifetime (颜色渐变)
├── Size over Lifetime (大小变化)
└── Rotation over Lifetime (旋转变化)
配置粒子系统参数
在属性面板找到 ShurikenParticle2DRenderer 组件,展开 Particle System 配置各模块。
主模块 (Main)
| 参数 | 建议值(火焰效果) | 说明 |
|---|---|---|
Duration |
2 |
持续时间(秒),设为 0 表示无限 |
Looping |
✓ |
是否循环播放 |
Start Delay |
0 |
启动延迟时间 |
Play On Awake |
✓ |
启动时自动播放 |
Max Particles |
300-500 |
最大粒子数量(影响性能) |
Start Lifetime |
0.5 ~ 1.0 |
粒子存活时间(秒) |
Start Speed |
50 ~ 100 |
初始速度 |
Start Size |
5 ~ 15 |
初始大小 |
Start Rotation |
0 ~ 360 |
初始旋转角度 |
Gravity Modifier |
-0.3 ~ -0.8 |
重力修正(负值向上飘) |
Start Color |
白色 | 初始颜色 |
Simulation Space |
World |
World=世界空间,Local=局部空间 |
Simulation Speed |
1 |
模拟速度倍率 |
发射模块 (Emission)
| 参数 | 建议值 | 说明 |
|---|---|---|
Enable |
✓ |
是否启用发射 |
Rate over Time |
100-200 |
每秒发射粒子数量 |
Rate over Distance |
0 |
每移动单位距离发射粒子数(移动特效用) |
Bursts |
- | 爆发发射列表(如爆炸瞬间发射大量粒子) |
爆发发射 (Burst) 配置:
| 参数 | 说明 |
|---|---|
Count |
一次爆发的粒子数量 |
Time |
触发时间(秒) |
Cycle Count |
重复次数 |
Interval |
重复间隔(秒) |
发射形状模块 (Shape)
| 参数 | 建议值 | 说明 |
|---|---|---|
Enable |
✓ |
必须启用才能发射粒子 |
Shape Type |
Circle / Box |
发射形状类型 |
Circle(圆形)参数
| 参数 | 建议值 | 说明 |
|---|---|---|
Radius |
0-5 |
发射半径 |
Emit From Edge |
✗ |
✗=从内部发射,✓=从边缘发射 |
Random Direction |
✓ |
随机发射方向 |
Box(矩形)参数
| 参数 | 说明 |
|---|---|
Size X/Y |
矩形宽高 |
颜色 over Lifetime 模块
控制粒子颜色随生命周期变化。
| 参数 | 建议值 | 说明 |
|---|---|---|
Enable |
✓ |
启用颜色渐变 |
Color |
白→黄→橙→红→透明 | 颜色渐变曲线(IDE 中可视化编辑) |
火焰效果渐变示例:
| 位置 | 颜色 | 透明度 |
|---|---|---|
| 0% | 白色 | 100% |
| 30% | 黄色 | 100% |
| 60% | 橙色 | 80% |
| 100% | 红色 | 0% |
大小 over Lifetime 模块
控制粒子大小随生命周期变化。
| 参数 | 建议值 | 说明 |
|---|---|---|
Enable |
✓ |
启用大小变化 |
Size |
1 → 1.5 → 0 |
大小曲线(IDE 中可视化编辑) |
常见大小曲线:
| 效果 | 曲线 |
|---|---|
| 逐渐消失 | 1 → 0 |
| 先大后小 | 1.5 → 0 |
| 逐渐变大 | 0.5 → 2 |
| 稳定消失 | 1 → 1 → 0 |
旋转 over Lifetime 模块
| 参数 | 建议值 | 说明 |
|---|---|---|
Enable |
✓ |
启用旋转变化 |
Rotation |
0 → 360 |
旋转角度曲线(度) |
添加材质
粒子必须有材质才能正确渲染。
创建粒子材质
| 步骤 | 操作 |
|---|---|
| 1 | 资源面板右键 → 创建 → Material |
| 2 | 命名(如 ParticleMaterial.lmat) |
| 3 | 属性面板 Shader 选择 Particle2D |
| 4 | 添加纹理贴图(圆形渐变 png) |
应用材质
| 步骤 | 操作 |
|---|---|
| 1 | 选中粒子节点的 ShurikenParticle2DRenderer 组件 |
| 2 | 将材质拖到 Material 属性上 |
常用粒子纹理:
- 圆形渐变(火焰、烟雾)
- 星形(魔法效果)
- 雨滴形状(下雨效果)
- 雪花形状(下雪效果)
运行预览与调整
预览流程
- 点击 IDE 顶部 运行 按钮
- 观察粒子效果
- 调整参数后保存预制体
- 再次运行查看变化
调试技巧
| 技巧 | 说明 |
|---|---|
暂时关闭 Looping |
观察单次播放效果 |
调大 Start Lifetime |
观察粒子完整生命周期 |
降低 Rate over Time |
减少粒子便于观察单个粒子 |
| 使用纯色纹理 | 排除纹理干扰 |
常用特效参数参考
火焰效果
| 参数 | 建议值 |
|---|---|
| Max Particles | 200-400 |
| Start Lifetime | 0.5 ~ 1.0 |
| Start Speed | 50 ~ 150 |
| Start Size | 5 ~ 20 |
| Gravity Modifier | -0.3 ~ -0.8 |
| Rate over Time | 100 ~ 200 |
| 颜色渐变 | 白→黄→橙→红→透明 |
| 大小曲线 | 1 → 1.2 → 0 |
爆炸效果
| 参数 | 建议值 |
|---|---|
| Duration | 0.5 |
| Looping | ✗ |
| Max Particles | 100 ~ 300 |
| Start Lifetime | 0.3 ~ 0.8 |
| Start Speed | 200 ~ 500 |
| Start Size | 10 ~ 30 |
| Gravity Modifier | 0 ~ 0.5 |
| Bursts | Count: 50-100, Time: 0 |
| 颜色渐变 | 黄→橙→红→透明 |
| 大小曲线 | 1 → 0 |
烟雾效果
| 参数 | 建议值 |
|---|---|
| Max Particles | 50 ~ 150 |
| Start Lifetime | 2 ~ 4 |
| Start Speed | 30 ~ 80 |
| Start Size | 30 ~ 60 |
| Gravity Modifier | -0.1 ~ 0.2 |
| Rate over Time | 10 ~ 30 |
| 颜色渐变 | 灰色→透明 |
| 大小曲线 | 0.5 → 2 |
| 旋转曲线 | 0 → 90 |
下雨效果
| 参数 | 建议值 |
|---|---|
| Max Particles | 300 ~ 500 |
| Start Lifetime | 1 ~ 2 |
| Start Speed | 500 ~ 800 |
| Start Size | 2 ~ 5 |
| Gravity Modifier | 2 ~ 3 |
| Rate over Time | 200 ~ 400 |
| Shape | Box(宽度=屏幕宽) |
| 颜色 | 蓝灰色半透明 |
下雪效果
| 参数 | 建议值 |
|---|---|
| Max Particles | 200 ~ 400 |
| Start Lifetime | 3 ~ 6 |
| Start Speed | 30 ~ 80 |
| Start Size | 5 ~ 15 |
| Gravity Modifier | 0.2 ~ 0.5 |
| Rate over Time | 50 ~ 100 |
| Shape | Box(宽度=屏幕宽) |
| 颜色 | 白色半透明 |
| 旋转曲线 | 0 → 360 |
魔法轨迹
| 参数 | 建议值 |
|---|---|
| Max Particles | 30 ~ 80 |
| Start Lifetime | 0.3 ~ 0.6 |
| Start Speed | 20 ~ 50 |
| Start Size | 10 ~ 25 |
| Simulation Space | World |
| Rate over Distance | 1 ~ 3 |
| 颜色渐变 | 亮蓝→深蓝→透明 |
| 大小曲线 | 1 → 0 |
加载预制体
方式一:代码加载
typescript
@regClass()
export class LoadParticleDemo extends Laya.Script {
private particleRenderer: Laya.ShurikenParticle2DRenderer;
onStart(): void {
// 加载粒子预制体
Laya.Prefab.load("FireEffect.prefab").then((prefab: Laya.Prefab) => {
// 创建预制体实例
let particle = prefab.create() as Laya.Sprite;
particle.pos(300, 400);
Laya.stage.addChild(particle);
// 获取粒子组件控制
this.particleRenderer = particle.getComponent(Laya.ShurikenParticle2DRenderer);
});
}
// 控制播放
public play(): void {
this.particleRenderer?.particleSystem.play();
}
public stop(): void {
this.particleRenderer?.particleSystem.stop();
}
}
方式二:场景中挂载
- 在 IDE 中打开场景
- 将粒子预制体拖入场景
- 运行即可看到效果
注意事项
| 注意事项 | 说明 |
|---|---|
| 材质必须设置 | 粒子需要材质才能正确渲染 |
| 发射形状必须启用 | 否则粒子无法正确发射 |
| World vs Local | World 空间下粒子不随发射器移动,Local 空间会跟随 |
| 性能控制 | 移动端建议 Max Particles 不超过 200 |
| 纹理选择 | 使用带透明通道的 PNG 纹理效果更好 |
| 曲线编辑 | IDE 中可视化编辑曲线更直观 |
| 保存预制体 | 修改参数后记得保存预制体 |
相关文档
- Particle2D使用指南.md - 代码方式创建粒子系统
- Laya.Prefab API - 预制体相关 API