3D游戏第八次作业-烟花粒子效果实现

结果展示

先来个结果镇楼

下面是一个动画演示:

最终效果演示

本次项目使用的资源:

Unity Particle Pack:使用的Flame 01以及Twinkle等material均来自这个包,且该包有较多的示例。

粒子效果制作

我们的烟花分为以下5个部分组成:

其中,Firework主体也是一个粒子系统,它拥有下辖的5个粒子系统作为子部件。我们利用粒子系统面板中的 Sub Emitters 使得Firework所发射的每个粒子都拥有子部件的粒子效果。实际上,Firework主体只是提供一个粒子的移动,具体的粒子渲染效果全部由Firework的五个子部件来完成;

我们将从各个子部件的实现开始,逐步讲解,最后在Firework中完成各个粒子效果的合并;

trail子部件

即我们的烟花在爆炸之前飞行过程中产生的尾迹:

我们可以看到,我们的尾迹中的粒子在运动过程中发生了一些变化,总结如下:

  • size:粒子的大小先变大再变小;
  • color:粒子的颜色随着运动时间的变化而变化。
  • velocity:粒子在产生后向四周扩散,使尾迹变大,如同烟雾;

那么我们如何创建这样一个trail粒子效果呢?

  • 创建tail: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 trail

  • 设置粒子大小动态变化: 打开trail的粒子系统面板,勾选 size over lifetime 选项。并在面板下方设置粒子在运动中的size变化的曲线如下。

    通过我们的size变化的曲线,我们可以知道我们的trail所发射的粒子的大小变化为:
    缓慢变大保持一段时间大小缓慢变小瞬间变大瞬间变小
    最后一段的瞬间变大再瞬间变小是为了模拟粒子灰烬的闪动效果。

  • 设置粒子颜色动态变化: 打开trail的粒子系统面板,勾选 color over lifetime 选项。并设置颜色如下:

    最后一段颜色接近于橙红色,和粒子动态变化最后一部分的瞬间变化相结合,可以模拟出粒子灰烬的闪动效果。

  • 设置粒子运动: 打开trail的粒子系统面板,勾选 Velocity over lifetime 选项。选择粒子运动的速度变化方式为 Random between two curves

    然后令x轴和z轴方向上的速度变化曲线如下:

    而y轴方向上的速度变化不要改变,一直保持为0即可。

    这样,尾迹粒子在被产生之后就会向四周随机扩散,使得尾迹整体变大,模拟烟雾的扩散效果;

  • 设置粒子的发射方向: 打开trail的粒子系统面板,勾选 Shape 选项。并选择shape为 sphere 。这样粒子在产生的时候就会在烟花的周围随机产生,而不是直接从烟花尾部直直地产生,更加贴合现实。

  • 设置Emission和粒子系统主模板

twinkle子部件

twinkle子部件用于在烟花爆炸的时候产生一个闪光,模拟烟花爆炸时的闪光。

我们从这段动画中看到,粒子从小变大,然后瞬间变小,并在这个过程中微微旋转。因此,我们根据这个效果来设计我们的粒子系统;

步骤:

  • 创建twinkle: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 twinkle

  • 设置粒子的渲染图片为twinkle: 打开twinkle的粒子系统面板,打开 Render 选项,并改变material为Twinkle.

  • 设置粒子大小动态变化: 打开twinkle的粒子系统面板,勾选 size over lifetime 选项。并在面板下方设置粒子在运动中的size变化的曲线如下:

  • 设置粒子动态旋转: 打开twinkle的粒子系统面板,勾选 Rotation over lifetime 选项即可,不需要特意改动什么值;

  • 设置Emission和粒子系统主模板

    在这里,我们将Emission的Rate Over time,即每秒发射多少个粒子置为0,因为我们的闪光只在烟花爆炸的时候才出现,在烟花飞行的过程中不应该发射出闪光。我们转而设置Emission的Bursts,设置Bursts中的Count为1,使得Twinkle在发射粒子的时候只发射一个;Time表示发生爆炸的时候Twinkle发生一次Bursts的延迟时间。

Explore子部件

即烟花爆炸的时候产生的球型光雨:

在图中,我们可以看到球型光雨的运动特性:

  • size:类似trail的粒子,缓慢变大,再缓慢变小,之后迅速变大再迅速变小来模拟灰烬的闪烁效果;
  • color:同样类似trail的粒子,在运动过程中不断变化;
  • 发射方向:所有的粒子呈球型向四周扩散;

根据以上效果,我们就可以开始我们的设计;

步骤:

  • 创建explore: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 Explore

  • 设置粒子大小动态变化: 打开explore的粒子系统面板,勾选 size over lifetime 选项。并在面板下方设置粒子在运动中的size变化的曲线如下:

    基本上和trail的粒子的size变化一样;

  • 设置粒子颜色动态变化: 打开explore的粒子系统面板,勾选 color over lifetime 选项。并设置颜色如下:

    和trail的步骤其实一模一样,只是颜色有所不同,你可以根据自己的喜好来创建喜欢的运动渐变颜色。

  • 设置粒子的发射方向: 打开explore的粒子系统面板,勾选 Shape 选项。并选择shape为 sphere 。这样粒子就会呈球型产生,并向上下左右扩散。至于trail中为什么粒子没有呈球型扩散呢,是因为我们额外为trail中的粒子勾选了 Velocity over lifetime ,并使粒子在原来的运动的基础上再向四周扩散,从而没有产生球型。

  • 设置Emission和粒子系统主模板

    同样,我们对于球型光雨的要求也是在爆炸的时候才产生,因此Emission的Rate Over time同样置为0,而使用Bursts。和twinkle不同,光雨一次要产生很多,一次,count的数量是1000,即每个爆炸都发射1000个粒子。

Fire samll子部件

即我们飞行中的烟花:

从烟花的飞行过程中我们可以看出:

  • 烟花的尾部出现抖动;
  • 烟花本身是一个动画,即火焰存在出现到消失的过程;

根据这些,我们开始我们的制作:

  • 创建small fire: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 Fire small

  • 设置粒子的渲染图片为Flame 01: 打开Fire small的粒子系统面板,打开 Render 选项,并改变material为Flame 01.

    • Flame 01为一组火焰的图片;
  • 设置动画: 打开Fire small的粒子系统面板,打开 Texture sheet animation 选项,设置如下:

    其中Mode默认为Grid模式,不必改动。在Mode下的Tiles中的x=7, y=7表示我们将Flame 01这张图像切分为7*7的网格,网格中的每一格代表动画的一帧。我们的动画将从第一帧开始播放到最后一帧,即第49帧。其他的属性保持默认即可;这样,我们产生的粒子就会是一个自动变化的粒子。

  • 设置粒子的发射方向: 打开Fire small的粒子系统面板,勾选 Shape 选项。并选择shape为 cone ,即从锥体的底部或顶部发射粒子。设置具体如下:

    其中:

    • Angle:锥体的上底面,即发射粒子的面,相对于下底面的张开幅度,0表示和下底面的张开幅度相同。因此,在Fire small里的锥体呈圆柱形;
    • Radius:锥体的下底面的半径;

    其他均为默认值即可;但是由于锥体的上底面原本的方向不是直接指向下方的,所以我们要对粒子系统进行旋转,Fire small的transform如下:

  • 设置粒子的抖动: 可以看到我们的烟火在运动过程中是不断抖动的。这是为了模拟烟花在飞翔过程中受到气流影响造成的火焰的抖动效果,我们直接勾选 Noise 选项即可。

  • 设置粒子颜色动态变化: 打开Fire small的粒子系统面板,勾选 color over lifetime 选项。并设置颜色如下:

    因为我们原来的图片在播放动画的时候尾焰比较大,我们让动画的透明度在后面均为1,使得尾焰变小。

  • 设置Emission和粒子系统主模板

    在Fire small中的Emission,我们没有使用Rate over time和Bursts,而是使用了Rate over Distance。Rate over Distance表示每个移动距离单位发射的粒子数。也就是说,我们的Fire small在运动中才会产生粒子。

Explore2子部件

即四散的光雨效果:

可以看到,我们的Explore2实际上只是一些粒子在呈球型发散,然后每个粒子都带有我们的制作过的trail尾迹。它的实现也比较简单。trail部分和我们前面所做的trail基本相同,只是在如粒子大小以及发射粒子的数目等参数方面存在差异,之后会指出。主要的部分还是Explore2这个部件的制作;

同样的开始

  • 创建Explore2: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 Explore2

  • 设置粒子的渲染图片为Twinkle: 打开Explore2的粒子系统面板,打开 Render 选项,并改变material为Twinkle。这里复用一下Twinkle材料;

  • 设置粒子的发射方向: 打开Explore2的粒子系统面板,勾选 Shape 选项。并选择shape为 sphere ,即以球型发射粒子。其他不用改动;

  • 设置粒子动态旋转: 打开Explore2的粒子系统面板,勾选 Rotation over lifetime 选项即可,不需要特意改动什么值;

  • 设置粒子运动: 打开Explore2的粒子系统面板,勾选 Velocity over lifetime 选项。设置如下:

    我们基本不改动选项中的内容,只是改动speed Modifier一项,这一项决定了粒子的运动速度。由于粒子在爆炸的时候是以很快的速度爆发,之后快速降速,再缓慢降速,因此,我们需要在speed Modifier中体现出这种速度变化;

  • 设置粒子在运动中受重力: 打开Explore2的粒子系统面板,勾选 Force over lifetime 选项。并将z轴的力设为-20,使得粒子受到重力,在爆发后向地面坠落,模拟自然的重力;

  • 设置trail: 为了让每个粒子都拥有自己的尾迹,我们打开Explore2的粒子系统面板,勾选 Sub Emitters 选项。将一个制作完成的trail子部件加入到Explore2中,成为Explore2的子部件。然后将trail设置为Explore2子粒子系统,设置如下:

    设置trail在Explore2 Birth即开始运行的时候同时运行,这样,trail的粒子效果就能加入到每个Explore2的粒子中,产生尾迹;

  • 设置Emission和粒子系统主模板

  • trail的改动:

    • 主界面中的start size从1变为0.5;
    • 主界面中的max Particles变为20000;
    • Emission中的Rate over time变为100;

Firework主体

Firework主体的功能只是为烟花提供运动,因此不会产生任何粒子,各种粒子效果将由上面制作的各个部件来完成;

步骤:

  • 创建Firework: 右键EffectsParticle System 创建一个新的粒子系统,然后我们给它取名为 Firework

  • 将以上创建成功的组件按照开篇的组成加入到Firework中。

  • 设置粒子的发射方向: 打开Firework的粒子系统面板,勾选 Shape 选项。并选择shape为 box ,即以正方形发射粒子。由于box的默认发射方向在z轴正方向,因此,我们将Firework进行旋 转;

  • 设置粒子不渲染: 由于Firework的粒子并不需要渲染,所以,我们在 Render 选项中设置渲染模式为 None ;

  • 设置子粒子系统: 和Explore2类似,我们要勾选 Sub Emitters 选项,然后将Firework的所有子粒子系统加入到里面,设置如下:

    其中和已经介绍的Birth不同,Death是在粒子结束的时候才会触发的事件,即当粒子结束的时候,我们的Twinkle,Explore和Explore2的粒子效果会同时发生,表现为烟花爆炸;

  • 设置Emission和粒子系统主模板

  • 最终的效果:

制作放烟花场景:

代码:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class FireFirework : MonoBehaviour
{// Start is called before the first frame updatepublic ParticleSystem[] firework;public ParticleSystem.Particle[] m_Particles;void Start(){GameObject[] temp;// 获取场景中所有的Firework,即烟花发射器;temp = GameObject.FindGameObjectsWithTag("firework");firework = new ParticleSystem[temp.Length];Debug.Log(temp.Length);// 将烟花发射器赋予firework数组;for(int i = 0; i < temp.Length; ++i){firework[i] = temp[i].GetComponent<ParticleSystem>();firework[i].Stop();}if (m_Particles == null){m_Particles = new ParticleSystem.Particle[firework[0].main.maxParticles];}}// Update is called once per frame[System.Obsolete]void Update(){       if (Input.GetButtonDown("Fire1")){Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);//从摄像机发出到点击坐标的射线  RaycastHit hit;if (Physics.Raycast(ray, out hit)) {// 在随机选择场景中的一个Firework;int id = Random.Range(0, firework.Length);// 利用该Firework发射一个粒子,即烟花;firework[id].Emit(1);// 获取场景中属于firework[id]的运行中的粒子;int count = firework[id].GetParticles(m_Particles);// 根据鼠标点击位置计算烟花的飞行时间;float life_time = (hit.point.y - gameObject.transform.position.y) / firework[id].startSpeed;// 根据鼠标点击位置和烟花飞行时间计算烟花的水平速度;float x_v = (hit.point.x - gameObject.transform.position.x)/life_time;// 设置刚刚发射的粒子的飞行时间;m_Particles[count - 1].lifetime = life_time;// 设置刚刚发射的粒子的速度;m_Particles[count - 1].velocity = new Vector3(x_v, m_Particles[count - 1].velocity.y, m_Particles[count - 1].velocity.z);// 将改动应用到场景中;firework[id].SetParticles(m_Particles,count);}}}
}

我在场景中放置了四个Firework,每个Firework拥有不同的烟花颜色。每次发射烟花将从四个烟花发射器中选一个进行发射,并设定烟花的飞行时间以及飞行速度,保证烟花到达鼠标点击的位置就爆炸。

以下是最终的效果展示:

最终效果演示

项目地址

项目连接-传送门

unity3D烟花制作-来放烟花吧!相关推荐

  1. 使用Unity粒子系统放烟花

    1.前言 本博客是中山大学3D游戏编程与设计大作业 2.作业要求 1.按参考资源要求,制作一个粒子系统 2.使用3.3节介绍,用代码控制使之在不同场景下效果不一样. 3.用到的资源 3.1 基础资源, ...

  2. 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效...

    html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...

  3. 最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效

    html5七夕表白放烟花动画特效 最近分享一款抖音上很火的七夕节程序员表白页面.小姐姐,我好喜欢你,你愿意做我女朋友吗? 表白成功触发烟花背景动画特效. 表白内容:有人说,人的一生会遇到2920万人, ...

  4. 手把手教你用C语言制作炫酷烟花代码!

      下方有完整代码!     烟花的来历:烟花爆竹相传是由唐朝一个叫李畋的人发明的,他利用火药.纸筒等材料制作爆竹,目的是产生巨大声响以驱鬼辟邪:烟花寓意:最初民间燃放焰火是为了迎神与驱逐鬼怪,后来是 ...

  5. c语言烟花百度云,C语言实现放烟花的程序

    这是一个利用C语言编写放烟花的程序(同时也可以播放音乐),供大家参考,具体内容如下 代码如下 #pragma once #include #include //图形界面库头文件 #include // ...

  6. 快过年了,用JS让你的网页放烟花吧

    如何实现的? 我自己是一名从事了多年开发的web前端老程序员,前段时间我花了一个月整理了一份最适合学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以添加下面的QQ群,即可 ...

  7. 2022跨年烟花代码(六)HTML5鼠标点击页面放烟花特效

    HTML5鼠标点击页面放烟花特效 html代码 <!DOCTYPE html> <html> <head><meta http-equiv="Con ...

  8. Unity3D_(Shuriken粒子系统)制作简单的烟花爆炸效果

    Unity中的粒子系统可以用于制作特效,如开枪火花效果,简单爆炸效果等.(毕竟程序员不是设计师,简单的特效都没有问题,要制作一些非常美观的特效还是需要多了解跟美术有关的知识.) 粒子系统实现一个简单的 ...

  9. Matlab放烟花 带音效哟 祝大家新年快乐

    这一次要更新的是用Matlab放烟花!祝大家新年快乐! 效果如下: 2021已然接近尾声,回顾这一年,总有这样或那样的收获,也有一些遗憾. 但是,一切过往,皆为序章. 这一期来填一下上上次留下的坑,用 ...

最新文章

  1. 解决Linux CENTOS服务器 tree命令出现乱码 解析原因
  2. Linux下wireshark抓包验证telnet明文传输密码
  3. 详解JavaScript变量类型判断及domReady原理 写得很好
  4. 中国内窥镜干燥存放柜市场趋势报告、技术动态创新及市场预测
  5. iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 9443 -j DNAT
  6. Gentoo学习笔记
  7. jsp springmvc 视图解析器_SpringMVC 视图解析器
  8. Java中,类的实例化方法
  9. usermod 添加用户多个附属组
  10. win10下安装ubuntu双系统
  11. android版《手工接水管》--unity3d制作的
  12. html5文本缩进,CSS怎样缩进文本?
  13. 勒索病毒频发,信息安全事件如何破 --记两次勒索病毒数据恢复实例
  14. iOS-Core Animation 核心动画高级编程/5-变换
  15. led台灯哪个牌子效果最好?2022最新国产led灯品牌排行
  16. 探秘 App Clips
  17. 李笑来《财富自由之路》读书笔记(Ⅰ)
  18. 华为p20nfc怎么复制门禁卡_EMUI的这个功能,让手机瞬间化身门禁卡
  19. 实现米思齐按键控制LED灯
  20. tomtom for android,TomTom Sports下载

热门文章

  1. [推荐]计算机行业日语常用语
  2. 电子邮箱排名,更安全稳定的电子邮箱—TOM
  3. 【Sniper 4 Jobs】#2023秋招记录贴(网易互娱)
  4. unity导入Mopub Sdk 并导出安卓和iOS包
  5. java面试宝典大全 | 一份培训机构内部泄露的绝密文档,java面试题
  6. 密封类的permits语法不支持泛型参数
  7. 计算机毕业设计(附源码)python学校旧书交易网站
  8. 证件照怎么制作?分享几种证件照生成器
  9. uniapp 全端小程序接入广告
  10. 完全迁徙至Ubuntu -- OpenOffice3.0