【Irisy Aqua】水面シェーダ３【アイアク】

どうも一週間ぶりです。
Otorakoboです。

今回も水面シェーダの続きです。
少し進展があったので、書き留めておこうと思います。

ヒントになったのは一度物理現象に立ち返って考えたことです。
水面を構成する物理現象を一度考えてシェーダを用意し、その後でデフォルメしていきました。

なので、まず水面のみなもをそれっぽくするNormalマップを展開。
そのスペキュラの発光部分にのみ色を付けて見ました。
それが↓

ただ、Normalマップは光の角度、カメラ角度で大きく発光度合が変化するので制御しづらくもありました。

そこで、どうせ部分的な発光にするのなら、スペキュラマップで色をマスクし、ライトマップテクスチャをUVスクロールすることで屈折を表現すれば処理も軽くなってハッピーになると考えて

こんな感じになりました。

おおよそまとまってきたので、ゲーム画面へドッキングしたのですが、マップの動的生成と輪郭テクスチャの合成がすこぶる相性が悪かったため、輪郭をテクスチャからエッジ抽出シェーダに変更しました。

それがこちら

それっぽくなってきたんですが…
フラット感やら直線ベースのところがクォリティに達しておらず、この作戦自体がちょっと微妙ではないかと指摘を受けてしまいましたorz

ただ、色の境界面はばっちりなので、境界線と水面を別で計算するとか、この上にエフェクトを載せて環境マップを適用するとかそういう方向で攻めようかとアートとお話していました。

とまぁ、今週はここまで。
来週は水面の続きか、もしくはキャラクタのモデル紹介のどちらかができると良いと思っています。
それでは！

【Irisy Aqua】続・水面シェーダ【アイアク】

どうも、一週間ぶりです。
Otorakoboです。

あまり進展は無いですが、引き続きマップ関連のシェーダについてです。

一つ、ヒントになったのはエフェクトの輝度なども考慮したほうが良さそうという事でした。

エフェクトやキャラクタを映えさせるために背景の輝度は
落とした方が良さそうとアドバイスを受け、アルファの値を50％くらいまで落としました。
また、高さフォグも入れて、全体的に暗めな印象にしてみました

また、別画面でエフェクトとキャラクタを合わせて表示してみました

確かに、エフェクトの主張が弱いのもありますが、背景が目立ちすぎている印象です。
背景の輝度を落とすと少しディティールに不安が残るので、張り付けるテクスチャのパターンを調整するなどで対応する方がリッチに作れそうなイメージはしてきました。

来週はそのあたりの調整をさらに詰めていければと思います。
それでは！

【Irisy Aqua】絶賛迷っているマップシェーダ【アイアク】

どうも、1週間ぶりです。
Otorakoboです。

今回はマップシェーダについてのお話です。

とはいっても、絶賛迷いに迷っていて水面表現とRGBの表現をどうすれば見やすく、カッコ良くできるかと、あーでもない。こーどもないとかしています…

現状の画面が↓

で、さすがに四角形のタイルだと水面には絶対に見えないので、タイルに乱数を持たせました。

それが↓

色が変化する境界面が光るというお話なので、テクスチャを張り付けてエッジに色が付くようにしつつ、ポリゴンをかなり歪ませました。

タイルよりましですが、どっちかっていうと水面よりもステンドグラスって印象ですよね…

なので、表面にさらに法線の揺らぎを追加してみました。

水面というか、なんか絵具を混ぜたような印象にはなったんですが、今度はゲームの視認性が下がってしまって、どこ行けば赤色が手に入るかとかが不明になってしまいました…

あと、単純にR,G,Bで色分けするとやはりビビッドな絵になってしまうのも問題点な気がします。

この辺りをバシッと解決するアイディアを少しスタッフと相談しようかなと思っています。

今回はその途中経過のご紹介でした。
また来週何かしらもがいた絵をご紹介できればと思います。
それでは！

【Irisy Aqua】ダメージエフェクト【アイアク】

どうも、1週間ぶりです。
Otorakoboです。

今回はダメージエフェクトです。
中でも汎用的に使えそうなヒットエフェクトをご紹介。

と、言うのもあまりにも強弱にグラデーションを付けても視認できるものじゃないため、特別なヒットエフェクトに関しては、スキルとセットで考えた方が良いだろうというとなったためです。

なので、今回はどの技にでも比較的に採用しやすく弱と強くらいの２パターンに耐えられそうなダメージエフェクトをデザインしてもらいました。

ラフその１

ラフその２

これらを合わせて

全体的に発色しすぎたのでもうすこし明るいシーンでも耐えうる形に調整して、ゲームへ取り込めればと思っています。
それでは！

【Irisy Aqua】キャラクタシェーダブラッシュアップ【アイアク】

どうも、1週間ぶりです。
Otorakoboです。

今日は、キャラクタシェーダの機能がまとまってきたのでそちらのご紹介です。
細かな調整なので、マニアックな制御紹介になってしまうかもですが、読んでもらえると嬉しいです笑

まず、アウトラインを発光させることで色の変化表現をしようと思いました。
ただし、単純にアウトラインを発光させると、のっぺりとした平面的な見た目になると予想されていたので、事前にグラデーションやアウトラインの太さを可変させることで、奥行き感を出したい。というオーダーは受けていました。

奥行＋グラデーションということで、まず作ったのがDepthを見てOutlineの発光度合を変更するものでした。

ただ、この表現の問題点は近距離ではかなり効果を確認できますが、遠距離ではまったく変化が分からなくなってしまう点がありました。

そのため、距離に依存しないY座標でもキャラクタ全体にグラデーションする仕組みを入れました。

そして両方をミックスすると

こんな感じです。
近距離ではDepthをオンにして、遠距離ではDepthをオフにする。みたいな制御をすると、全体的に奥行き感は出せるかなと思いました。

また、アウトラインの太い細いの制御をピクセルのY位置とDepthを参考に可変させる仕組みを同様に実装。

以下、スクリーンのみ

Depthと併用

ここまで入るとかなり凝った感じになりますね笑
正直、差を読み取るのが難しいです。
第一印象にどれくらい変化があるのか雰囲気かもしれません。

その他、Irisy Aquaではキャラクタは地面からの色を吸収するという設定があるため、地面の色を反射するライトを適用しました。
キャラの裏側に回り込むようにライティングさせた反転ライトシェーダを採用したのが以下になります。

いかがだったでしょうか？
個人的には少しずつ絵回りも固まってきたように思っています。

今回はキャラクタ関連のビジュアル表現をフォーカスしてみましたが、次回は、エフェクト関連で何かご紹介できればと思います。
それでは！