モニターのノイズのようなエフェクトをかけるシェーダーグラフです。
SampleTexture2Dノードを使い、テクスチャを表示します。
UVのY座標を使って横じまのようなノイズを作り、これをUVのx座標に足します。
時間にSimpleNoiseを適用し、Stepを適用することで0 or 1のランダムな点滅を作ることができます。
これとノイズを乗算することでランダムなタイミングで一瞬だけノイズが混ざるようになります。
横軸を時間、縦軸をノイズの値、現在時刻のノイズ値を赤い丸で可視化すると
以下のようになります。
ノイズ<0.3の時は1.0(白色)、0.3<ノイズの場合は0.0(黒色)になります。
テクスチャをスタイリッシュに切り替えるシェーダーグラフです。
距離にPosterizeをかけて波紋を作ります。
距離に数値を足すと波紋が動きます。
距離<0.0の部分にテクスチャ1、距離>1.0の部分にテクスチャ2を表示させます。
波紋を動かすと以下のようになります。
テクスチャにゆらゆら揺れる感じのエフェクトをかけるシェーダーグラフです。
縦にスクロールするノイズをテクスチャのUVに足してゆらゆらせてています。
Sample Texture 2Dノードを使い、テクスチャを表示します。
テクスチャのUVのy座標にノイズを加算し、テクスチャを歪ませます。
ノイズのUV座標に時間を加算し、ノイズをスクロールさせます。
2018年も残すことあと1週間。 あっという間に過ぎ去った１年だったような気がします。
本記事では、私が2018年にアウトプットしたものをまとめたいと思います。
2018年にアウトプットしたものは以下の4つです。
・シェーダーグラフ
・記事の執筆
・GitHubでツールを配布
・Unity1Weekに参加してゲームを２つ作る
2018年の10月中旬あたりから、シェーダーグラフを触り始めました。
そして作ったものをツイートにまとめたり、Twitterのモーメントやはてなブログに作例をまとめるというアウトプットを行いました。
シェーダーグラフの作例をTwitterのモーメントにまとめていました。
twitter.com
twitter.com
恐れ多くも、Unity公式さんにモーメントをご紹介いただきました。
Shader Graph関連のツイートまとめがすごい。作品数も然ることながら、やりたいことの計算式の図表ツイートもまとめてあるので勉強にもなります。 https://t.co/19YcNY3pJA
— ユニティ・テクノロジーズ・ジャパン (@unity_japan) 2018年11月12日
Twitterのモーメントに不自由さを感じ、Hatenaブログにシェーダーグラフの記事を書くようになりました。
r-ngtm.hatenablog.com
現時点では約30個の記事を書いています。
はてなブログ記事で紹介しているシェーダーグラフをGitHubにて配布しています。
github.com
シェーダーグラフはUnity2018から入った機能で、登場してからまだ１年も経っていない、比較的日の浅いものです。
そのため、シェーダーグラフの 日本語の情報も少ない。
「自分のような凡人でも、シェーダーグラフについて発信すればUnityコミュニティに貢献できるのではないか。」
ここに自分のモチベーションがあります。
自分のような凡人でも活躍できるかもしれない、という希望を感じています。
以前、PsychicVRLabさんに遊びに行く機会があり、
その時のご縁でSTYLYのUnityサンプルプロジェクトを作成したり、サンプルの解説記事を書く機会をいただきました。
Unityを利用した空間スキャンライン表現 | STYLY
Unityを利用した2D画像の回転マスク表現 | STYLY
Unityを利用して画像にモザイクエフェクトをかける | STYLY
Unity+Playmakerでスーパーボールを大量に出す | STYLY
Unityで雨を作り、STYLYへアップロードする | STYLY
Unity上で動作するツール(Unityエディタ拡張)を作成してGitHubで公開する、というアウトプットを行いました。
公開したツールは以下の５つです。
・Unity-ArtTool
・WebBookmarker
・GoogleDriveViewer
・Unity-LayoutExporter
・Unity-AssetStoreImporter
テクスチャの色を変更して遊ぶためのツールを作りました。
Photoshopのグラデーションマップのようなエフェクトをかけることができます。
github.com
余談ですが、このツールを作ったことによってシェーダーで絵を加工する面白さに目覚め、
シェーダーグラフに手を出すきっかけになりました。
ウェブサイトのURLをUnity上でブックマーク登録できるツールです。
勉強用にWebサイトをブックマーク登録出来たら便利そうだと思って作りました。
github.com
初学者向けにWebサイトのURLを登録したものを渡す、という使い方もよさそうな気がします。
Googleドライブのファイルを一覧表示できるツールです。
github.com
Viewerという名前なのに、ファイルダウンロードやファイル削除もできます。
2018年の9月あたりにゲームデザインの効率化ツールを作ろうという野望がありました。
GoogleDriveViewerはゲームデザイン効率化ツールとGoogleドライブを連携させる過程でできたものです。
感想・動画をGoogleスプレッドシートと連携するためのツールがだいぶできてきた感じ(数えたら18日の間ずっとエディター拡張やってる)
— 🍡🍮かもそば 🍩🍘 (@rn49rn49) October 6, 2018
Unity1Weekで作ったゲームの面白さの検証作業で楽をしたいというモチベーションだけでここまで来た pic.twitter.com/6zHzr7AJxw
Unityのレイアウトファイル(.wlt)をプロジェクトファイルへ取り込んだり、プロジェクト上のwltをUnityに登録するツールです
別のPCでUnityを使うとき、普段と同じレイアウトが使えないのがストレスフルで作りました。
github.com
アセットストアからダウンロードしたUnitypackageをインポートできるようにするツールです。
github.com
アツリスという、数字の書かれたブロックを落とすゲームを作りました。
youtu.be
テトリスにインスピレーションを受けています。 同じ色を一列そろえると消えるところとか、名前が○○リスなところとか。
アツリス | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
ほかには「音あて」という、音を聞いてその音階を当てるミニゲームも作りました。
youtu.be
音当て | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
2018年になんとなく触り始めたシェーダーグラフ、気が付いたら12月末までずっと遊んでいました。
10月から12月までの２か月の間、シェーダーグラフに絞って情報発信したおかげか、
Twitterあたりで 「シェーダーグラフの人」 というポジションが得られたような、そんな感触を感じました。
今まで「自分は何者にもなれない」「自分は何の人なんだろう」
というもどかしさが募っていましたが、
シェーダーグラフに関する情報を発信をつづけることで「シェーダーグラフの人」と認知されるようになってくれれば良いかもなぁ、とか思ったり。
2019年には勉強会やLTに登壇してシェーダーグラフの発表をしようと考えています。
以下のような、炎の玉っぽいエフェクトを作成する方法を解説します。
Divide, Power, Sample Gradientを組み合わせて炎っぽい見た目にします。
UVにPosterizeをかけ、UVを24段階にします
ドット絵風の炎の玉の完成です。
以下のようなドット絵風の爆発を作る方法を解説します。
波紋が広がるような見た目になりました。
Posterizeノードを使ってUVの解像度を24段階にします。
ドット絵っぽくなりました。
広がる波紋に対してStepをかけ、広がるリングを作ります。
これとカラーグラデーションを乗算します。
(1.0 - 距離)と波紋を乗算し、中心から離れているところを暗くします。
爆発っぽい見た目になりました。
動きが遅すぎるように感じるので、時間に1.0より大きい数を乗算して速く動くようにします。
今回は4.0を乗算しました。
爆発らしさが増したように感じます。
爆発が頻繁に再生されてうるさいので、爆発を再生してから次の爆発を再生するまでに間隔を設けます。
今回は、シェーダーグラフとParticleSystemを組み合わせて頂点数がランダムな多角形を飛ばすパーティクルの作り方を解説します。
Unity2018.3.0f1
ShaderGraph Version4.1.0
まずはParticleSystemを作成します
見やすさのため、Start Sizeを3、1秒当たりの生成数を5に設定します。
以下のようなシェーダーグラフを作成します
シェーダーグラフから作成したマテリアルをParticleSystemに登録します。
登録すると以下のような、灰色の四角形パーティクルになります。
UnlitマスターノードのColorで設定した色がそのままパーティクルに反映されています
Polygonノードを以下のように接続すると、パーティクルが三角形になります。
UnlitマスターノードはTransparentに設定しておきます。
ParticleSystemのCustom Vertex StreamsにRandom/Stable.xを登録すると、TEXCOORD0.zにランダムな値(0~1)が渡るようになります。
シェーダーグラフでは、UVノードがTEXCOORD0に相当しており、B成分を取り出すことでTEXCOORD0.zを利用することができます。
TEXCOORD0.zには0~1のランダムな値が入っています。
パーティクルの頂点数が3,4,5のいずれかでランダムで設定されるようになり、以下のようになります。
色を変えたり、重力を付けてバウンドさせてみたりするのも面白いかもしれません。
