トップ > エフェクト > WWVFX CONTEST 2021に投稿した作品振り返り

WWVFX CONTEST 2021に投稿した作品振り返り

エフェクト Unity Shader

はじめに

bravememo.hatenablog.com

今後の自分のためにも自分がどんな感じで制作したかを書き残したいと思います

環境　使用したツールなど

エフェクト

Unity 2019.4 shurikenを使用してエフェクトは作成しました。

今回の制作したエフェクトはTimeLineを使用してカットシーンを作成しています

下記画像はTimeLineの全体像です

カメラワークの制作はCinemachineを使用しました。

始点と終点にカメラを置いて補間の設定するだけそれっぽいカメラワークが作成できて便利です

リソース

ノイズ系テクスチャはfilter forgeで作成して、それ以外はPhotoshopで作成しました。

基本的にはシンプルな図形を使用してるのでそこまで苦労はしませんでした

モデルはBlenderで作成しました。

岩はこんな感じで作成してました。結構雑ですがエフェクトとしてみると雑なのは意外と目立ちませんでした

bravememo.hatenablog.com

その他

エフェクト制作では細かい修正を繰り返すのでバージョン管理ツールのSourcetreeを使用してました。 ミスをしてもすぐに戻せるバージョン管理ツールは偉大でした

制作で意識したところ

何が起きているかわかるような演出にする

過去のエフェクトコンテストの受賞作品を見たときにノミネート作品と受賞作品のどこに差があるか考えたところ、 受賞作品はノミネート作品よりも 何が起きているかわかる、感じ取れる作品だと思いました。

なので自分の作品もわかりづらい演出構成になっていないかや、エフェクトの発生が唐突な感じにならないように気を付けました。

また演出を徐々に盛り上げるために、エフェクト(キューブ)が周囲に与える影響を意識しました。

出現→チャージまではキューブの周囲に風が発生させておとなしい感じイメージにし、チャージ→発射でキューブがUIを破壊することで周囲への影響力が増し、最後の爆発で地面を抉れるくらいの力があるエフェクトにすることで、徐々に力が増し最終的に規模の大きいエフェクトになったと感じとれるようにしました。

どこを見てもSF要素を感じとれるものにする

SFチックな作品にするためにいくつかルールを設けてました

・色は基本的に青や水色

・UI周りは発光感と透明感を両立させるにアウトラインを発光させそれいがいを半透明にすることで発光感と透明感を両立させました

・基本的にキューブから放出されるものは矩形で表現

例えば下記演出ではキューブから空気を放出されてるのをイメージして作成しました

・その他のエフェクトもアウトラインは基本的に発光させる

これらのルールに則りエフェクトを作成したことで全体的にSF感のある作品にすることができました

見てて気持ちの良い演出にする

これは今回のエフェクト制作に限った話ではありませんが演出の盛り上がる後半部分はかなり力を入れました。

発射部分。破片を残すことで余韻が出て気持ちいい演出にできました

発射の演出部分はドラゴンクエストモンスターバトルロード、エルギオスのとどめの一撃をかなり参考にしました。

https://www.youtube.com/watch?v=0vAOMFiZnt8

ドラゴンクエストモンスターバトルロードの演出どれもかっこよくていいぞ

技術的な部分のあれこれ

UI全般の表現

アウトラインは基本的にシェーダー側で自動生成していて、うまくいかない場合のみ発光用テクスチャを作成してました

アウトラインの作成方法

bravememo.hatenablog.com

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時間以上でした。細かい調整繰り返した結果、ほぼ三か月このエフェクト制作をしていたのでいい結果が出てほんとうによかったです。

次の機会があればより良いエフェクトを短時間で制作できように頑張りたいです