募集要項

  • ■ボイスの募集は終了しました。

    非常に沢山のご応募ありがとうございました!

     結果はこちら
2017年6月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

« 【雑記】早速脱線した…(アナザーエデン) | トップページ | 【雑記】作業経過とシノアリス »

2017年6月 5日 (月)

【Unity Tips】簡単な汎用UIシェーダー例(色相/彩度/明度)

結局先月はほとんど動けませんでした。申し訳ありません…;;
今日からは時間が取れるようにしたので
本格的に作業復帰です。

と、言うだけではアレなので、
最近作った簡単で便利なUI向けのシェーダーの紹介。

 

このシェーダーでは、
uGUIのImageのカラー情報を参照して
「R成分で色相」(元の色を基準に色相変更)
「G成分で彩度」(白黒~彩度2倍)
「B成分で明度」(暗転~明るさ2倍)

をコントロールできるようにしています。

これによって何が便利かというと、
ボタンを例にした場合

 ・ボタンの色替えが1つの素材で可能(別の意味合いのボタン等)
 ・ボタンのグレーアウトが可能(非選択状態等)
 ・ボタンの押下アクションに便利(明るくしたり暗くしたり)


といった具合に、元となる画像が1つあれば、
複数のリソースを持つ必要が無くなるという点です。
メモリに優しいですね。

また、通常の上から色を載せる形ではないので、
グレースケールで色を載せるよりは良い場合も多いです。

さて、作り方に関してですが、
ShaderForge(Assets)を使っています。
便利な事に、基本的なノードで操作できるパラメータなので、
繋ぎ方もシンプルです。

Photo_2

注意点は、彩度はDesaturateで変更している点でしょうか。
RGB変換時のノードの方で彩度調整をやってしまうと、
モノクロ時に綺麗に出てくれません。
※この辺りの詳細は、画像のモノクロ化の手法について
 ググると良い感じかと思います。


そして、シェーダーをマテリアルに適応して、
uGUIのImageのMaterialに付ければ完成です。

他にもコントラストや追加効果を当てはめたりする等、
様々な事が出来るので、色々便利です。

« 【雑記】早速脱線した…(アナザーエデン) | トップページ | 【雑記】作業経過とシノアリス »

Unity Tips」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1500357/70771811

この記事へのトラックバック一覧です: 【Unity Tips】簡単な汎用UIシェーダー例(色相/彩度/明度):

« 【雑記】早速脱線した…(アナザーエデン) | トップページ | 【雑記】作業経過とシノアリス »

Twitter等

  • にほんブログ村 ゲームブログ ゲーム制作へ

メールフォーム

  • 直接コンタクト取りたい方はこちらからどうぞ

サイト内検索
ココログ最強検索 by 暴想