[Swift] SpriteKit SKEffectNodeで画像をぼかす(ブラー効果) | はじはじアプリ体験記

SpriteKit
【Swift】SpriteKitの使い方。SKEffectNodeを使って画像をぼかす。

  • 2016年9月25日
    Swift 2.2で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

SKEffectNodeとは

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

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

エフェクトノードで色合いを変更した例

 

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

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

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

テスト開始前

 

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

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

 

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

SKEffectNode「CLBoxBlur」

 

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

 

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

SKEffectNode「CLBoxBlur」

 

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

スポンサーリンク

フィルタの種類

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

 

CIDiscBlur

明るくくもった。

CIDiscBlur

 

CIGaussianBlur

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

SKEffectNode「CIGaussianBlur」

 

CIMaskedVariableBlur

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

白、黒 透明、灰色

 

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

 

白が最もぼかしが強くなり、黒に近づくにつれぼかしが弱くなる。黒と透明はぼかされないことが分かる。

SKEffectNode「MaskVariable」

 

CIMedianFilter

隣接するピクセルの中央値で各画素を置き換えるフィルタ。検証用の画像だと変化がよくわからない。

SKEffectNode「CIMedianFilter」

 

CIMotionBlur

高速で動いたかのようにぼやけるフィルタ。

SKEffectNode「MotionBlur」

 

CINoiseReduction

ノイズを削減するフィルタ。以下はノイズレベルを1.0に設定した場合

SKEffectNode「CINoiseReduction」

 

CIZoomBlur

ズームしているようにぼやけるフィルタ。

SKEffectNode「CIZoomBlur」

 

ちなみに、SpriteKitの機能では無いが、曇りガラスを置いたように背後のものをぼかす部品にUIBlurEffectというものがある。⇒「UIBlurEffectとは

Swift記事一覧へ

コメントを残す

お名前