エフェクト実習

Appearance

第07回 軌跡 ​

前回: 第06回 爆発 / 次回: 第08回 UIエフェクト1

注意 ​

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

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

前回の振り返り ​

爆発エフェクトを作りました ​

  • 第06回では、フラッシュ、衝撃波、火花、炎、煙を 役割ごとに分けて爆発を作りました
  • ワンショットの短い時間の中で 要素ごとの寿命や発生タイミングを調整しました
  • Texture Sheet Animation も使い 形が変わる表現を組み込みました
  • 今回は物体が動いたあとに残る軌跡を扱います

今回の授業の目的 ​

動きの余韻をエフェクトで見せる ​

  • 剣を振った軌跡
  • 弾やレーザーの線
  • 高速移動の残像
  • 魔法やエネルギーの流れ
  • 動きそのものを見やすく、気持ちよく見せる方法を学びます

今回の授業内容 ​

トレイル、斬撃エフェクト ​

  • 軌跡エフェクトの役割
  • Trail Renderer
  • Particle System の Trails
  • Line Renderer
  • 斬撃エフェクト
  • 授業内課題

軌跡エフェクトの役割 ​

動きの方向と速さを伝える ​

  • ここでの軌跡（トレイル）は、キャラクターやオブジェクトが 動いたあとに残る線や模様のエフェクトです
  • 攻撃の範囲、弾の進行方向、移動の勢いを伝えるための 重要な表現のひとつです
  • 軌跡は見た目上の装飾であると同時に 発生したイベントや速度感を伝える UI 的な役割も持ちます

軌跡の種類 ​

目的によって作り方を変える ​

種類用途主な実装
トレイル移動のあとに残る尾Trail Renderer
ビーム始点から終点まで伸びる線Line Renderer
斬撃エフェクト剣の軌跡メッシュ生成
粒子の軌跡火花や魔法の尾Particle System Trails

よい軌跡の条件 ​

見やすく、邪魔にならない ​

  • 動きの方向が分かる
  • 寿命が長すぎない
  • 透明度が自然に消える
  • 色や太さが目的に合っている
  • 判定より大きすぎたり小さすぎたりしない
  • 画面を覆いすぎない

Trail Renderer とは ​

GameObject の移動経路を描く ​

  • Trail Renderer は、オブジェクトが移動した経路に ポリゴンの帯を生成して描画します
  • 弾、剣、魔法の粒、移動するオブジェクトの尾に使えます
  • Time で軌跡が残る時間を調整します
  • Width や Color のカーブで 先端から終端までの見た目を変えられます

Trail Renderer の基本設定 ​

まず確認する項目 ​

項目役割
Time軌跡が残る時間
Min Vertex Distance頂点を追加する間隔
Width軌跡の太さ
Color色と透明度の変化
Material軌跡に使うマテリアル

Time と Width ​

長さと太さで印象が変わる ​

  • Time が長いほど、長い軌跡が残ります
  • 長すぎると画面が汚れ、動きも読みづらくなります
  • Width が太いほど強い印象になります
  • 剣の軌跡は太め、弾の尾は細めなど 用途に合わせて調整します
  • 終端の透明度を 0 にすると自然に消えます

Min Vertex Distance ​

曲線のなめらかさと負荷を調整する ​

  • Min Vertex Distance は 軌跡の頂点をどの間隔で追加するかを決めます
  • 小さいほどなめらかになりますが、頂点数が増えます
  • 大きすぎるとカクカクした軌跡になります
  • まずは見た目を優先し、必要に応じて軽くします

Trails モジュール ​

パーティクルの移動に線を残す ​

  • Particle System の Trails モジュールを使うと 各粒子に軌跡をつけられます
  • 火花、流星、魔法弾、雨、破片などに向いています
  • 粒子の寿命や速度と合わせて調整します
  • 軌跡の色は粒子色と連動させることもできます

火花と Trail ​

速い粒子ほど軌跡が必要 ​

  • 火花は一瞬で移動するため 点だけでは迫力が伝わりません
  • Trail を足すことで、動きの方向と速さが分かりやすくなります
  • 寿命を短く、幅を細くすると鋭い印象になります
  • アルファを早めに落とすと画面に残りすぎません 余韻と切れ味のバランスを調整しましょう

軌跡用マテリアル ​

半透明と加算を使い分ける ​

  • 光る軌跡は Additive 系のマテリアルが向いていますが 光らせすぎは画面が見づらくなるので安易な使用は厳禁です
  • 煙や影のような軌跡は Alpha Blend が向いています
  • テクスチャーを使う場合は 横方向に流れる模様やグラデーションが使いやすいです
  • シェーダー基礎の UV スクロールやマスクと組み合わせると より表現の幅が広がります

Line Renderer ​

始点と終点を結ぶ線 ​

  • Line Renderer は、指定した点を結ぶ線を描画します
  • レーザー、ビーム、電撃、照準線などに使えます
  • Trail と違い、移動経路ではなく 現在の始点と終点を明確に見せるのに向いています
  • 幅、色、マテリアル、頂点位置を調整して見た目を作ります

ビーム表現の考え方 ​

まっすぐ、強く、読める線にする ​

  • ビームは、どこからどこへ向かうかが重要です
  • 中心の明るい線と、外側の薄い光を重ねると強く見えます
  • 発生時と消失時に短いフラッシュを足すと 打った感触が強くなります
  • 画面に長く残しすぎると邪魔になるため 用途に合わせて寿命を決めます

斬撃エフェクト ​

剣の軌跡をメッシュで作る ​

斬撃メッシュの動的生成例
メッシュの動的生成の例 アニメーションの動きに合わせて生成するが 単純な生成では荒い表現になるので補間が必要

  • 剣の根本から切っ先にかけて幅や色の変化する 軌跡を作るにはメッシュ生成も選択肢です
  • LateUpdate() で剣の位置を記録し、動的に メッシュを生成する方法が一般的です 古典的ですが自由度の高い方法です
  • ただし軌跡がモーション由来となるため、 剣の動きとセットでの調整が必要になります

実習 ​

軌跡エフェクトを作る ​

動きの軌跡を 気持ちよく表現 ​

実習1：Trail Renderer を追加する ​

移動するオブジェクトに軌跡をつける ​

  1. Sphere または Cube を作成する
  2. Trail Renderer を追加する
  3. オブジェクトを移動させる
  4. Time を調整して軌跡の長さを変える
  5. Width を調整して太さを変える

実習2：色と透明度を調整する ​

自然に消える尾を作る ​

  1. Trail Renderer の Color を開く
  2. 先端を明るく、終端を透明にする
  3. Width カーブで終端を細くする
  4. Material を半透明または加算系にする
  5. Game ビューで見え方を確認する

実習3：Particle Trails を使う ​

火花に軌跡を足す ​

  1. Particle System を作成する
  2. 火花のように短寿命で速い粒子にする
  3. Trails モジュールを有効にする
  4. Trail の幅と寿命を調整する
  5. 粒子本体と軌跡のバランスを整える

実習4：Line Renderer でビームを作る ​

始点と終点を結ぶ ​

  1. 空の GameObject を作成する
  2. Line Renderer を追加する
  3. Position に始点と終点を設定する
  4. Width と Color を調整する
  5. 中心線と外側の光を重ねて強く見せる

授業内課題 ​

トレイルまたはビームを使った 軌跡エフェクトを 提出してください ​

動いた方向が 伝わるように ​

課題の条件 ​

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

  • Trail Renderer、Particle Trails、Line Renderer のいずれかを使っている
  • 色と透明度が時間または長さに沿って変化している
  • 太さが一定ではなく、先端や終端に変化がある
  • 動きの方向、または始点と終点が読み取れる
  • マテリアルの Blend 設定を用途に合わせて選んでいる
  • スクリーンショットまたは動画で提出する

提出時の説明 ​

何を表す軌跡かを添えてください ​

  • 剣、弾、魔法、移動など、何の軌跡か
  • Trail、Particle Trails、Line Renderer のどれを使ったか
  • 色と太さをどう調整したか
  • 長く残しすぎないために調整した点
  • 改善したい点

今回のまとめ ​

軌跡は動きを読みやすくする ​

  • Trail Renderer は移動経路を残す表現に向いています
  • Particle Trails は、火花や魔法粒子の勢いを強められます
  • Line Renderer は、ビームやレーザーのように 始点と終点を明確に見せる表現に向いています
  • 軌跡は見た目の演出でありながら プレイヤーに動きや方向を伝える重要な要素です

おつかれさまでした！ ​

次回予告 第08回 UIエフェクト1 ​

数字や文字にも 動きをつけよう ​