はじめに
前回
今回は虹色に光らすシェーダーを作成していきます。
環境は Unity 2021.3.25f1です
Universal Render Pipeline を使用しています。
ノード作成
今回は色相を変化させて虹色を表現させます。Hueノードを使用することで色相を変化させることができるので、あとはHueノードのOfsetにTimeを入れてあげれば完成です
完成
色相を変化させたことできれいな虹色のアニメーションができました
【Unity】ShaderGraphでUVを斜めにさせる
はじめに
今回はShaderGraphでUVを斜めにさせていきます。
環境は Unity 2021.3.25f1です
Universal Render Pipeline を使用しています
ノード作成
ノードの全体図です
上記記事と同じように中心から画像を歪ますためにUVに0.5減算しておきます
斜めにする部分
UVの上下の端に近づくほどXのUVが移動するようにすることで斜めにすることができます
完成
【Unity】ShaderGraphで画像を拡大縮小させる
はじめに
今回はShaderGraphで画像を拡大縮小させていきます。
環境は Unity 2021.3.25f1です
今回の記事を活用したもの
ノード作成
ノードの全体像です
基本的にはUVに対して乗算してくだけですがUVにそのまま乗算しても中心から拡大してくれないので一時的にUVに対して-0.5してあげることで中心から拡大縮小ができるようになります
Sampler StateのWarpをClampにすることで拡大しすぎても見た目がおかしくならないようにしてます
完成
画像の保存に問題があってテクスチャの色が若干変わってますが実際のUnityでは色は変わってません
値が0に近づくにつれて拡大され値が大きくなると縮小されます
WWVFX CONTEST 2021に投稿した作品振り返り
はじめに
今後の自分のためにも自分がどんな感じで制作したかを書き残したいと思います
環境 使用したツールなど
エフェクト
Unity 2019.4 shurikenを使用してエフェクトは作成しました。
今回の制作したエフェクトはTimeLineを使用してカットシーンを作成しています
下記画像はTimeLineの全体像です
カメラワークの制作はCinemachineを使用しました。
始点と終点にカメラを置いて補間の設定するだけそれっぽいカメラワークが作成できて便利です
リソース
ノイズ系テクスチャはfilter forgeで作成して、それ以外はPhotoshopで作成しました。
基本的にはシンプルな図形を使用してるのでそこまで苦労はしませんでした
モデルはBlenderで作成しました。
岩はこんな感じで作成してました。結構雑ですがエフェクトとしてみると雑なのは意外と目立ちませんでした
その他
エフェクト制作では細かい修正を繰り返すのでバージョン管理ツールのSourcetreeを使用してました。 ミスをしてもすぐに戻せるバージョン管理ツールは偉大でした
制作で意識したところ
何が起きているかわかるような演出にする
過去のエフェクトコンテストの受賞作品を見たときにノミネート作品と受賞作品のどこに差があるか考えたところ、 受賞作品はノミネート作品よりも 何が起きているかわかる、感じ取れる作品だと思いました。
なので自分の作品もわかりづらい演出構成になっていないかや、エフェクトの発生が唐突な感じにならないように気を付けました。
また演出を徐々に盛り上げるために、エフェクト(キューブ)が周囲に与える影響を意識しました。
出現→チャージまではキューブの周囲に風が発生させておとなしい感じイメージにし、チャージ→発射でキューブがUIを破壊することで周囲への影響力が増し、最後の爆発で地面を抉れるくらいの力があるエフェクトにすることで、徐々に力が増し最終的に規模の大きいエフェクトになったと感じとれるようにしました。
どこを見てもSF要素を感じとれるものにする
SFチックな作品にするためにいくつかルールを設けてました
・色は基本的に青や水色
・UI周りは発光感と透明感を両立させるにアウトラインを発光させそれいがいを半透明にすることで発光感と透明感を両立させました
・基本的にキューブから放出されるものは矩形で表現
例えば下記演出ではキューブから空気を放出されてるのをイメージして作成しました
・その他のエフェクトもアウトラインは基本的に発光させる
これらのルールに則りエフェクトを作成したことで全体的にSF感のある作品にすることができました
見てて気持ちの良い演出にする
これは今回のエフェクト制作に限った話ではありませんが演出の盛り上がる後半部分はかなり力を入れました。
発射部分。破片を残すことで余韻が出て気持ちいい演出にできました
発射の演出部分はドラゴンクエストモンスターバトルロード、エルギオスのとどめの一撃をかなり参考にしました。
https://www.youtube.com/watch?v=0vAOMFiZnt8
ドラゴンクエストモンスターバトルロードの演出どれもかっこよくていいぞ
技術的な部分のあれこれ
UI全般の表現
アウトラインは基本的にシェーダー側で自動生成していて、うまくいかない場合のみ発光用テクスチャを作成してました
アウトラインの作成方法
UI用シェーダー
衝撃波の表現
下記動画の表現にアウトラインをいれたシェーダーを使用して作成しました https://youtu.be/TR1xM1HMNQ8?t=973
チャージUIの表現
チャージUIはshurikenだと細かい制御が難しそうだと判断してスクリプトでUIを制御しました
使用したソースコード 指定した番号までのオブジェクトを表示できます
using System.Collections; using System.Collections.Generic; using UnityEngine; [ExecuteAlways] public class CircleActiver : MonoBehaviour { public List<GameObject> objlist; public int ActiveNum = 0; //================================================================================= //初期化 //================================================================================= private void Awake() { SetActives(); } //Inspectorの内容が変更された時に実行 private void OnValidate() { SetActives(); } void FixedUpdate() { SetActives(); } void Update() { SetActives(); } void LateUpdate() { SetActives(); } //子を円状に配置する(ContextMenuで鍵マークの所にメニュー追加) [ContextMenu("SetActives")] void SetActives() { for (int i = 0; i < objlist.Count; i++) { objlist[i].SetActive(false); } for (int i = 0; i < ActiveNum; i++) { if (i >= objlist.Count) return; if (objlist[i] != null) { objlist[i].SetActive(true); } } } }
地面をえぐる表現
真面目にやると大変ですが、カメラワークを正面に固定したことでシンプルな破片をだすだけでもいい感じに見た目にすることができました
おわりに
今回の制作時間は100時間以上でした。細かい調整繰り返した結果、ほぼ三か月このエフェクト制作をしていたのでいい結果が出てほんとうによかったです。
次の機会があればより良いエフェクトを短時間で制作できように頑張りたいです
WWVFX CONTEST FOR GAMES 2021で受賞しました
WWVFX CONTEST FOR GAMES 2021のEXPLOSION Section一般部門でSILVER AWARDを受賞しました。
元々Free部門に出すつもりでしたが、制作してる途中に爆発要素があることに気づき、SFっぽい爆発は発想力の点数が高くなりそうだなと考えEXPLOSION部門に投稿したら、うまくいきました。
ただ自分じゃ作れないような良い作品が沢山あったので自分が受賞できたのが以外でしたが、受賞できてうれしいです。
WWVFX CONTEST FOR GAMES 2021のEXPLOSION Section一般部門でSILVER AWARDを受賞しました！！
— 武0武/ (@zenkai1127) 2022年4月1日
数ある作品から自分の作品を選んでもらえてとてもうれしいです！！#wwvfx #vfx pic.twitter.com/7mDBtrAzA4
UI表示した瞬間ゲージがマックスになるガバがあったけど評価に大きな影響がなくてほんとよかった
気がむいたら今回制作した作品の制作過程や工夫したところを解説した記事を書こうと思います。
素晴らしいコンテストを開いてくださり本当にありがとうございました
