はじめに
はじめまして、株式会社キッズスターで2Dアニメーションデザイナーをしています。Yamtakです。
水の中を表現するため、ShaderGraphで揺らぎのシェーダーを作成してみましたので紹介させていただきます。
本記事は Unlit 設定にしており、2Dのテクスチャ表示(uGUI の Image,SpriteRenderer)を想定しています。
参考
動作環境
Unity 2021.3.xx
ShaderGraph 12.1.xx
ユニバーサル レンダーパイプライン
完成イメージ
水の中を泳ぐゲームを作成するために、水中の表現をよりリッチにし、プレイヤーに没入感を与えることを目指しました。実際は重くなってしまったため、シンプルにして軽量化させていますが、この記事では面白さ重視でリッチなシェーダーの内容をご紹介いたします。
水面の表現ではVoronoiを使われる方が多いようなので、見習ってVoronoiで進めます。
実現したい内容は下記となります。
- ゲームは左から右へ進んでいくので、このシェーダーは右から左へスクロールさせたい
- 軽い揺らぎがあると水面らしくなりそう
- 画面全体を覆うとうるさいので、光の差し込む上部にだけ表示されるようにしたい
ノード全体
Noiseと移動をVoronoiに与えて、白黒のグラデーションを被せています。
ノード解説
ここからの解説はデザイナー目線で解説をしていきます。理解の深い方には説明不足感があるかもしれませんが、入門的な記事と理解してください。（「ふりがなプログラミング」みたいな表現を目指しました）
まず基本設定
背景やキャラクターの上に表示していきますので、Additiveが効率がいいだろうと判断しました。明るい箇所だけ見えるようになります。
右から左へのスクロール
シンプルな移動の構成です。
水面の表現（Voronoi）
Voronoiを使用してみたのですが、あまりにもツブツブが目立ったので、調整していきます。
Remapはたまに使用するのですが、一番シックリきた解説が下記でしたので、引用させていただきます。
こちらも使うノードは1つで、Remapノードというものです。これは、入力と出力にそれぞれの下限、上限を設定することで、入力された値を変化させます。この状態は-1から1の値を受け取り、出力時に0から1の範囲に置き換える設定になっています。
揺らぎの表現（Noise）
Simple Noiseを足して歪みを表現しましたが、負荷が重くなってしまいましたので本番ではカットしました。
別のノードでも出来そうなので、興味のある方はチャレンジしてみてください。
画面上部に表示したい
UVから白黒のグラデーションを生成して、ここまでに作成したVoronoiに重ねています。
ただただ、上から下に掛かるだけのグラデーション表現なのですが、画面が見やすくなるよう、グラデ幅や濃度調整を行っています。こだわった分だけ増えてしまったノードですが、好みで削って良い物たちです。
プロパティの設定
いくつかはゲーム上から設定変更ができるよう、ブラックボードでプロパティの割り当てを行います。実際には英語で作成していましたが、本記事では伝わりやすいように日本語で記入してあります。
Materialの項目から各種数値を変更できるようになりました。もうちょっとネーミングセンスを磨きたいものですね。
うごっこランド紹介
今回紹介したシェーダーは下記コンテンツで確認する事ができます。興味のある方は是非プレイしてみてください。
『動いて遊んで学べるAR運動ゲーム うごっこランド』
ダイバーごっこ
KidsStar Inc.
Discussion