Posted at

iOSアプリで紙吹雪を降らして画面を賑やかにする

More than 1 year has passed since last update.

ゲームアプリ以外でも、ユーザーを褒めたいタイミング等で、演出を加えて画面を賑やかにしたい時があると思います。

SceneKitのパーティクルを使えば、UIView上に手軽に紙吹雪を降らしてお祝い感を演出できます。


教育アプリで100点をとった時にお祝い感を出したい場合

demo.gif


方法


IBでSCNViewを追加

1. InterfaceBuilderで作った画面の上に透明のViewを重ねます。

スクリーンショット 2017-09-27 22.23.18.png

2. そのViewのClassをSCNViewにします。

スクリーンショット 2017-09-27 22.23.36.png

3. SCNViewをコードに紐付けます。


ViewController.swift

import UIKit

import SceneKit

class ViewController: UIViewController {

@IBOutlet weak var confettiView: SCNView!
}



パーティクルファイルをプロジェクトに追加

1. ⌘Nでファイル追加画面を開き、SceneKit Particle System Fileを選択します。

2.png

2. TemplateはConfetti(紙吹雪)を選択します。

3.png

3. 名前をつけて保存すると、scnpファイルとpngファイルが作成されます。


紙吹雪の量などを微調整

1. scnpファイルを選択し、右ペインで量などを調整します。

スクリーンショット 2017-09-27 22.34.21.png

他のパーティクルだとプレビューが表示されるのですが、Confettiだとなぜかプレビューが表示されません..


SCNSceneをコードで追加

後はSCNSceneをコードで設定して、いっちょ上がりです。


ViewController.swift

import UIKit

import SceneKit

class ViewController: UIViewController {

@IBOutlet weak var confettiView: SCNView!

override func viewDidLoad() {
super.viewDidLoad()

throwConfetti()
}

private func throwConfetti() {
let scene = SCNScene()

let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.position = SCNVector3(x: 0, y: -6, z: 10)
scene.rootNode.addChildNode(cameraNode)

let confetti = SCNParticleSystem(named: "Confetti.scnp", inDirectory: "")!
scene.rootNode.addParticleSystem(confetti)

confettiView.scene = scene
confettiView.backgroundColor = UIColor.clear
confettiView.autoenablesDefaultLighting = true
confettiView.isUserInteractionEnabled = false
}
}