画像を光らせたい、暗くしたいときに使う、画像の加工(ブレンド)方法「加算」とか「乗算」とか

画像を光らせて点滅させてください

今日、「画像を光らせて点滅させてほしい」と言われて実装していたら、

デザイナーとチャット越しで

 デザイナ：ベースの画像の上に光の画像をのっけてください

 ぼく　　：はーい

 デザイナ：加算でおねがいできます？

 ぼく　　：ん？乗っけてますよ？

 デザイナ：・・・

 ぼく　　：(あれ、加算ってなんかそういう用語？)

 ぼく　　：(隣のパイセンに) 加算ってどういう意味ですか？

 パイセン：Photoshopとかで、２つのレイヤーを合成するときの合成(ブレンド)方式だよ

 ぼく　　：！！！

てなやりとりがあって勉強になったのでまとめます。

加算ってなに？

単純に2つの色を足してるだけ。カラーコードでいえば

#FF0000 + #00FF00 = #FFFF00

これだけ。画像で下記例を見るとわかりやすいです。

加工前

単純に上からかぶせた場合 (不透明度100%)

加算の場合

画像の引用元：Adobe Photoshop * 描画モード

加算だと、かなり明るくなりましたね！

「明るくしたいときは加算」とざっくり覚えておきましょう。

 Unityでの実装例

ぼくはNGUIを使っていたので、ベース画像はそのままUISpriteで配置して、

光らせ用画像を、UITextureで参照しつつShaderでAdditiveなものを使うだけでよいです。

「Particles/Additive」とか、「Particles/Additive (Soft)」とか、デフォルトでShaderがあるようです。 

SpriteRendererの例はこちらを見るとよさそうです。

qiita.com

ポイントは、「"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でした)