Qt Quick 粒子系統詳解

Qt Quick 粒子系統是用于創建動態視覺特效（如爆炸、火焰、煙霧等）的模塊，基于 QML 聲明式語法實現高性能粒子渲染。其核心原理是通過發射器生成粒子，由影響器修改粒子行為，最終通過繪制器渲染到場景中。粒子系統主要由四大核心組件構成：

• ParticleSystem - 管理所有粒子
• 渲染器 - 控制粒子如何顯示
• 發射器 - 控制粒子如何產生
• 影響器 - 控制粒子行為變化

一、核心組件

1. 粒子系統 (ParticleSystem)
   管理全局粒子組，協調所有組件的時間線。每個粒子系統獨立運行，需顯式聲明：

   ParticleSystem {id: sysrunning: true // 控制啟停
   }
   

2. 發射器 (Emitter)
   定義粒子生成規則：

   • 位置：emitRate（每秒粒子數）、lifeSpan（生命周期）
   • 運動：velocity（初始速度）、acceleration（加速度）
   • 方向：angle（發射角度）、angleVariation（角度隨機性）
     示例：

   Emitter {system: sysemitRate: 100lifeSpan: 2000 // 單位毫秒velocity: AngleDirection { angle: 45; magnitude: 150 }
   }
   

3. 繪制器 (ParticlePainter)
   控制粒子可視化形態：

   • ImageParticle：紋理貼圖

     ImageParticle {source: "particle.png"color: "#FF5733"alpha: 0.8
     }
     

   • ItemParticle：使用 QML 組件作為粒子
   • CustomParticle：自定義 GLSL 著色器

4. 影響器 (Affector)
   動態修改粒子屬性：

   Gravity {system: sysmagnitude: 500    // 重力強度angle: 90         // 向下
   }
   

   其他影響器包括：

   • Friction（摩擦力）
   • Attractor（吸引/排斥）
   • Turbulence（湍流）

---

二、粒子運動數學模型

粒子行為遵循牛頓力學：

1. 速度更新（含加速度影響）：
   $$\vec{v}(t)=\overrightarrow{v_0}+\vec{a}?t$$
2. 位移計算：
   $$\vec{s}(t)=\overrightarrow{s_0}+\overrightarrow{v_0}?t+\frac{1}{2}\vec{a}?t^2$$
   其中：
   • $\overrightarrow{v_0}$ 為初始速度
   • $\vec{a}$ 為加速度（如重力）
   • $t$ 為粒子存活時間

---

三、基本粒子系統結構

import QtQuick 2.15
import QtQuick.Particles 2.15Item {width: 400height: 400// 1. 粒子系統（必須）ParticleSystem {id: particleSystem}// 2. 發射器Emitter {system: particleSystem// 發射器配置...}// 3. 渲染器ImageParticle {system: particleSystem// 渲染器配置...}// 4. 影響器（可選）Wander {system: particleSystem// 影響器配置...}
}

四、完整示例

1、火焰效果

ParticleSystem {id: fireSystem
}Emitter {id: fireEmittersystem: fireSystemanchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenterwidth: 40; height: 40emitRate: 100       // 每秒發射粒子數lifeSpan: 2000      // 粒子生命周期(ms)size: 24           // 粒子大小sizeVariation: 8    // 大小變化范圍velocity: AngleDirection {angle: 270      // 向上發射angleVariation: 45magnitude: 120  // 速度}acceleration: PointDirection {y: -40          // 向上加速度}
}ImageParticle {system: fireSystemsource: "qrc:/particle.png"color: "#ffa000"colorVariation: 0.4alpha: 0.1
}

2、雪花飄落效果

ParticleSystem {id: snowSystem
}Emitter {system: snowSystemanchors.top: parent.topwidth: parent.widthheight: 1emitRate: 20lifeSpan: 10000size: 16sizeVariation: 8velocity: AngleDirection {angle: 90angleVariation: 30magnitude: 50}acceleration: PointDirection {y: 20xVariation: 10}
}ImageParticle {system: snowSystemsource: "qrc:/snowflake.png"color: "white"alpha: 0.8rotationVariation: 180rotationVelocity: 30entryEffect: ImageParticle.Scale
}

3、煙花爆炸效果

ParticleSystem {id: fireworks
}Emitter {id: rocketEmittersystem: fireworksemitRate: 0.5       // 每2秒發射一個火箭lifeSpan: 2000size: 8velocity: AngleDirection {angle: 270magnitude: 300}onEmitParticles: {explosionEmitter.burst(100, rocketEmitter.particleX(particle), rocketEmitter.particleY(particle))}
}Emitter {id: explosionEmittersystem: fireworksenabled: false      // 手動觸發lifeSpan: 1200lifeSpanVariation: 400size: 16sizeVariation: 8velocity: AngleDirection {angle: 0angleVariation: 360magnitude: 150magnitudeVariation: 50}acceleration: PointDirection {y: 80}
}ImageParticle {system: fireworkssource: "qrc:/sparkle.png"colorVariation: 0.6alpha: 0.6rotationVariation: 180
}

---

五、性能優化技巧

1. 粒子數量控制：

   • 優先降低 emitRate 而非 lifeSpan
   • 使用 ParticleGroup 分組管理

2. 渲染優化：

   • 紋理尺寸 ≤ 64x64 像素
   • 避免透明通道過度混合

3. 動態啟停：

   Emitter {enabled: animation.running // 隨動畫啟停
   }
   

4. 使用簡單粒子圖像：

   ImageParticle {source: "qrc:/simple_circle.png"  // 小尺寸簡單圖形
   }
   

5. 適時暫停系統：

   ParticleSystem {id: sysrunning: visible  // 不可見時暫停
   }
   

注意：粒子系統默認使用 OpenGL 渲染后端，需確保環境支持 QSG_RENDERER_DEBUG=1 可輸出場景圖調試信息。

六、實例展示

import QtQuick
import QtQuick.Particles
import QtQuick.ControlsWindow {width: 800height: 600visible: truetitle: qsTr("Hello World")color: "black"ParticleSystem {id: snowSystem}Emitter {system: snowSystemanchors.top: parent.topwidth: parent.widthheight: 1emitRate: 20lifeSpan: 10000size: 16sizeVariation: 8velocity: AngleDirection {angle: 90angleVariation: 30magnitude: 50}acceleration: PointDirection {y: 20xVariation: 10}}ImageParticle {system: snowSystemsource: "qrc:/image/image/snowpng.png"color: "white"alpha: 0.8rotationVariation: 180rotationVelocity: 30entryEffect: ImageParticle.Scale}}