找回密码
 立即注册
收起左侧

使用Qt Quick Particle System粒子系统实现烟花效果

7
回复
19818
查看
[复制链接]
累计签到:1564 天
连续签到:1 天
来源: 2019-1-17 18:32:38 显示全部楼层 |阅读模式
版权声明
该文章原创于Qt开源社区(www.qter.org),作者yafeilinux,转载请注明出处!




马上要过年了,咱们这次来做一个特别的,用粒子系统实现烟花效果。有的使用过Qt Quick粒子系统的小伙伴可能会说,一个爆炸效果有什么好做的,几行代码就实现了。但是如果要完整呈现烟花的发射爆炸整个过程,其实还是要费点功夫的,下面先来看效果图。




一、首先实现发射效果

新建空的Qt Quick Application,完成后将main.qml文件内容更改如下:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Particles 2.12

Window {
    visible: true
    width: 800
    height: 530
    title: qsTr("Hello World")

    color: "black"

    ParticleSystem {
        id: particles
        anchors.fill: parent

        ImageParticle {
            groups: ["stage1"]
            source: "qrc:///particleresources/star.png"
            alphaVariation: 0.4
            colorVariation: 0.9
        }

        Emitter {
            id: burstEmitter
            x: 400 ; y: 480
            group: "stage1"
            emitRate: 1; lifeSpan: 1500;
            size: 50; endSize: 10; sizeVariation: 30
            acceleration: PointDirection {y: 100}
            velocity: AngleDirection{angle: 270; magnitude: 400; 
                               angleVariation: 40; magnitudeVariation: 50}
        }
    }
}


这里我们创建了一个ImageParticle,然后使用发射器在上方一个弧度里面发射粒子,这样确保烟花是向上发射的。下面是运行效果。



二、添加一个冒烟小尾巴

为了实现烟花发射过程中留下的烟雾轨迹,我们使用TrailEmitter来实现这种跟随效果。在ParticleSystem对象中继续添加如下代码:
ImageParticle {
    groups: ["stage2"]
    source: "qrc:///particleresources/glowdot.png"
    color: "#11111111"
}

TrailEmitter {
    group: "stage2"; follow: "stage1"
    emitRatePerParticle: 100; lifeSpan: 2400
    lifeSpanVariation: 400
    acceleration: PointDirection {y: -60 }
    velocity: AngleDirection{angle: 270; magnitude: 40;
        angleVariation: 22; magnitudeVariation: 5}
    size: 16; endSize: 0; sizeVariation: 8;
}

下面是运行效果:



三、实现爆炸效果


烟花发射到空中是需要爆开的,下面添加爆炸效果:
ImageParticle {
    id: imageParticle
    groups: ["stage3"]
    source: "qrc:///particleresources/star.png"
    alpha: 0
    colorVariation: 0.2
    entryEffect: ImageParticle.Scale
    rotation: 60
    rotationVariation: 30
    rotationVelocity: 45
    rotationVelocityVariation: 15
}

Emitter {
    id: burstEmitter2
    group: "stage3"
    emitRate: 4000; lifeSpan: 3000;
    size: 30; endSize: 5; sizeVariation:10
    enabled: false
    velocity: CumulativeDirection {
        AngleDirection {angleVariation: 360; magnitudeVariation: 80;}
        PointDirection {y: 20}
    }
    acceleration: PointDirection {y: 10 }
}


不过这样添加的代码并不能让它在对应的点位爆炸,我们还需要进行一下特殊的处理来获取前面粒子发射到空中的位置,继续添加下面的代码:
Affector {
    system: particles
    width: parent.width
    height: 10; y: 90
    once: true
    groups: "stage1"
    onAffectParticles: {
        for (var i=0; i<particles.length; i++) {
            burstEmitter2.burst(300, particles.x, particles.y);
            imageParticle.color = Qt.rgba(particles.red,
                                        particles.green,
                                        particles.blue,
                                        particles.alpha)
        }
    }
}


这里使用了Affector影响器来获取发射过来的粒子位置,然后在这个位置进行爆炸,这样就实现了我们想要的效果,看看下面的动图,其实黑色背景也挺漂亮的。



四、化腐朽变神奇

很多时候腐朽离神奇只差一张背景图,如果还是不行,就再加上一个音效。我们在根对象Window中,ParticleSystem对象定义前添加如下代码:
SoundEffect {
    id:playSound
    source: "qrc:/sound.wav"
}

Image {
    anchors.fill: parent
    source: "qrc:/back.jpg"
}

然后在Affector的for语句最后添加一行代码来播放音效:
playSound.play()

现在可以运行程序查看效果了。


结语

谨以此程序祝愿所有支持yafeilinux的小伙伴们春节快乐!







源码下载:




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
参与人数 1人气 +1 收起 理由
xiuwei + 1 很实用!

查看全部评分总评分 : 人气 +1

回复

使用道具 举报

累计签到:391 天
连续签到:1 天
2019-1-18 11:11:51 显示全部楼层
效果真好,优秀,可是回复为什么一定要大于30个字节?
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2019-1-18 21:51:55 显示全部楼层
Alphuae 发表于 2019-1-18 11:11
效果真好,优秀,可是回复为什么一定要大于30个字节?

防止灌水。
回复 支持 反对

使用道具 举报

累计签到:35 天
连续签到:1 天
2019-1-19 16:21:01 显示全部楼层
新手请教,编译环境 Qt 5.8,编译运行时会报:
QQmlApplicationEngine failed to load component
qrc:/main.qml:16 module "QtQuick" version 2.9 is not installed错误
回复 支持 反对

使用道具 举报

累计签到:1564 天
连续签到:1 天
2019-1-19 21:15:08 显示全部楼层
龙火 发表于 2019-1-19 16:21
新手请教,编译环境 Qt 5.8,编译运行时会报:
QQmlApplicationEngine failed to load component
qrc:/main ...

将 import QtQuick 2.9修改为2.8,或者更小
回复 支持 反对

使用道具 举报

累计签到:35 天
连续签到:1 天
2019-1-19 21:33:31 显示全部楼层
好的,已可以运行,谢谢!
回复 支持 反对

使用道具 举报

累计签到:4 天
连续签到:1 天
2019-5-5 11:07:50 显示全部楼层
爆炸效果Affector{}里面的for循环缺下标particles[i]
回复 支持 反对

使用道具 举报

累计签到:10 天
连续签到:1 天
2020-2-12 21:03:53 显示全部楼层
效果很好,可以加到我的小游戏里
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了