読者です 読者をやめる 読者になる 読者になる

mikan_daisuki’s blog

IT系サラリーマンの日記。前職ではスマホゲームを、現在はアプリを作ってます。



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

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

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

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

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

 ぼく  :はーい

 デザイナ:加算でおねがいできます?

 ぼく  :ん?乗っけてますよ?

 デザイナ:・・・

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

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

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

 ぼく  :!!!

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

加算ってなに?

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

#FF0000 + #00FF00 = #FFFF00

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

加工前

https://helpx.adobe.com/jp/photoshop/using/images/pa_22.png

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

https://helpx.adobe.com/jp/photoshop/using/images/pa_22a.png

加算の場合

https://helpx.adobe.com/jp/photoshop/using/images/pa_22m.png

画像の引用元: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ページの例でも暗くなっています。

加工前

https://helpx.adobe.com/jp/photoshop/using/images/pa_22.png

乗算

https://helpx.adobe.com/jp/photoshop/using/images/pa_22g.png

画像の引用元: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

見た目は、以下のようになります。

加工前

https://helpx.adobe.com/jp/photoshop/using/images/pa_22.png

スクリーン

https://helpx.adobe.com/jp/photoshop/using/images/pa_22k.png

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

加算と比べると、少しまろやかになります。

最初は、「加算よりも、少し明るさがまろやかになる」とだけ覚えておけばいいと思います。

スクリーンもデフォルトでShaderなし

自力で実装(ry

書いたらアップします。

まとめ

  • 画像を明るくしたいときは加算かスクリーン、暗くしたいときは乗算を思い出そう
  • Unityでデフォルトで使えるシェーダーは加算のみ (自分の環境はUnity4.6でした)