Qt用qml实现简单的粒子效果

原创 2016年08月28日 23:26:14

粒子系统,一直是各大游戏引擎标配的一个模块

粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术,而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。

经常使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪、尘、流星尾迹或者象发光轨迹这样的抽象视觉效果等等。

先熟悉一个英语单词:

Particle

英 [ˈpɑ:tɪkl]  美 [ˈpɑ:rtɪkl] 

n.  微粒,颗粒; [数,物]粒子,质点; 极小量; 小品词;

Qt Quick提供了一个粒子系统,提供了四种主要的 QML 类型:

ParticleSystem ,粒子系统,它维护一个粒子系统相关的 Emitters 、 Painters 、 Affectors ,Emitters 、 Painters 、 Affectors 要想一起玩儿,就得指定同一个 ParticleSystem。 ParticleSystem

Painters , 它负责渲染一个粒子。ParticlePainter 是基类, CustomParticle 、 ImageParticle 、 ItemParticle 是 Qt Quick 内置的三种粒子,都是 ParticlePainter 的派生类。

Emitters ,发射器,可以在给定的区域内突突突地发射逻辑粒子。具体的类为 Emitter 。

Affectors , 效果器,通过改变发射出去的逻辑粒子的属性来产生特效。 Qt Quick 内置了 Age 、 Gravity 、Friction 、 Attractor 等等效果器。

ParticleSystem

ParticleSystem 代表一个粒子系统,它维护一个公用的时间线,管理发射器、逻辑粒子与渲染器、效果器。它提供了一些属性:

empty ,布尔值,当粒子系统中的逻辑粒子都死翘翘时它被设置为 true 。也可以通过这个属性来暂停粒子系统,不过系统的时间线还是会更新。

paused ,布尔值,设置为 true ,粒子系统暂停,设置为 false ,粒子系统从暂停点恢复

running ,布尔值,设置为 false ,停止粒子系统。再次设置为 true 时,原先产生的那些逻辑粒子都会被销毁

particleStates ,Sprite 列表,列表中的每个 Sprite 的名字,与粒子系统中的某个粒子分组(ParticleGroup)的名字对应。 Sprite 用来定义粒子分组中的粒子状态变换时应用的效果。

ParticleSystem 还有一些方法,如 pause() 、 resume() ,基本上和属性对应,看看帮助就明了意思了。

Emitter

emitter

英 [ɪ'mɪtə]   美 [ɪ'mɪtə]   n.  发射器;

Emitter 用来发射逻辑粒子,在发射前, Emitter 会给逻辑粒子定义一些属性,比如大小、生命周期等,这些属性后续可以被效果器(Affector)改变。 Emitter 发射出来的逻辑粒子,必须要和一个具体的 ParticlePainter 联系起来,才会被渲染,我们才能看到。 Emitter 、 Painter 、 Affector 都有一个 system 属性,用来指定它们关联的 ParticleSystem ,如果三者的 system 属性指向同一个 ParticleSystem 实例,那它们就自动关联在一起了。

Emitter 类似一个普通的 Item ,它的 width 、 height 属性可以指定发射区域大小, anchors 可以完成布局。

Emitter 还有一些与粒子发射相关的属性:

size ,待发射的粒子的起始大小(像素),默认值为 16 。

endSize ,粒子寿命结束时的大小。在粒子的生命周期内,它的大小会从 size 到 endSize 线性变化。如果 endSize 为 -1 ,粒子大小则是固定的,始终是 size 。默认值为 -1 。

sizeVariation ,一个变量,设定粒子的 size 和 endSize 上下变化的最大范围,粒子系统会根据这个值,随便产生一个变量,添加到 size 和 endSize 属性上,用于产生大小随机变化的粒子。

lifeSpan ,寿命,单位是毫秒。默认为 1000 毫秒。

lifeSpanVariation ,一个变量,设定寿命的随机可变范围。默认为 0 。

emitRate ,发射频率,含义是每秒多少个。默认值为 10 。

velocity ,速度,类型是 StochasticDirection ,可以是 AngleDirection 、 PointDirection 、 TargetDirection 、 CumulativeDirection 中的一个。velocity 界定了粒子的运动方向。如果不指定 velocity 属性,粒子会在原地出生、变化、死亡。

Emitter 还有很多其它的属性,请参考 Qt 帮助。

TargetDirection

TargetDirection 是 Direction 的派生类,它的实例可以赋值给 Emitter 的 velocity 属性,用于指定 Emitter 发射的粒子的目标位置。

TargetDirection 的属性 targetItem 。 targetItem 用于指定目标位置关联的 Item 。在示例中,我定义了一个 Rectangle 对象,把它放在根窗口的右上方,然后将 TargetDirection 的 targetItem 属性指向这个 Rectangle 。当 targetItem 指向一个具体的 Item 时,targetX 、 targetY 属性就是相对于 targetItem 了。

ImageParticle

ImageParticle 是 Qt Quick 提供的图片粒子类,用来渲染图片。它的属性很多,在使用 system 指定它关联的粒子系统,使用 source 指定它使用的图片。

可以改变图片粒子的颜色(alpha 、 alphaVariation 、 redVariation 、 blueVariation 、 greenVariation ),旋转角度(rotation 、 rotationVariation 、 rotationVelocity 、rotationVelocityVariation )。

entryEffect 属性提供了一种简便的方式来设定粒子的进场、出场效果。默认值为 ImageParticle.Fade ,渐显渐隐,即在出现时透明度从 0 慢慢变为 1,消失时透明度从 1 变为 0 。我们的示例就是这种效果。它还可以取值 ImageParticle.None(没效果) 或 ImageParticle.Scale(出现时从 0 放大到 1,消失时从 1 缩小到 0 )。如果想获得更好地进场、出场效果,可以使用 sizeTable 和 opacityTable 。

在介绍上面的大致知识后,现在做一个简单的Qt粒子效果示例程序:

1.新建一个空的qmake project,取名:qzherParticle

2.新建一个main.cpp

3.新建一个Qt Resource File,取名为Res

4.在Res中添加一个QML File,取名为partical.qml

经过上述4步,把程序的空框架搭建起来

在此,用PS建立一个20X20大小的图片,绘制一个星状物,用于发射

存储为png,此图背景为透明色。原图:

将此图形添加到工程的资源中。

代码也主要分为两块:1.C++部分 2.qml部分

1 main.cpp

#include <QGuiApplication>

#include <QQuickView>

 

int main(int argc, char* argv[])

{

    QGuiApplication coreApp(argc, argv);

 

    QQuickView view;

    view.setSource(QUrl("qrc:/particle.qml"));

    view.setWidth(800);

    view.setHeight(600);

    view.setVisible(true);

 

    return coreApp.exec();

}

2. particle.qml

import QtQuick 2.2

 

// 用到 ParticleSystem 则必须导入粒子系统模块

import QtQuick.Particles 2.0

 

Rectangle {

    width: 800

    height: 600

 

    // 粒子系统

    ParticleSystem

    {

        anchors.centerIn: parent

 

        ImageParticle   // 图片粒子

        {

            source: "qrc:/img/particle.png" // 指定的图片

            colorVariation: 1.0 //颜色变化 0不变 1随机变化

        }

 

        // 发射器

        Emitter

        {

            x:0   // 发射器的位置,00)在窗口中心

            y:0

            emitRate: 100   // 每秒发射粒子数量

            size: 20        // 粒子大小

            lifeSpan: 1000  // 每个粒子的生命周期3

            velocity: AngleDirection    // 发射方向角度

            {

                magnitude: 200      // 速度值

                angleVariation: 360 // 角度变化最大值

            }

        }

    }

 

    // 显示的文字

    Text

    {

        x:0 // 此处(00)为窗口左上角,注意区分

        y:0

        z:100   // 将文字置于最顶层

        color: "#0b881c"

 

        text: qsTr("粒子系统qzher.com") // 文字

        font.family: "方正静蕾简体"   // 字体

        style: Text.Outline    // 以红色描边

        styleColor: "#e81919"

 

        font.pointSize: 40  // 字体大小

    }

}

还需在pro文件中添加:

QT += gui quick

最终效果:

源代码下载:http://download.csdn.net/detail/sinat_35523212/9602190

版权声明:更多文件,请访问 qzher.com 致力于良心IT培训,深圳QQ群:326023167

Qt Quick里的粒子系统

一个使用 Qt Quick 粒子系统的简单示例……
  • foruok
  • foruok
  • 2015年01月04日 07:26
  • 9207

【Qt OpenGL教程】19:粒子系统

这次教程中,我们将创建一个简单的粒子系统,并用它来创建一种喷射效果。利用粒子系统,我们可以实现爆炸、喷泉、流星之类的效果,听起来是不是很棒呢!...
  • cly116
  • cly116
  • 2015年08月06日 17:47
  • 1577

【QT】QML的粒子系统及图形渲染

在QML中,有两种特效可以让UI更加绚丽多彩,一种是粒子系统,另一种是图形渲染。 下面先来看一下粒子系统。 粒子系统主要有四个QML类型,分别是ParticleSystem、Emitter、Parti...
  • iEearth
  • iEearth
  • 2015年03月20日 16:03
  • 1823

Qt Quick里的图形效果(Graphical Effects)

Graphical Effects ,姑且叫作图形效果吧。它提供了 Blend 、 Color 等好几类效果,有些类别下面又有多种不同的效果……在界面引入图形效果,能够让我们的UI更具吸引力……...
  • foruok
  • foruok
  • 2015年01月14日 07:07
  • 9863

QML中的RotationAnimation旋转动画

RotationAnimation是用来控制某个元素的旋转。 现有一个需求,要求将一个矩形绕着自己的中心旋转九十度。 代码如下: import QtQuick 2.3 import QtQuic...

Qt用qml实现简单的粒子效果

最终运行效果: 涉及到的Qt知识点: 事件:鼠标事件,键盘事件,Paint事件,以及图片遮罩,定时器 新建一个空的qmake工程, loginDlg, 找一个带透明背景的png图片作为...

QML 动画特效之撞墙反弹

1.在讲此效果看需要在创建项目时选择qtquick; 2. 源码如下 import QtQuick 2.0 Rectangle { width: 80 height: 8...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

分享多个基于QML/Opengles的炫彩效果

第一个基于ListView实现的特性选择影片浏览与进入详情的效果
  • Esonpo
  • Esonpo
  • 2014年07月21日 15:49
  • 2129

Qt 3D教程(四)结合Qt Quick来实现动画的效果

上篇教程已经给大家带来较为实用的效果了,这回我们尝试载入两个模型,并且让PhongMaterial成为它们的共享材质,此外,我们通过借助QtQuick的动画框架来让我们的三维场景动起来!...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt用qml实现简单的粒子效果
举报原因:
原因补充:

(最多只允许输入30个字)