程序员的专属浪漫——用3D Engine 5分钟实现烟花绽放效果
谁说程序员不懂浪漫?
作为程序员,用自己的代码本事手搓一个技术感十足的惊喜,我觉得,这是不亚于车马慢时代手写信的古典主义浪漫。
那么,应该怎样创作出具有自我身份属性的浪漫惊喜呢?
玩法很多,今天给大家介绍一个不出错的技术控浪漫实操方式——烟花粒子动画,在虚拟空间为对方造一个漫天烟花,平行时空的浪漫,多酷。
必须的,烟花粒子动画效果除了炫浪漫,还有多种切实的应用场景,比如,游戏应用中,玩家得胜后的页面呈现、春节等特定节假日的游戏内氛围打造等。
看个示例:
从粒子动画走向更多精彩
烟花粒子动画是搭载HMS Core3D 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)”全屏运行,您就可运行此场景了。
了解更多详情>>
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址:GitHub、Gitee
关注我们,第一时间了解 HMS Core 最新技术资讯~
程序员的专属浪漫——用3D Engine 5分钟实现烟花绽放效果的更多相关文章
- 手搓一个“七夕限定”,用3D Engine 5分钟实现烟花绽放效果
七夕来咯!又到了给重要的人送惊喜的时刻. 今年,除了将心意融入花和礼物,作为程序员,用自己的代码本事手搓一个技术感十足"七夕限定"惊喜,我觉得,这是不亚于车马慢时代手写信的古典主义 ...
- 用微信表情翻译表白,程序员的小浪漫,赶紧Get起来!
- 打磨程序员的专属利器——命令行&界面
工欲善其事,必先利其器,程序员更是如此,如果没有一套与自己思维同步的工具,将非常难受并且编码效率会非常低. 但十个程序员就有对工具的十种不同理解,本人现在冒然将自己的“工具箱”拿出来晒晒.若对大家没帮 ...
- 程序员的专属微信公众号编辑器:定制 Markdown 转 HTML
效果(Gif) 点击我查看 仓库地址 https://github.com/cdk8s/cdk8s-markdown-to-html https://gitee.com/cdk8s/cdk8s-mar ...
- 520特辑丨码神VS爱神:盘点程序员的四大男友力,你偏爱哪一种?
摘要:写卡路里计数器带女友减肥,抢票不忘分析系统bug,打造独家游戏只为成为你的另一半,程序员男友"浪漫"起来,谁能招架得住? 本文分享自华为云社区<520特辑丨码神VS爱神 ...
- 程序员的情人节「GitHub 热点速览 v.22.07」
又是一年情人日,刚好还是发文的今天.也没什么好送的,送点程序员的浪漫--代码和开源项目吧.记得在本周特推查收这份来自程序员的独有浪漫. 本周 GitHub 霸榜的项目基本上都是老项目,从老项目中挖点新 ...
- 腾讯微信支付,程序员是如何让jQuery代码付钱的
微信支付和支付宝支付已经是我们生活中不可确实的两个金融软件了,也是必备的,小编认为小钱用微信,大钱用支付宝. 下面这个图是我们生活中用腾讯微信支付平台的最后一个页面,大家想不想知道这个页面是如果做出来 ...
- 程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图
前言 本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了. 前提条件 已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...
- 漫谈程序员系列:3D打印能打印出程序员吗
首先声明,本文是一本正经的胡扯,绝不是随随便便的胡扯,请您不要随便攻击我胡说八道.我要反复星爷在<喜剧之王>里的台词:事实上.我是一本正经的喷子. 3D打印的定义 关于3D打印,以下是来自 ...
随机推荐
- 好客租房16-jsx中的列表渲染
如果要渲染一组数组 应该使用数组的map方法 注意:渲染列表时候添加key属性 key属性的值要保持唯一 原则:map()遍历谁 就给谁添加key属性 尽量避免索引号作为key //导入react i ...
- springcloud 断路器
https://www.jb51.net/article/138572.htm 参考资料: http://www.cnblogs.com/ulysses-you/p/7281662.html http ...
- 硬件开发笔记(四):硬件开发基本流程,制作一个USB转RS232的模块(三):设计原理图
前者 前面建立好的基础的元器件,下面开始设计原理图. 需求 USB转RS232,输出RS232 可以选择性输出5V的TTL 可以选择性输出3.3V的TTL 设计原理图 步骤一:CH340G ...
- Koa系框架(egg/cabloy)如何获取微信支付回调请求中的xml参数
背景 在Koa系框架(如EggJS)中进行微信支付开发时,遇到一个问题:微信支付平台会发送一个回调请求,通知支付订单的处理结果.该请求传入的参数是xml格式,而Koa中间件koa-bodyparser ...
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
- 5种在TypeScript中使用的类型保护
摘要:在本文中,回顾了TypeScript中几个最有用的类型保护,并通过几个例子来了解它们的实际应用. 本文分享自华为云社区<如何在TypeScript中使用类型保护>,作者:Ocean2 ...
- k8s client-go源码分析 informer源码分析(6)-Indexer源码分析
client-go之Indexer源码分析 1.Indexer概述 Indexer中有informer维护的指定资源对象的相对于etcd数据的一份本地内存缓存,可通过该缓存获取资源对象,以减少对api ...
- 全新升级的AOP框架Dora.Interception[3]: 基于特性标注的拦截器注册方式
在Dora.Interception(github地址,觉得不错不妨给一颗星)中按照约定方式定义的拦截器可以采用多种方式注册到目标方法上.本篇文章介绍最常用的基于"特性标注"的拦截 ...
- 视图模板引擎——Vue【双向绑定】原理剖析
首先我们来了解一下MVC.MVP.MVMM这三大架构模式在前端角度上的理解. MVC分别是 Model(模型).View(视图).Controller(控制器)三个模块.View(视图层)最主要完成前 ...
- iOS OC纯代码企业级项目实战之我的云音乐(持续更新))
简介 这是一个使用OC语言,从0使用纯代码方式开发一个iOS平台,接近企业级商业级的项目(我的云音乐),课程包含了基础内容,高级内容,项目封装,项目重构等知识:主要是讲解如何使用系统功能,流行的第三方 ...