エフェクト実習

Appearance

第08回 UIエフェクト1 ​

前回: 第07回 軌跡 / 次回: 第09回 UIエフェクト2

注意 ​

この授業には提出課題があります ​

提出方法は 授業内で説明します ​

前回の振り返り ​

軌跡エフェクトを作りました ​

  • 第07回では、Trail Renderer・Particle Trails・Line Renderer を扱いました
  • 軌跡は単に装飾的な見た目だけでなく、 ゲーム上の意味のある情報をプレイヤーに伝える役割も持っています
  • そのことを踏まえて、動きの方向・速さ・余韻を 線やトレイルで表現する方法を学びました
  • 今回は UI 上で発生する数字や表示のエフェクトを扱います

今回の授業の目的 ​

情報表示に気持ちよさを加える ​

  • ダメージ数字
  • 回復数字
  • コンボ数字
  • クリティカル表示
  • ミスやガードなどの状態表示
  • ゲームの情報を、読みやすく気持ちよく伝えることが目標です

今回の授業内容 ​

ダメージ数字、回復数字、コンボ数字 ​

  • UI エフェクトの役割
  • 数字表示の基本構成
  • 移動、拡大縮小、フェード
  • 色とサイズの使い分け
  • Canvas と World Space 表示
  • 授業内課題

UI上の文字情報 ​

プレイヤーに状況を知らせる短い表示 ​

  • ダメージや回復の数字
  • MISS、GUARD、CRITICAL などの状態表示
  • Level Up、Quest Clear などの結果表示
  • Reload、Warning などの注意表示
  • ゲームの状態をすばやく伝えるために 文字情報の併用は有効です

文字表示と演出 ​

ただ出すだけでは読まれない ​

  • 出現、拡大、移動、フェードで視線を誘導することで ゲーム状態を端的に伝え、ユーザーの期待を煽ることができます
  • 色や大きさで重要度や種類を分けられれば 機能的な情報伝達が可能です
  • もちろんただ動かせばよいわけではなく、見やすさと ゲームのテンポに合った調整が必要になります
  • この授業では、いくつかの端的な使用例に触れ その実装方法を学びます

数字表示を扱う ​

出番の多い UI エフェクトの一つ ​

  • 演出を伴った数字の表示は、 ダメージ、回復、経験値、コンボ、スコアなどに使われます
  • ただ派手にするだけでなく、目的にあわせて配色や字体、動きなどを調整します
  • 漫然と表示するだけでは野暮ったい印象になってしまいます 読みやすく、邪魔にならないことを前提に組み立てましょう

UI エフェクトの構成要素 ​

時間、移動、拡大縮小、フェード ​

  • 時間変化: 出現、滞在、消失の流れを制御
  • 移動: 小気味の良いポップアップ、横へのスライドなどで視線を誘導
  • 拡大縮小: 出現直後のインパクトや、重要な情報の強調に使用
  • フェード: 後半で透明度を下げて自然に消します

Unity の Canvas モード ​

大きく二つの表示モード ​

  • Screen Space モードは、UI を画面座標で表示します 全ての描画が終わったあとの最上段に描画を行うオーバーレイと カメラの位置に合わせて描画するカメラスペースがあります
  • カメラスペースはUIにサイズを保ちながら奥行きを与えることができ 3Dモデルと同じ空間に配置可能なため、使いこなせば面白い表現が可能です
  • World Space モードは、UI を 3D 空間内の位置で表示します 個別のキャラクターへのダメージ表示など、ゲーム内のオブジェクトの位置と 関連付けて表示したい場合に有効です
  • https://docs.unity3d.com/ja/2023.2/Manual/class-Canvas.html

Screen Space Canvas ​

画面に固定された UI ​

画像
画像
上がオーバーレイ 下がカメラスペース 表示サイズはともに同じ

  • Screen Space の Canvas は 画面座標で UI を表示します
  • Overlay では常に最前面に表示されます メニューの表示に適しています
  • Camera Space では UI を3D空間上に サイズ固定で配置できます 上手く使えば有用です

World Space Canvas ​

ワールド座標で自由に表示 ​

画像
ワールド空間に配置されたUI 使いこなすためにはプログラムでの制御が必要

  • World Space の Canvas は 3D 空間内に UI を配置します
  • 敵の頭上、ヒット位置、アイテム位置などに UI を表示する場合はこちらが適しています
  • 便利ですが、扱いが3D オブジェクトなので 距離によって大きさが変わり、カメラに見え やすいよう向きも制御する必要があります

World Space Canvas の文字を 2D 化する ​

キャンバスを カメラへ向け続ける ​

  • World Space の UI は 3D 空間に置かれる ため、カメラの向きによっては傾いて 表示されてしまいます
  • オブジェクトをカメラ正面に向け続けると 3D 空間上に 2D オブジェクトを配置できます こうした 2D 表示物を ビルボードと呼びます
  • 右は LateUpdate でカメラの向きに合わせて 自身を回転させるスクリプトの例です
csharp
using UnityEngine;

// カメラに向かうビルボード
public class FaceCamera : MonoBehaviour
{
  [SerializeField] private Camera targetCamera;

  private void LateUpdate()
  {
    if (targetCamera == null)
    {
      targetCamera = Camera.main;

      if (targetCamera == null)
        return;
    }

    transform.rotation = targetCamera.transform.rotation;
  }
}

Animation と Script ​

Animator はやや面倒くさい ​

  • Unity には Animator という強力なアニメーション再生システムがありますが 設定はやや煩雑で大掛かりです
  • UI エフェクトの多くはシンプルかつ短時間で完了するため、 逐一 Animator を持ち出してステートマシンを設定するのも手間です
  • ここでは簡単なスクリプトでのアニメーションの 実装方法を紹介します

AnimationCurve ​

Inspector から調整可能なカーブ ​

画像
スクリプトを使用したアニメーションの実装例 座標とスケールにカーブを適用している

  • AnimationCurve を使うと、Inspector 上で時間変化のカーブを調整できます
  • 例えば、移動の速さや拡大縮小の変化を カーブで表現することで、様々な アニメーション表現が可能です
  • Animator は補間など細かな制御が可能ですが、 それらが必要ないのであれば AnimationCurve を使ったスクリプトの方が アニメーションを手軽に実装できます

AnimationCurve の利用方法 ​

  • AnimationCurve を SerializeField で宣言します
  • Inspector 上でカーブを編集して、時間変化のパターンを作ります
  • スクリプト内で、時間の経過に応じて Evaluate メソッドを呼び出し、 カーブから値をUI の位置やスケール、アルファなどのプロパティに適用します
csharp
// カーブの宣言
[SerializeField] private AnimationCurve positionXCurve = AnimationCurve.Linear(0f, 0f, 1f, 0f);

// 時間の経過に応じてカーブから値を取得
float t = elapsedTime / lifeTime; // 0から1の範囲で
float x = positionXCurve.Evaluate(t); // カーブから値を取得

// 取得した値をUIの位置に適用
rectTransform.anchoredPosition = startPosition + new Vector2(x, 0f);

Curve で調整するポイント ​

同じ処理でも印象が変わる ​

  • moveCurve : 最初を速くすると弾けるような動きになります
  • scaleCurve : 一瞬だけ大きくして戻すとインパクトが出ます
  • alphaCurve : 前半を 1 のまま、後半でフェードするのがおすすめです
  • Curve を変えるだけで様々な表現が可能になります 試行錯誤してみてください

実装例 ​

生成時に表示内容を変更する ​

csharp
// ダメージ数字と色を設定する
public void Setup(int value, Color color, Vector2 offset)
{
    text.text = value.ToString();
    text.color = color;
    move += offset;
}

// 実際に生成する例
DamageNumber number = Instantiate(damageNumberPrefab, canvasTransform);
number.Setup(damage, Color.red, new Vector2(Random.Range(-30f, 30f), 0f));
  • Instantiate の直後に Setup を呼ぶことで、毎回異なる数字や色を表示できます 回復なら +80、クリティカルなら大きい Scale など、用途に応じて値を変えます

DOTween を使う ​

スクリプト完結で簡単にアニメーションを実装できるライブラリ ​

  • DOTween は、移動・拡大縮小・フェードなどを簡潔に書ける Tween ライブラリです
  • 「どの値を・何秒で・どう変えるか」をコードだけで完結に指定できます UI エフェクト以外でも非常に便利なライブラリです
  • Asset Store で無料版が配布されています 利用を検討してもいいでしょう
    https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

DOTween の実装例 ​

Sequence で複数の動きをまとめる ​

csharp
using DG.Tweening;
using TMPro;
using UnityEngine;

public class DamageNumberTween : MonoBehaviour
{
    public TMP_Text text;
    public float lifeTime = 0.8f;
    public Vector2 move = new(0f, 80f);
    public bool destroyOnFinish = true;
    private RectTransform _rectTransform;
    private Vector2 _startPosition;

    private void Awake()
    {
        _rectTransform = GetComponent<RectTransform>();
        _startPosition = _rectTransform.anchoredPosition;
    }

    public void Setup(int value, Color color)
    {
        text.text = value.ToString();
        text.color = color;
        var sequence = DOTween.Sequence();
        sequence.Append(_rectTransform.DOScale(1.4f, 0.08f));
        sequence.Append(_rectTransform.DOScale(1f, 0.12f));
        sequence.Append(_rectTransform.DOAnchorPos(
            _startPosition + move, lifeTime).From(_startPosition));
        sequence.Insert(0.55f, text.DOFade(0f, lifeTime - 0.55f));

        if(destroyOnFinish)
            sequence.OnComplete(() => Destroy(gameObject));
    }
}
  • Append は動きを追加する指定です 直前の動きの後に再生されます
  • Insert は指定した時間から動きを開始します
  • OnComplete には再生完了時のコールバックを 追加可能です
  • 処理を数珠繋ぎにできるため、慣れると 直感的にアニメーションを作成可能です

実習 ​

ダメージ数字を作る ​

目的別で色や動きを 変えてみよう ​

実習1：数字用 UI を作る ​

TextMeshPro を配置する ​

  1. Canvas を作成する
  2. Text - TextMeshPro を追加する
  3. 表示内容を 120 にする
  4. フォントサイズ、色、アウトラインを調整する
  5. Prefab 化できるよう整理する

実習2：出現アニメーションを作る ​

少し大きく出して戻す ​

  1. 出現時の Scale を大きめにする
  2. 短時間で通常サイズへ戻す
  3. ダメージ数字らしい色にする
  4. クリティカル用に大きめのバリエーションを作る
  5. Game ビューで読めるか確認する

実習3：移動とフェードを作る ​

上へ流れて消える ​

  1. 数字を上方向へ移動させる
  2. 後半でアルファを 0 に近づける
  3. 表示時間を 0.6〜1.2 秒程度で調整する
  4. 横方向に少しランダムなばらつきを加える
  5. 消えたらオブジェクトを破棄する

実習4：種類を増やす ​

回復とコンボ表示を作る ​

  1. 回復数字は緑系にする
  2. +80 のように記号をつける
  3. コンボ表示は画面上部や中央に置く
  4. 数字が増えた瞬間に少し拡大する
  5. 重要度に応じてサイズと色を変える

授業内課題 ​

ダメージ、回復、コンボの いずれかの UI エフェクトを 提出してください ​

スクリプトでも DoTween でも ​

課題の条件 ​

以下を満たしてください ​

  • TextMeshPro を使って数字または短い文字を表示している
  • 出現・滞在・消失の時間変化がある
  • 移動・拡大縮小・フェードのうち2つ以上を使っている
  • 色やサイズで意味や重要度を表現している
  • 背景上で読めるように調整している
  • スクリーンショットまたは動画で提出する

提出時の説明 ​

調整の意図を添えてください ​

  • 何を表す数字か
  • どのように出現して消えるか
  • 色やサイズをどう決めたか
  • 読みやすくするために調整した点
  • 改善したい点

今回のまとめ ​

UI エフェクトは情報と手応えをつなぐ ​

  • ダメージ数字や回復数字は、状態変化をプレイヤーに伝えます
  • 出現・滞在・消失の時間変化で、読みやすさとインパクトを両立させられます
  • 色・サイズ・動きで意味や重要度を表現できます
  • 派手さだけでなく、情報の読みやすさも考慮して演出してみましょう

おつかれさまでした！ ​

次回予告 第09回 UIエフェクト2 ​

ゲージやパネルの 状態変化 ​