Programmer's Exclusive Romance - Use 3D Engine to Realize Fireworks in 5 Minutes

谁说程序员不懂浪漫？

作为程序员,Use your own code skills to rub a technical surprise,我觉得,This is no less than horses and chariots, slow hand write classical romantic era.

那么,How to create a romantic surprise with self-identity attributes？

玩法很多,Today to introduce a technology have avoided making mistakes in romantic way of speaking——firework particle animation,Create a sky-filled firework for each other in the virtual space,Romance in parallel time and space,多酷.

必须的,Firework particle animation effects are in addition to dazzling romance,There are many practical application scenarios,比如,in game application,Rendering of the page after the player wins、In-game atmosphere creation for specific holidays such as the Spring Festival, etc..

看个示例：

From particle animation to more exciting

Fireworks particle animation is equipped withHMS Core 3D EngineImplementation of visual effect,借助3D Engine,It can also open up more exciting possibilities for virtual horizons.3D Engine为开发者提供高性能、高画质、高扩展性的实时3D引擎,以及便捷高效的可视化开发工具,帮助开发者制作高品质的3D应用.

If you are game development or interested in game development,那么你用3D Enginecan play more than romance.

1、Hd rendering and visual effects,Height reduction of light and shadow;

2、多线程PBR渲染,High performance in real time3D渲染效果;

3、CPU/GPU粒子渲染,Simulate an explosion、火焰、雨雪等视觉特效;

4、3DEasily create characters and smooth animations,Supports real-time skeletal animation、表情动画、全身IK、动画重定向、多重动画状态机融合;

5、Provides automatic navmesh generation,Multi-objective path planning,NPCIntelligent wayfinding and intelligent obstacle avoidance function;

6、3D StudioProvide convenient development tools,支持场景编辑、材质编辑、动画编辑、地形编辑、脚本编辑等核心功能

总之,3D Engine在手,品质3DThe game scene is easy,Not convinced to try！

实操指南——用3D EngineImplement particle animation fireworks effect

创建关卡

1、You need to create a new level：In the engine homepage menu bar,选择“文件 > 新建关卡”.

2、输入Level名称,比如“Fireworks”后,点击“确认”创建成功.After completion, you will enter the Xuantian Engine'sLevel界面.

环境搭建

1、Before the scene fireworks effect,We need to adjust the environment in the level appropriately,First remove the entities we don't use：On the engine home page“entity outline”The default environment in the window finds the shader ball and ground mesh entities,Right mouse click to delete.

2、We need to simulate a darker environment：选中“entity outline”The sky in the default environment group of the window,on the right side of the engine homepage“组件属性”Find the high dynamic range skybox component in the window,and adjust the exposure property to-3.2.

3、选中“entity outline”sun in window default environment group,on the right side of the engine homepage“组件属性”Find the Directional Light component in the window,and right-click the component,点击“禁用组件”.

4、在“entity outline”Right-click in the window and select“创建实体”.

5、在“entity outline”Select the newly created entity in the window,Rename in component properties to“Bloom”,并添加一个“光晕”组件和“Aftertreatment box”Component to enhance the light effect of firework particles.

6、Set the parameters of the halo component as shown below.

After completing the above steps you will get the following results

材质编辑

1、Next we need to create some light effect materials for the firework particles,In the first place in the engine global menu bar click on the home page“工具 > 材质编辑器”打开材质编辑器.

2、Click in the menu bar of the material editor“文件 > 新建”,Create a new material file.

3、In the pop-up window, select the material type“ParticleMesh”,and in the project directoryAssets文件夹中新建一个“Material”文件夹,keep materials into this folder,重命名为“Particle”.

4、material editor“材质属性”The current material type and input parameter configuration are displayed in the window,You can modify its corresponding parameter settings here,参数设置如下图.

·基础颜色：Use color from base color,can be entered directly in the input fieldRGB值,You can also click on the color square to open“选择颜色”window adjustment color.

·自发光：Use self-illumination properties,需要先打开“开启”开关.Colors are used in a similar way to the underlying color properties,Intensity determines the intensity of self-illumination.

5、To enrich our particle light effects,我们需要重复2~4步骤,Recreate two light effect materials with different colors,并命名为“Particle_02”和“Particle_03”,参数设置如下图.

Particle Editing

1、Back to Engine Home,Click in the global menu bar“工具 > Particle Editing器”Open the particle editor.

2、in the particle editor“资源浏览”Find in the project directory in the window“Assets”文件夹,Click to select and right-click in Browse Templates and click“新建文件夹”,命名为“Particle”.

3、in our step2中创建的“Particle”Right-click in the folder and click“New particle system”,命名为“Fireworks.particle”.

4、Double-click the particle created in the browse panel to enter the editing,在“发射器”A default effect is displayed in the window：Sprite particles use yellow material,以每秒10the velocity of the particles is emitted upwards,The lifetime of a particle is1秒.

5、We need to create an upward emitting particle part and a bursting particle part to compose the firework effect that emits and blooms,Let's start by editing a particle emitter that emits upwards.

Click in the emitter node“Emitter Properties”After attribute classification,您可在“细节”Panel to view the attribute modules under this attribute category,Set the maximum number of particles emitted and the duration of the emitter as shown below.

Click in the emitter node“生成方式”属性分类,勾选使用“The outbreak of the list”生成方式,and add an element to the burst list to set the number of particles to4.

Click in the emitter node“Particle Basic Properties”属性分类,Set the lifetime of the particle to1.5.

Click in the emitter node“发射器形状”属性分类,Select Rectangle in Emitter Shape,and set the size as shown below.

Click in the emitter node“速度”属性分类,设置Z轴速度为7.0.

Click in the emitter node“尺寸”属性分类,勾选“Size changes over time”,Select Type as Curve Value,并按照下图设置X、Y、ZThe maximum value and curve of.

Click in the emitter node“外力”属性分类,Check the acceleration,and set as shown below.

Click in the emitter node“光照”属性分类,Check Lighting,And set the parameters according to the following figure.

Click in the emitter node“渲染器”属性分类,Select renderer as“mesh renderer”,并在“Assets > Material > Particle.material”Find the material we saved in the material editing chapter in the catalog to assign.

Specified in the mesh“sphere.fbx”.

6、此时,We have completed an upward emitting particle emitter,Next, we need to be on the outbreak of the fireworks particles for editing.

首先我们在“发射器”Right-click in the window,点击“添加发射器”Add a new launcher.

Click in the emitter node“Emitter Properties”After attribute classification,According to the chart set emitter properties parameters.

Click in the emitter node“生成方式”After attribute classification,According to the chart generation set parameters.

Click in the emitter node“Particle basic properties”After attribute classification,Set the basic property parameters of particles according to the following figure.

Click in the emitter node“发射器形状”After attribute classification,Set the emitter shape parameters as shown below.

Click in the emitter node“速度”After attribute classification,Set the speed parameters as shown below.

Click in the emitter node“尺寸”After attribute classification,Set the size parameters as shown below.

Click in the emitter node“外力”After attribute classification,Set the external force parameters according to the following figure.

Click in the emitter node“光照”After attribute classification,According to the chart parameters set light.

Click in the emitter node“渲染器”After attribute classification,Set the renderer parameters as shown below.

7、重复步骤6,Create two new emitters,Particle effect for rich fireworks.要注意的是,You can set different in the process of construction of two transmitters“速度 > spherical velocity”参数和“Particle basic properties > 粒子生命 > 生命周期”Parameters to enrich the firework effect,Of course you also can according to your understanding set other attribute values of the parameters.

8、At this point we have completed the setup of a firework particle,In order to achieve a richer effect,We can copy the particle file,Get two new particle effects with the same attribute parameters,我们将其命名为“Fireworks_02”和“Fireworks_03”.

9、In particle opened in the editor“Fireworks_02”粒子文件,Click on the four in a transmitter node respectively“渲染器”属性分类,Assign the material as we are in“材质编辑”Material files for other colors saved in chapters“Particle_02”to enrich our firework effects and save our edits.同理我们在“Fireworks_03”A new material file can be specified in the particle file“Particle_03”.

place particles

1、Back to Engine Home,在“entity outline”Right click on the click of the mouse in the window“创建实体”,创建7A blank entity,并在“组件属性”rename it in the window,可参考下图.

2、在“entity outline”Multi-select the newly created in the window7个实体后,在“组件属性”window is adding“粒子组件”.

3、在“粒子”组件中,Specify the particle file we save,并打开“开启”按钮,Here we can randomly specify for each entity“Fireworks”、“Fireworks_02”和“Fireworks_03”粒子文件.

5、Randomize using the viewport's controls7position and rotation of an entity,This will determine the angle and position of the fireworks launch.

6、Finally, we also need to adjust the angle and position of the camera,我们在“entity outline”The window is selected in the default environment“相机”实体.

7、在“组件属性”窗口中找到“flight camera input”组件,The mouse right click the component,并将其删除.

8、in the camera component,Click to enter the camera view,Your viewport will render the camera perspective,You can use the mouse and keyboard to move the camera in the viewport.

9、After choosing the best viewing location,点击“Return to default editor camera view”.

最终效果

完成上述步骤后,Click the drop-down menu of the Run button,选择“Play (Maximized)”全屏运行,You are ready to run the scenario.

了解更多详情>>

访问3D Engine开发者联盟官网

访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址：GitHub、Gitee

关注我们,第一时间了解 HMS Core 最新技术资讯~