【Swift】SpriteKitの使い方。SKEffectNodeで画像にフィルタをかける(Swift 3.0、XCode 8.0)

2020年6月16日

SKEffectNodeの続き

前回の記事でSKEffectNode(以下、エフェクトノード)を使って、画像をぼかす方法とフィルタの種類について説明した。⇒「記事

本記事はその続きで、画像の色を変更するフィルタの変化を確認する。

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

 

以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト

なお、本記事からXCodeはVer8.0、SwiftはVer3.0を使って検証を行う。事前準備では、鳥と2匹の猿をシーンに配置しておいた。エフェクトノードを使って片方の猿に効果を与えて比較する。

テスト開始前

 

CIColorClamp

描画色の範囲(最小値、最大値)を赤、緑、青、アルファで指定するフィルタ。

猿を赤っぽくしてみよう。TestScene.swiftを以下のコードに変更する。

 

以下は実行結果
SKEffectNode ColorClamp

 

CIVectorのXは赤色、Yは緑色、Zは青色、Wはアルファを表している。例えば、黄色っぽく半透明にしたい場合は以下のコードのようにする。

 

以下は実行結果
画像を黄色っぽく、半透明にした

CIColorControls

彩度、明るさ、コントラストの値を調整するフィルタ。

SKEffectNode「CIColorControl」

 

CIColorMatrix

赤、緑、青、アルファごとに用意されたベクターを元の画像に加えて、特定の色を強くしたり、弱くしたりする。

以下のコードはデフォルトの設定値なので画像の色は変化しない。

 

赤ベクトルのxを0にするとどうなるか。

 

赤っぽさが無くなって緑っぽい画像になった。ちなみに、黄色はRGB(赤緑青)のRとGを使って表現される。黄色に近い猿の顔から赤色が無くなることで、緑色の顔になった。

SKFieldNode「CIColorMatrix」

 

逆に赤ベクトルのxを2倍にするとどうなるか。

赤が強くなってオレンジモンキーになった。

SKEffectNode CIColorMatrix Red 2.0

 

CIColorPolynomial

三次多項式で色が変更されるらしい。何かややこしい話になってきたぞ。

以下のコードはデフォルトの設定値なので画像の色は変化しない。

 

公式リファレンスの例と同じ値を設定してみよう。

 

実行結果
SKEffectNode「CIColorPolynomial」

 

CIExposureAdjust

露出値(EV値)を設定するフィルタ。露出とは、簡単にいうと光を当てて感光させることをいう。EV値を高くして暗いシーンを明るくしたり、逆にEV値を低くして明るすぎるシーンを暗くしたりするのに使われる。

露光値をデフォルトの2倍にしてみよう。

 

実行結果。まぶしいくらいに光が当たっているように見える。

SKEffectNode「CIExposureAdjust」

CIGammaAdjust

中間調の強さを設定するフィルタ。中間調とは、明るい色と暗い色の中間の明るさのことをいう。

中間調の強さをデフォルトの倍にしてみよう。

 

暗い感じになった。

SKEffectNode「CIGammaAdjust」

 

CIHueAdjust

全体的に色合いを変更するフィルタ。

SKEffectNode「CIHueAdjust」

 

設定値を増加させていくと色合いはループする。以下の動画は設定値を0.1ずつ増加させながらフィルタを設定した実行結果

 

CILinearToSRGBToneCurve

ガンマカーブからsRGB色空間に向かった変換で色の強さを変換するフィルタ。

 

黒い部分を除いて、全体的に色が明るくなった。

SKEffectNode「CILinearToSRGBToneCurve」

 

CISRGBToneCurveToLinear

上のフィルタとは逆に、sRGB色空間からガンマカーブに向かった変換で色の強さを変換するフィルタ。

 

全体的に色が暗くなった。CILinearToSRGBToneCurveとは逆の効果だ。

SKEffectNode「CISRGBToneCurveToLinear」

 

CITemperatureAndTint

色温度と色合いを設定するフィルタ。色温度とは、暖かい色(オレンジ系)、冷たい色(青色系)などを表すための尺度のことで、単位はケルビン(K)で表される。

デフォルトは昼光色の6500Kである。ちなみに、電球色(暖色)は3000K。

 

ピンとこないので、inputTargetNeutralのXを0から1フレームごとに50づつ加算してみた。

以下が実際のプレイ動画。3000Kでオレンジ色になり、そして徐々に青白い色に変化していった。

 

以下の動画は、inputTargetNeutralのYを0から1フレームごとに5ずつ加算した実行結果。徐々に黄緑色になり最後は急に真っ黒になった。

 

CIToneCurve

トーンカーブを使って色合いやカラーを調整するためのフィルタ。

以下のコードはデフォルトの設定。

 

トーンカーブとは、補正前(X軸)と補正後(Y軸)の照度レベルの違いをグラフで表したもので、補正前後で何も変わらない場合は、下図のように右斜め45度のグラフで表される。

補正前が0.3なら補正後も0.3、補正前が0.7なら補正後も0.7、つまり何も変わらないということだ。

トーンカーブ

 

トーンカーブを下図のようにしたらどうなるか。補正前が0なら補正後は1.0、補正前が0.7なら補正後は0.3。。つまり、色が逆転することになる。

トーンカーブを反転する

実際にやってみよう。フィルタを以下のコードに変更する。

 

以下は実行結果。色が反転した。

トーンカーブで色を反転させる例

 

CIVibrance

肌のトーンを維持しながら、画像の彩度を調整するフィルタ。

SKEffectNode「CIVibrance」

 

CIWhitePointAdjust

基準白色点を変更するフィルタ。以下は赤を設定したコード。

SKEffectNode「CIWhitePointAdjust」