当前位置:网站首页>手搓一个“七夕限定”,用3D Engine 5分钟实现烟花绽放效果
手搓一个“七夕限定”,用3D Engine 5分钟实现烟花绽放效果
2022-08-04 14:41:00 【nginx】
今年,除了将心意融入花和礼物,作为程序员,用自己的代码本事手搓一个技术感十足“七夕限定”惊喜,我觉得,这是不亚于车马慢时代手写信的古典主义浪漫。
那么,应该怎样创作出具有自我身份属性的浪漫七夕惊喜呢?
玩法很多,今天给大家介绍一个不出错的技术控浪漫实操方式——烟花粒子动画,在虚拟空间为对方造一个漫天烟花,平行时空的浪漫,多酷。
必须的,烟花粒子动画效果除了炫浪漫,还有多种切实的应用场景,比如,游戏应用中,玩家得胜后的页面呈现、春节等特定节假日的游戏内氛围打造等。
看个示例:

从粒子动画走向更多精彩
烟花粒子动画是搭载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开发者联盟官网
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址:GitHub、Gitee
关注我们,第一时间了解 HMS Core 最新技术资讯~
边栏推荐
猜你喜欢
随机推荐
G. Mountaineering Squad (violence & dfs)
CloudCompare&PCL 点云按网格划分(点云分幅)
Database recovery
Centos7 install mysql version rapidly
如何和程序员谈恋爱
Zheng Qing freshmen school competition and middle-aged engineering selection competition
【 HMS core 】 【 Media 】 online video editing service 】 【 material can't show, or network anomalies have been Loading state
Android Sqlite3 basic commands
没有Project Facets的解决方法
X射线掠入射聚焦反射镜
AOSP built-in APP franchise rights white list
How to install postgresql and configure remote access in ubuntu environment
兆骑科创创新创业大赛活动举办,线上直播路演,投融资对接
Technology sharing | Description of the electronic fence function in the integrated dispatching system
化繁为简,聊一聊复制状态机系统架构抽象
【问题解决】QT更新组件出现 “要继续此操作,至少需要一个有效且已启用的储存库”
砺夏行动|九州云章津楠:开源不是少数人的运动,大众化才是源泉
Redis 复习计划 - Redis主从数据一致性和哨兵机制
ASA归因:如何评估关键词的投放价值
宣传海报