【Swift】SpriteKitの使い方。SKEffectNodeを使って画像をぼかす。(Swift 2.2、XCode 7.3)

2016年9月25日2020年6月16日

SKEffectNodeとは

本記事ではSKEffectNode（以下、エフェクトノード）について説明する。

エフェクトノードとは、画像にぼかし、歪み、カラー調整などの様々なフィルタをかけられるノードである。

エフェクトノードを使ってみる

実際にエフェクトノードを使って画像に効果を加えてみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」

事前準備では、鳥と2匹の猿をシーンに配置しておいた。エフェクトノードを使って片方の猿に効果を与えて比較する。

TestScene.swiftを以下のコードに変更する。エフェクトノードはシーンエディタの部品一覧に無いのでソースコードで実装する必要がある(Xcode 7.3)。なので、検証ではシーンに配置するノードはすべてソースコードから追加している。

エフェクトノードにブラー効果のフィルタを設定して、片方の猿ノードをぼかすようにした。

//
//  TestScene.swift
//

import Foundation
import SpriteKit

class TestScene:SKScene {
    
    //現在シーン設定時の呼び出しメソッド
    override func didMoveToView(view: SKView) {
        
        //シーンに配置するノードを作成する。
        let background = SKSpriteNode(imageNamed: "field")
        let monkey1 = SKSpriteNode(imageNamed: "monkey")
        let monkey2 = SKSpriteNode(imageNamed: "monkey")
        let bird = SKSpriteNode(imageNamed: "bird_brown")
       
        //ノードの座標を指定する。
        background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))
        monkey1.position =  CGPoint(x: self.frame.width*1/3, y: self.frame.height/2)
        monkey2.position =  CGPoint(x: self.frame.width*2/3, y: self.frame.height/2)
        bird.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*4/5)

        //ノードをシーンに配置する。
        self.addChild(background)
        self.addChild(monkey1)
        self.addChild(bird)

        //エフェクトノードを作成する。
        let effect = SKEffectNode()
        
        //エフェクトノードの位置を設定する。
        effect.position = CGPoint(x: 0, y: 0)
        
        //フィルタを設定する。
        effect.filter = CIFilter(name: "CIBoxBlur")
        
        //エフェクトノードの子に猿を追加する。
        effect.addChild(monkey2)

        //エフェクトノードをシーンんに配置する。
        self.addChild(effect)
    }
}

// TestScene.swift

import Foundation

import SpriteKit

class TestScene:SKScene {

//現在シーン設定時の呼び出しメソッド

override func didMoveToView(view: SKView) {

//シーンに配置するノードを作成する。

let background = SKSpriteNode(imageNamed: "field")

let monkey1 = SKSpriteNode(imageNamed: "monkey")

let monkey2 = SKSpriteNode(imageNamed: "monkey")

let bird = SKSpriteNode(imageNamed: "bird_brown")

//ノードの座標を指定する。

background.position = CGPoint(x: CGRectGetMidX(self.frame), y: CGRectGetMidY(self.frame))

monkey1.position = CGPoint(x: self.frame.width*1/3, y: self.frame.height/2)

monkey2.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height/2)

bird.position = CGPoint(x: self.frame.width*2/3, y: self.frame.height*4/5)

//ノードをシーンに配置する。

self.addChild(background)

self.addChild(monkey1)

self.addChild(bird)

//エフェクトノードを作成する。

let effect = SKEffectNode()

//エフェクトノードの位置を設定する。

effect.position = CGPoint(x: 0, y: 0)

//フィルタを設定する。

effect.filter = CIFilter(name: "CIBoxBlur")

//エフェクトノードの子に猿を追加する。

effect.addChild(monkey2)

//エフェクトノードをシーンんに配置する。

self.addChild(effect)

}

以下は実行結果。にじんだようにぼやけた。

フィルタを作成するときの引数で効果の度合いを指定できる。以下のコードはinputRadiusに4.5を指定した場合（デフォルトは10.0）

//フィルタを設定する。
effect.filter = CIFilter(name: "CIBoxBlur", withInputParameters: ["inputRadius":4.5])

//フィルタを設定する。

effect.filter = CIFilter(name: "CIBoxBlur", withInputParameters: ["inputRadius":4.5])

くもり具合が弱くなった。

以下のコードのようにフィルタを作ったあとに設定してもいい。

//フィルタを設定する。
let filter = CIFilter(name: "CIBoxBlur")
filter!.setValue(4.5, forKey: "inputRadius")
effect.filter = filter

//フィルタを設定する。

let filter = CIFilter(name: "CIBoxBlur")

filter!.setValue(4.5, forKey: "inputRadius")

effect.filter = filter

フィルタの種類

フィルタには色々な種類がある。ぼかし関係のフィルタを使うとどのように画像が変化するのか1つずつ説明する。仕様の詳細は公式リファレンスを参照されたし。⇒「Core Image Filter」

CIDiscBlur

明るくくもった。

CIGaussianBlur

ガウスぼかしのフィルタ。ガウスぼかしとは、範囲内にある画素の平均値を使ってぼかす方法である。範囲（inputRadius）を広げるほどぼかしが強くなる。

CIMaskedVariableBlur

ぼかす場所を画像で指定できるフィルタ。以下の2枚の画像を使って2匹の猿をぼかしてみよう。左の画像は左の猿に、右の画像は右の猿に適用する。

フィルタの設定は以下のコードのようにする。

//フィルタを設定する。
let filter = CIFilter(name: "CIMaskedVariableBlur")
filter!.setValue(CIImage(image: UIImage(named:"white_black")!), forKey: "inputMask")
effect.filter = filter

//フィルタを設定する。

let filter = CIFilter(name: "CIMaskedVariableBlur")