画像を光らせたい、暗くしたいときに使う、画像の加工(ブレンド)方法「加算」とか「乗算」とか
画像を光らせて点滅させてください
今日、「画像を光らせて点滅させてほしい」と言われて実装していたら、
デザイナーとチャット越しで
デザイナ:ベースの画像の上に光の画像をのっけてください
ぼく :はーい
デザイナ:加算でおねがいできます?
ぼく :ん?乗っけてますよ?
デザイナ:・・・
ぼく :(あれ、加算ってなんかそういう用語?)
ぼく :(隣のパイセンに) 加算ってどういう意味ですか?
パイセン:Photoshopとかで、2つのレイヤーを合成するときの合成(ブレンド)方式だよ
ぼく :!!!
てなやりとりがあって勉強になったのでまとめます。
加算ってなに?
単純に2つの色を足してるだけ。カラーコードでいえば
#FF0000 + #00FF00 = #FFFF00
これだけ。画像で下記例を見るとわかりやすいです。
加工前
単純に上からかぶせた場合 (不透明度100%)
加算の場合
画像の引用元:Adobe Photoshop * 描画モード
加算だと、かなり明るくなりましたね!
「明るくしたいときは加算」とざっくり覚えておきましょう。
Unityでの実装例
ぼくはNGUIを使っていたので、ベース画像はそのままUISpriteで配置して、
光らせ用画像を、UITextureで参照しつつShaderでAdditiveなものを使うだけでよいです。
「Particles/Additive」とか、「Particles/Additive (Soft)」とか、デフォルトでShaderがあるようです。
SpriteRendererの例はこちらを見るとよさそうです。
ポイントは、「"Particles/Additive"などの、AdditiveなShaderを使う」ですね。
他にもあるの?
ぼく :「他にもそういうやつあるんですかね?似たようなやつ。」
パイセン:「乗算とか、スクリーンとか、うんぬん」
ぼく : ほほぉ・・・!
ということで、他のものも簡単にまとめます
乗算ってなに?
色をかけ算するだけ。また、カラーコードで考えると、
#CC0000 × #CC0000 = RGB(204/255, 0/255, 0/255)^2 ≒ #A30000
と、少し暗くなります。
同様に、Photoshopページの例でも暗くなっています。
加工前
乗算
画像の引用元:Adobe Photoshop * 描画モード
Unityでの乗算の実装は・・・
残念ながら、デフォルトのShaderはなさそうです。少なくとも私には見つかりませんでした。
自力でシェーダーを書く必要があります。
※ 申し訳ありませんが、筆者は2015年4月4日現在シェーダーを書いたことがありません。
じゃあスクリーンって何?
乗算で暗くなるのを、逆に明るくするロジックです。
計算方法は少し難しくなります。
RGB(1,1,1) - (RGB(1,1,1) - RBG(r,g,b)) * (RGB(1,1,1) - RBG(r',g',b'))
こんなかんじなのですが、なんとなくわかりつつよくわかりませんねw
見た目は、以下のようになります。
加工前
スクリーン
画像の引用元:Adobe Photoshop * 描画モード
加算と比べると、少しまろやかになります。
最初は、「加算よりも、少し明るさがまろやかになる」とだけ覚えておけばいいと思います。
スクリーンもデフォルトでShaderなし
自力で実装(ry
書いたらアップします。
まとめ
- 画像を明るくしたいときは加算かスクリーン、暗くしたいときは乗算を思い出そう
- Unityでデフォルトで使えるシェーダーは加算のみ (自分の環境はUnity4.6でした)