手搓一个 “七夕限定”，用 3D Engine 5分钟实现烟花绽放效果

来源 | OSCHINA 社区

作者 | ClownFish

原文链接：https://my.oschina.net/clownfish/blog/5560923

七夕来咯！又到了给重要的人送惊喜的时刻。

今年，除了将心意融入花和礼物，作为程序员，用自己的代码本事手搓一个技术感十足 “七夕限定” 惊喜，我觉得，这是不亚于车马慢时代手写信的古典主义浪漫。

那么，应该怎样创作出具有自我身份属性的浪漫七夕惊喜呢？

玩法很多，今天给大家介绍一个不出错的技术控浪漫实操方式 —— 烟花粒子动画，在虚拟空间为对方造一个漫天烟花，平行时空的浪漫，多酷。

必须的，烟花粒子动画效果除了炫浪漫，还有多种切实的应用场景，比如，游戏应用中，玩家得胜后的页面呈现、春节等特定节假日的游戏内氛围打造等。

看个示例：

从粒子动画走向更多精彩

烟花粒子动画是搭载 HMS Core 3D Engine 实现的视觉效果，借助 3D Engine，还能开启虚拟视界的更多精彩可能。 3D Engine 为开发者提供高性能、高画质、高扩展性的实时 3D 引擎，以及便捷高效的可视化开发工具，帮助开发者制作高品质的 3D 应用。

如果你是游戏开发或者对游戏开发感兴趣，那么你用 3D Engine 能耍得不只是浪漫。

1、高清渲染与视觉特效，高度还原逼真光影效果；

2、多线程 PBR 渲染，实现高性能实时 3D 渲染效果；

3、CPU/GPU 粒子渲染，模拟爆炸、火焰、雨雪等视觉特效；

4、3D 角色及流畅动画轻松造，支持实时骨骼动画、表情动画、全身 IK、动画重定向、多重动画状态机融合；

5、提供自动导航网格生成，多目标的路径规划，NPC 智能寻路及智能避障功能；

6、3D Studio 提供便捷开发工具，支持场景编辑、材质编辑、动画编辑、地形编辑、脚本编辑等核心功能

总之，3D Engine 在手，品质 3D 游戏场面轻松有，不服来试！

实操指南 —— 用 3D Engine 实现粒子动画烟花效果

创建关卡

1、您需要创建一个新的关卡：在引擎首页菜单栏中，选择 “文件> 新建关卡”。

2、输入 Level 名称，比如 “Fireworks” 后，点击 “确认” 创建成功。完成后您将进入到玄天引擎的 Level 界面。

环境搭建

1、在场景烟花效果之前，我们需要适当调整关卡中的环境，首先去除我们用不到的实体：在引擎首页 “实体大纲” 窗口中的默认环境找到着色球和地面网格实体，鼠标右键点击删除。

2、我们需要模拟一个较暗的环境：选中 “实体大纲” 窗口默认环境组中的天空，在引擎首页右侧的 “组件属性” 窗口中找到高动态范围天空盒组件，并调整曝光度属性至 - 3.2。

3、选中 “实体大纲” 窗口默认环境组中的太阳，在引擎首页右侧的 “组件属性” 窗口中找到定向光源组件，并鼠标右击该组件，点击 “禁用组件”。

4、在 “实体大纲” 窗口中鼠标右击选择 “创建实体”。

5、在 “实体大纲” 窗口中选中新创建的实体，在组件属性中重命名为 “Bloom”，并添加一个 “光晕” 组件和 “后处理盒” 组件来加强烟花粒子的光效。

6、设置光晕组件的参数如下图。

完成以上步骤后你将得到以下效果

材质编辑

1、接下来我们需要为烟花粒子创建一些光效材质，首先在引擎首页的全局菜单栏中点击 “工具> 材质编辑器” 打开材质编辑器。

2、在材质编辑器的菜单栏中点击 “文件> 新建”，创建一个新的材质文件。

3、在弹出的窗口中选择材质类型为 “ParticleMesh”，并在工程目录中的 Assets 文件夹中新建一个 “Material” 文件夹，将材质保持到此文件夹中，重命名为 “Particle”。

4、材质编辑器的 “材质属性” 窗口中展示当前材质类型及可输入参数配置，您可以在此修改其相应的参数设置，参数设置如下图。

・基础颜色：使用基础颜色中的颜色，可以在输入栏中直接输入 RGB 值，也可以点击颜色方块打开 “选择颜色” 窗口调整颜色。

・自发光：使用自发光属性，需要先打开 “开启” 开关。颜色使用方式与基础颜色属性类似，强度决定了自发光的强度。

5、为了丰富我们的粒子光效，我们需要重复 2~4 步骤，重新创建两个不同颜色的光效材质，并命名为 “Particle_02” 和 “Particle_03”，参数设置如下图。

粒子编辑

1、返回引擎首页，在全局菜单栏中点击 “工具> 粒子编辑器” 打开粒子编辑器。

2、在粒子编辑器中的 “资源浏览” 窗口中找到工程目录中的 “Assets” 文件夹，点击选中后在浏览模板中鼠标右击并点击 “新建文件夹”，命名为 “Particle”。

3、在我们步骤 2 中创建的 “Particle” 文件夹中鼠标右击并点击 “新建粒子系统”，命名为 “Fireworks.particle”。

4、双击浏览面板创建的粒子进入编辑，在 “发射器” 窗口中会显示一个默认效果：精灵粒子使用黄色材质，以每秒 10 个粒子的速度向上发射，粒子的生命周期为 1 秒。

5、我们需要创建一个向上发射的粒子部分和一个爆发的粒子部分组成发射和绽放的烟花效果，让我们先编辑一个向上发射的粒子发射器。

点击发射器节点中的 “发射器属性” 属性分类后，您可在 “细节” 面板查看该属性分类下的属性模块，按照下图设置粒子最大发射数量和发射器时长。

点击发射器节点中的 “生成方式” 属性分类，勾选使用 “爆发列表” 生成方式，并在爆发列表中添加一个元素设置粒子数量为 4。

点击发射器节点中的 “粒子基础属性” 属性分类，设置粒子的生命周期为 1.5。

点击发射器节点中的 “发射器形状” 属性分类，在发射器形状中选择为长方形，并按照下图设置尺寸。

点击发射器节点中的 “速度” 属性分类，设置 Z 轴速度为 7.0。

点击发射器节点中的 “尺寸” 属性分类，勾选 “尺寸随时间变化”，选择类型为曲线值，并按照下图设置 X、Y、Z 的最大值和曲线。

点击发射器节点中的 “外力” 属性分类，勾选加速度，并按下图进行设置。

点击发射器节点中的 “光照” 属性分类，勾选光照，并按照下图参数进行设置。

点击发射器节点中的 “渲染器” 属性分类，选择渲染器为 “网格体渲染器”，并在 “Assets > Material > Particle.material” 目录中找到我们在材质编辑章节中保存的材质进行指定。

在网格体中指定 “sphere.fbx”。

6、此时，我们已经完成了一个向上发射的粒子发射器，接下来我们需要再对爆发的烟花粒子进行编辑。

首先我们在 “发射器” 窗口中鼠标右击，点击 “添加发射器” 添加一个新的发射器。

点击发射器节点中的 “发射器属性” 属性分类后，按照下图设置发射器属性参数。

点击发射器节点中的 “生成方式” 属性分类后，按照下图设置生成方式参数。

点击发射器节点中的 “粒子基本属性” 属性分类后，按照下图设置粒子基本属性参数。

点击发射器节点中的 “发射器形状” 属性分类后，按照下图设置发射器形状参数。

点击发射器节点中的 “速度” 属性分类后，按照下图设置速度参数。

点击发射器节点中的 “尺寸” 属性分类后，按照下图设置尺寸参数。

点击发射器节点中的 “外力” 属性分类后，按照下图设置外力参数。

点击发射器节点中的 “光照” 属性分类后，按照下图设置光照参数。

点击发射器节点中的 “渲染器” 属性分类后，按照下图设置渲染器参数。

7、重复步骤 6，创建两个新的发射器，丰富烟花的粒子效果。要注意的是，你可以在新建的两个发射器中设置不同的 “速度> 球形速度” 参数和 “粒子基本属性 > 粒子生命 > 生命周期” 参数来丰富烟花效果，当然你也可以根据你的理解设置其他属性的参数值。

8、此时我们已经完成了一个烟花粒子的设置，为了达到更加丰富的效果，我们可以将该粒子文件进行复制，得到两个新的拥有相同属性参数的粒子效果，我们将其命名为 “Fireworks_02” 和 “Fireworks_03”。

9、在粒子编辑器中打开 “Fireworks_02” 粒子文件，分别点击四个发射器节点中的 “渲染器” 属性分类，将材质指定为我们在 “材质编辑” 章节中保存的其他颜色的材质文件 “Particle_02” 来丰富我们的烟花效果并保存我们的编辑。同理我们在 “Fireworks_03” 粒子文件中可以指定新的材质文件 “Particle_03”。

放置粒子

1、返回引擎首页，在 “实体大纲” 窗口中鼠标右击点击 “创建实体”，创建 7 个空白实体，并在 “组件属性” 窗口中为其重命名，可参考下图。

2、在 “实体大纲” 窗口中多选新建的 7 个实体后，在 “组件属性” 窗口在为其添加 “粒子组件”。

3、在 “粒子” 组件中，指定我们保存的粒子文件，并打开 “开启” 按钮，这里我们可以为每个实体随机指定 “Fireworks”、“Fireworks_02” 和 “Fireworks_03” 粒子文件。

5、使用视口的控件随机摆放 7 个实体的位置和旋转，这将决定烟花发射的角度和位置。

6、最后我们还需要调整一下相机的角度和位置，我们在 “实体大纲” 窗口默认环境中选中 “相机” 实体。

7、在 “组件属性” 窗口中找到 “飞行摄像机输入” 组件，鼠标右击该组件，并将其删除。

8、在相机组件中，点击进入摄像机视角后，你的视口将会呈现相机视角，你可以在视口中使用鼠标和键盘移动视角。

9、选定好最佳的观赏位置后，点击 “返回默认编辑器相机视角”。

最终效果

完成上述步骤后，点击运行按钮的下拉菜单，选择 “Play (Maximized)” 全屏运行，您就可运行此场景了。

了解更多详情 >>

访问 3D Engine 开发者联盟官网 ：https://developer.huawei.com/consumer/cn/hms/3d-engine/?ha_source=hms1

华为移动服务开源仓库地址： GitHub ：http://github.com/HMS-Core、 Gitee ： https://gitee.com/hms-core