利用 SpriteKit Particle File 製造下雪的粒子效果

SpriteKit 是專門製作 2D 遊戲畫面的 framework，它不只可以用來開發遊戲，我們也可以搭配它的 SpriteKit Particle File，在一般的 iOS App 裡加入生動的下雪，火焰等粒子效果呢。

建立製造粒子效果的 SpriteKit Particle File

• File > New > File。

• 選擇 SpriteKit Particle File。

• 選擇粒子效果。

有許多效果可選擇，比方下雪，下雨，火焰等，在此我們選擇 Snow。

• 設定檔名。

才幾秒鐘的時間，我們已經擁有顯示著生動下雪效果的 MySnowParticle.sks。

不喜歡預設的下雪效果嗎 ? 沒關係，我們可以從右邊的 Attributes inspector 客製化。

比方 Texture 欄位控制粒子的圖案，我們將它改成 boken 呈現另一種下雪效果。

粒子的圖片和 iOS App 其它圖片一樣，都是來自 Assets，而 spark & boken 是我們產生下雪的 SpriteKit Particle File 時 Xcode 幫我們加入的。

我們也可以另外加入粒子的圖片，比方讓下雪變成下 spider，讓滿滿的 spider 拯救世界。

將 SpriteKit Particle File 產生的粒子效果加到 app 畫面

接著就讓我們將剛剛 MySnowParticle.sks 產生的滿滿 spider 加到畫面上吧。

• 加入 SpriteKit framework

我們必須利用 SpriteKit 的 API 加入 SpriteKit Particle File 產生的粒子效果 ，因此請在 controller 的 swift 檔裡 import SpriteKit。

import SpriteKit

• 在 controller 的 function viewDidLoad 加入以下程式。

override func viewDidLoad() {
   super.viewDidLoad()
   let skView = SKView(frame: view.frame)
   view.insertSubview(skView, at: 0)
   let scene = SKScene(size: skView.frame.size)
   scene.anchorPoint = CGPoint(x: 0.5, y: 1)
   let emitterNode = SKEmitterNode(fileNamed: "MySnowParticle")
   scene.addChild(emitterNode!)
   skView.presentScene(scene)
}

說明

let skView = SKView(frame: view.frame)
view.insertSubview(skView, at: 0)

不同於 UIKit，SpriteKit 顯示的畫面呈現在 SKView 型別的 view 裡，因此我們先產生 SKView 物件，然後利用 insertSubview 將它加到畫面的底層，讓它成為背景。

SKView - SpriteKit | Apple Developer Documentation

let scene = SKScene(size: skView.frame.size)
skView.presentScene(scene)

SKView 顯示的內容由 SKScene 控制，因此我們產生 SKScene，然後從 skView 呼叫 presentScene 顯示 SKScene 的內容。

SKScene - SpriteKit | Apple Developer Documentation

let emitterNode = SKEmitterNode(fileNamed: "MySnowParticle")
scene.addChild(emitterNode!)

SKEmitterNode 專門呈現粒子效果。我們在產生 SKEmitterNode 時傳入 SpriteKit Particle File 的檔名，產生製造下雪效果的 SKEmitterNode，然從再從 scene 呼叫 addChild 加入SKEmitterNode，讓 scene 顯示下雪的粒子效果。

scene.anchorPoint = CGPoint(x: 0.5, y: 1)

SKScene 的 anchorPoint 控制 scene 內容呈現的位置，它的型別是 CGPoint，畫面的左下角為 (0, 0)，右上角為 (1, 1)。

比方以下為 anchorPoint 設為畫面中心點 CGPoint(x: 0.5, y: 0.5) 呈現的效果。

上圖的上半部都沒有蜘蛛，這世上的壞人太多，需要多一點蜘蛛，因此我們改成CGPoint(x: 0.5, y: 1)，將 anchorPoint 設在畫面上邊界的中心。如下圖所示，現在畫面上滿滿都是蜘蛛，終於可以把壞人一網打盡了。

SKScene 的背景顏色

SKScene 預設的背景顏色接近黑色，可設定它的 backgroundColor 改變顏色。

backgroundColor

控制是否發射粒子

若想手動控制是否發射粒子，可從程式修改 SKEmitterNode 的 particleBirthRate，設為 0 時將停止發射。

@IBAction func tap(_ sender: Any) {
        if emitterNode?.particleBirthRate == 0 {
            emitterNode?.particleBirthRate = 150
        } else {
            emitterNode?.particleBirthRate = 0
        }
}

作品集

Merry Christmas Tree

利用 viewDidLoad 客製 App 畫面

#39 用 SpriteKit Particle File 製作動畫效果