ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Cocos Creator 粒子特效快速上手指南:10分钟做出雨和能量护盾

Cocos Creator 粒子特效快速上手指南:10分钟做出雨和能量护盾 Cocos Creator 粒子特效快速上手指南10分钟做出雨和能量护盾【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine你想给游戏加一场雨却不知从哪下手想在角色周围撑一道能量护盾也不知道该改哪里Cocos Creator 内置的粒子系统可以帮你做到这两件事2D 组件 ParticleSystem2D 面向屏幕空间3D 组件 ParticleSystem 面向体积空间参数都开放给你调。按下面步骤做完你手里会有一个能调、够快、可以直接进项目的雨滴特效外加一套 3D 粒子的起步配置。先跑起来最小可用的雨滴效果先做能看见东西飞再谈好看。给任意节点挂上 2D 粒子组件配 5 个关键参数import { ParticleSystem2D, Vec2 } from cc; const ps this.node.addComponent(ParticleSystem2D); ps.custom true; // 不用 plist 配置代码里直接给参数 ps.spriteFrame this.rainTex; // 每颗粒子就是这张雨滴贴图 ps.totalParticles 300; // 同时存活粒子的上限 ps.emissionRate 150; // 每秒发射 150 个 ps.life 1.5; ps.lifeVar 0.5; // 每个粒子寿命随机 ±0.5 秒 ps.speed 600; // 初速度 ps.gravity new Vec2(0, -400); // 只往下加速这几行做的事spriteFrame决定粒子长什么样emissionRate决定多久滴一个life决定落下多久消失speed加gravity决定怎么落。发射器可以想象成头顶的花洒——它只负责把粒子甩出去之后轨迹交给速度和重力接管。组件的全部可调项定义在 cocos/particle-2d/particle-system-2d.ts编辑器面板上的每个格子都对应一个属性你改代码或改面板是等价的。调出感觉让雨滴像雨的三类参数外观贴图、颜色与大小衰减外观三件事贴图选小而圆的雨滴纹理用startColor/endColor做颜色过渡雨滴一般从亮蓝渐隐到透明用startSize到endSize做尺寸衰减下落过程中变小才有越跑越远的纵深感。startColor这类属性是Color类型endColor支持把 alpha 调到 0 实现淡出。运动初速度、角度与重力雨滴的抛物线来自先向上再被重力拉回只靠一个参数调不出来ps.emitterMode ParticleSystem2D.EmitterMode.GRAVITY; ps.angle 90; // 先朝上方喷出 ps.speed 200; // 喷出初速度 ps.gravity new Vec2(0, -500); // 重力向下拉出抛物线emitterMode有三种重力模式是最常用的posVar控制发射位置的随机范围把它拉满屏幕宽雨才不会都从同一点漏下来。手感用随机量打散僵硬感引擎里每个参数旁边都带一个Var版本speedVar、lifeVar、startSizeVar含义是在主值基础上随机偏移的量。没有随机量的粒子像用喷枪一排排喷出来的有随机量才像自然降雨。参数作用推荐值常见误区emissionRate每秒发射数100–300直接拉满求满先掉帧life/lifeVar粒子寿命及随机范围1–2s / 寿命的一半lifeVar设 0所有粒子同步消失画面一顿一顿speed/speedVar初速度及随机范围150–600只设speed不设 Var所有雨滴一条直线startSize/endSize初始/结束尺寸12 / 6结束尺寸比开始大雨滴像气球gravityY 向加速度(0, -300~-500)设成正值雨往天上飘posVar发射位置随机偏移约半屏宽设 0全部粒子同点发出 调参口诀先把主值调到平均看起来对再把对应的Var开到主值的一半最后回来微调主值。跑得更快降低帧开销与常见坑选对渲染路径2D 走 CPU3D 走 GPU2D 粒子在 CPU 上逐粒子模拟particle-simulator-2d.ts3D 粒子把计算放到 GPU 侧cocos/particle/。所以规则简单2D 项目优先用 ParticleSystem2D3D 场景里的远景粒子用挂在公告板上的 2D 粒子代替 3D 粒子模拟开销几乎可以忽略。压容量与透明度叠加优化方向做法预期收益粒子容量移动端 2D ≤500、3D ≤300远处效果减半模拟与绘制开销降 30–50%贴图用 2 的幂尺寸且 ≤256×256显存与带宽降 15–25%透明度叠加同一屏幕半透明粒子控制在 4 层内显著降低 GPU 填充率开销批次合并多个粒子系统复用同一材质合并批次draw call 降 25–35%⚠️custom设为false却没挂file组件不会报错也不会显示只在控制台警告。雨不见了先查这一项。 ⚠️ 3D 的ParticleSystem.duration默认是 5 秒播 5 秒就停循环播放记得设loop true。 ⚠️ 调试期别忘playOnLoad它为false时场景里不会自动开始发射容易误判成没生效。延伸与资源3D 粒子从雨滴到能量护盾护盾、火焰这类体积效果用 3D 组件起步配置如下import { ParticleSystem } from cc; const ps this.node.addComponent(ParticleSystem); ps.capacity 200; // 粒子容量上限 ps.loop true; // 循环播放 ps.startLifetime.constant 2.5; // 寿命 2.5 秒 ps.startSpeed.constant 3; // 初始速度之后按需打开模块即可速度随寿命变化、受力、噪声noise.ts、拖尾等都在 cocos/particle/ 目录里每个模块对应面板上的一组开关。资源与下一步2D 粒子源码与面板定义cocos/particle-2d/3D 粒子源码与模块cocos/particle/粒子测试用例tests/particle/默认材质与特效素材editor/assets/default_materials/编码规范参考docs/TS_CODING_STYLE.md粒子效果七分靠调、三分靠写你已经把最难的从 0 到有走完了。现在打开编辑器给一个空节点加上 ParticleSystem2D只改emissionRate一个参数亲眼看雨的密度变化——你的第一组特效参数就从这里开始。【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表