[游戏开发] QML进阶(五)-通过粒子模拟系统实现各种炫酷的特效

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> QML进阶(五)-通过粒子模拟系统实现各种炫酷的特效 -> 正文阅读

[游戏开发]QML进阶(五)-通过粒子模拟系统实现各种炫酷的特效

粒子模拟是计算机图形技术的可视化图形效果。典型的效果有：落叶，火焰，爆炸，流星，云等等。它不同于其它图形渲染，粒子是基于模糊来渲染的。它的结果在基于像素下是不可预测的。粒子系统的参数描述了随机模拟的边界。传统的渲染技术实现粒子渲染效果很困难。

粒子模拟的核心是粒子系统(ParticleSystem),它控制了共享时间线.一个场景下可以有多个粒子系统，每个都有自己独特的时间线。一个粒子使用发射器元素(Emitter)发射，使用粒子画笔(ParticlePainter)实现可视化，它可以是一个图片，一个QML项或者一个着色项。一个发射器元素也提供向量来控制粒子的方向。一个粒子被发送后就再也无法控制。粒子模型提供粒子模拟器,它可以控制已发射粒子的参数。在一个系统中，粒子可以使用粒子群参数(ParticleGroup)来共享移动时间。

粒子系统(ParticleSystem)

负责管理发射器之间的共享时间线

发射器(Emitter)

负责向系统中发射逻辑粒子

粒子画笔(ParticlePainter)

负责实现粒子可视化

方向(Drection)

负责已发射粒子的向量空间

粒子组(ParticleGroup)

每个粒子是一个粒子组的成员

粒子控制器(Affector)

控制已发射的粒子

简单的粒子系统模拟效果

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ParticleSystem")

    //背景图片
    Rectangle {
        id: root
        width: 640; height: 480
        color: "#EEEEEE"

        //粒子发射系统
        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            anchors.centerIn: parent
            //发射范围
            width: 640; height: 480
            system: particleSystem
            //粒子的发射频率,粒子存在的周期
            emitRate: 60
            lifeSpan: 1000
            //生命周期变化的速度
            lifeSpanVariation: 500
            //粒子的大小和结束的大小
            size: 16
            endSize: 64
        }
        //粒子的类型
        ImageParticle {
            source: "qrc:/images/flower.png"
            system: particleSystem
        }
    }
}

修改粒子的动画特效和对应的属性

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ParticleSystem")

    //背景图片
    Rectangle {
        id: root
        width: 640; height: 480
        color: "#EEEEEE"

        //粒子发射系统
        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            anchors.centerIn: parent
            //发射范围
            width: 640; height: 480
            system: particleSystem
            //粒子的发射频率,粒子存在的周期
            emitRate: 60
            lifeSpan: 2000
            //生命周期变化的速度
            lifeSpanVariation: 200
            //粒子的大小和结束的大小
            size: 16
            endSize: 64
        }

        //粒子的类型
        ImageParticle {
            source: "qrc:/images/heart.png"
            system: particleSystem
            //初始颜色和颜色变化范围
            color: '#FFD700'
            colorVariation: 0.2
            //首先顺时针旋转15度
            rotation: 15
            //不同粒子在+/-5度之间变化
            rotationVariation: 5
            //每个粒子会以45度旋转
            rotationVelocity: 45
            //每个粒子的旋转速度在+/-15度之间变化
            rotationVelocityVariation: 15
            //入场效果
            entryEffect: ImageParticle.scale

        }
    }
}

指定粒子发射方向

粒子已经可以旋转,但是如何让粒子有一个轨迹.轨迹由速度或者粒子随机方向的加速度来指定,也可以叫做矢量空间.

有多种可用矢量空间用来定义粒子的速度或者加速度:

1.角度方向(AngleDirection)-使用角度的方向变化

2.点方向(PointDirection)-使用x,y组件组成的方向变化

3.目标方向(TargetDirection)-朝着目标点的方向变化

 import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ParticleSystem")

    //背景图片
    Rectangle {
        id: root
        width: 640; height: 480
        color: "#EEEEEE"

        //粒子发射系统
        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            //从相同的位置发射出去
            width: 1; height: 1
            x:0; y:240
            system: particleSystem


            lifeSpan: 6400
            //生命周期变化的速度
            lifeSpanVariation: 500
            //粒子的大小和结束的大小
            size: 64

            velocity: AngleDirection{
                //发射的角度
                angle: 0
                angleVariation: 15
                //发射的梯度值变化
                magnitude: 100
                magnitudeVariation: 50
            }
        }

        //粒子的类型
        ImageParticle {
            source: "qrc:/images/heart.png"
            system: particleSystem
            //初始颜色和颜色变化范围
            color: '#FFD700'
            colorVariation: 0.2
            //首先顺时针旋转15度
            rotation: 15
            //不同粒子在+/-5度之间变化
            rotationVariation: 5
            //每个粒子会以45度旋转
            rotationVelocity: 45
            //每个粒子的旋转速度在+/-15度之间变化
            rotationVelocityVariation: 15
            //入场效果
            entryEffect: ImageParticle.scale

        }
    }
}

显示效果如下图所示:

带有发射角度的粒子发射系统

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ParticleSystem")

    //背景图片
    Rectangle {
        id: root
        width: 640; height: 480
        color: "#EEEEEE"

        //粒子发射系统
        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            //发射范围
            width: 1; height: 1
            x:0; y:240
            system: particleSystem
            emitRate: 3
            lifeSpan: 6400
            //生命周期变化的速度
            lifeSpanVariation: 500
            size: 32

            velocity: AngleDirection{
                //发射的角度
                angle: -45
                angleVariation: 0
                magnitude: 120
            }
            //加速度对应的变化
            acceleration: AngleDirection{
                angle: 90
                magnitude: 25
            }
        }

        //粒子的类型
        ImageParticle {
            source: "qrc:/images/bomb.png"
            system: particleSystem
            rotation: 15
            //不同粒子在+/-5度之间变化
            rotationVariation: 5
            //每个粒子会以45度旋转
            rotationVelocity: 10
            //每个粒子的旋转速度在+/-15度之间变化
            rotationVelocityVariation: 15
            entryEffect: ImageParticle.scale

        }
    }
}

粒子发射的方向可以是一个点，通过指定一个发射点，以及在x和y方向的变化速度，我们就可以控制粒子的变化方向了。

velocity: PointDirection{
			x: 100
			y: 0
			xVariation: 0
			yVariation: 100/6
       }

我们还可以将某个QML中的Item对象设定为粒子的发射目标，从而让粒子发送到某个UI控件处。

velocity: TargetDirection{
               targetItem:rootItem
            }

通过自定义画笔来指定粒子类型

在QML中我们还可以将自己绘制的UI元素作为粒子进行发射，这时候我们就需要用到

ItemParticle和CustomParticle元素了。

ItemParticle：基于粒?画笔的代理

CustomParticle:基于粒子画笔的着色器

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("ParticleSystem")

    //背景图片
    Rectangle {
        id: root
        width: 640; height: 480
        color: "#EEEEEE"

        //粒子发射系统
        ParticleSystem {
            id: particleSystem
        }

        Emitter {
            id: emitter
            //发射范围
            width: 1; height: 1
            x:0; y:100
            system: particleSystem
            emitRate: 3
            lifeSpan: 6400
            //生命周期变化的速度
            lifeSpanVariation: 500
            size: 32

            velocity: PointDirection{
                x: 100
                y: 0
                xVariation: 5
                yVariation: 0
            }
            //加速度对应的变化
            acceleration: AngleDirection{
                angle: 90
                magnitude: 25
            }
        }

        ItemParticle{
            id: particle
            system: particleSystem
            delegate: itemDelegate
        }
        Component{
            id: itemDelegate
            Rectangle{
                id: container
                width: 20*Math.ceil(Math.random()*3);height: width
                color: 'white'
                Image {
                    anchors.fill:parent
                    anchors.margins: 4
                    source: "qrc:/images/heart.png"
                }
            }
        }
    }
}

运行效果如下图所示:

粒子控制参数

粒子由粒子发射器发出。在粒子发射出后，发射器无法再改变粒子。但是粒子控制器允许你控制发射后的粒子参数，通过修改对应的参数我们可以控制粒子的状态。

控制器影响粒子的参数包含如下：

1.生命周期(Age)-修改粒子的生命周期

2.吸引(Attrator)-吸引粒子朝向指定点

3.摩擦(Friction)-按照粒子速度成正比减慢速度

4.重力(Gravity)-设置一个角度的加速度

5.紊流(Turbulence)-强制基于噪声图像方向的流动

7.漂流(Wander)-随机变化的轨迹

8.组目标(GroupGoal)-改变一个粒子组的状态

9.子粒子(SpriteGoal)-改变一个子粒子的状态

粒子组合发射

我们可以在一个系统里面添加多个粒子发射器，同时发射多种粒子，这样就可以实现各种各样的炫酷的特效了。这里以一个例子来进行说明:

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Particles 2.0


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Particles")

    Rectangle {
        id: root
        width: 480; height: 240
        color: "#000000"
        property bool tracer: false

        ParticleSystem {
            id: particleSystem
        }

        ImageParticle {
            id: smokePainter
            system: particleSystem
            groups: ['smoke']
            source: "qrc:/images/bomb.png"
            alpha: 0.3
        }

        ImageParticle {
            id: rocketPainter
            system: particleSystem
            groups: ['rocket']
            source: "qrc:/images/heart.png"
            entryEffect: ImageParticle.Fade
        }

        Emitter {
            id: rocketEmitter
            anchors.bottom: parent.bottom
            width: parent.width; height: 40
            system: particleSystem
            group: 'rocket'
            emitRate: 2
            maximumEmitted: 8
            lifeSpan: 4800
            lifeSpanVariation: 400
            size: 128
            velocity: AngleDirection { angle: 270; magnitude: 150; magnitudeVariation: 10 }
            acceleration: AngleDirection { angle: 90; magnitude: 50 }
        }

        TrailEmitter {
            id: smokeEmitter
            system: particleSystem
            group: 'smoke'
            follow: 'rocket'
            size: 16
            sizeVariation: 8
            emitRatePerParticle: 16
            velocity: AngleDirection { angle: 90; magnitude: 100; angleVariation: 15 }
            lifeSpan: 200
        }

        Friction {
            groups: ['rocket']
            anchors.top: parent.top
            width: parent.width; height: 80
            system: particleSystem
            threshold: 5
            factor: 0.9

        }

        Turbulence {
            groups: ['rocket']
            anchors.bottom: parent.bottom
            width: parent.width; height: 160
            system: particleSystem
            strength:25
        }


        ImageParticle {
            id: sparklePainter
            system: particleSystem
            groups: ['sparkle']
            color: 'red'
            colorVariation: 0.6
            source: "qrc:/images/flower.png"
            alpha: 0.3
        }

        GroupGoal {
            id: rocketChanger
            anchors.top: parent.top
            width: parent.width; height: 80
            system: particleSystem
            groups: ['rocket']
            goalState: 'explosion'
            jump: true
        }

        ParticleGroup {
            name: 'explosion'
            system: particleSystem

            TrailEmitter {
                id: explosionEmitter
                anchors.fill: parent
                group: 'sparkle'
                follow: 'rocket'
                lifeSpan: 750
                emitRatePerParticle: 200
                size: 32
                velocity: AngleDirection { angle: -90; angleVariation: 180; magnitude: 50 }
            }

            TrailEmitter {
                id: explosion2Emitter
                anchors.fill: parent
                group: 'sparkle'
                follow: 'rocket'
                lifeSpan: 250
                emitRatePerParticle: 100
                size: 32
                velocity: AngleDirection { angle: 90; angleVariation: 15; magnitude: 400 }
            }
        }
    }
}

运行效果如下图所示: