Zenn
✨

『原神』シトラリのシールド表現

に公開
gamedev
VFX
原神
genshinimpact
tech

本記事は『原神』の VFX がどういったテクニックで制作されているかを観察・推察しながら紐解き、開発者向けに知見として形に残しておくことを目的としており、ゲームプレイ時の録画を引用させていただいています。

🐸シールドのデザインが可愛い！

原神で氷元素シールドを張れるキャラであるシトラリのシールドが可愛いので取り上げてみます。

シールドのデザインは、ぬいぐるみのような見た目の使い魔シトラリン（画像右側）を模したもので、シトラリンの力を借りたものであるような意図が込められているのかなと思います。左のキャラはイツパパで、シールドを展開するとすぐ横に召喚されています。

シールドを展開する際にシトラリンの目が一瞬だけ表示されています。

シトラリンの目は通常時はこんな感じ。

https://www.youtube.com/watch?v=W-MBm5kS_A4より

🐸立体のシールド + Ｚビルボード

シールドはキャラクターをしっかり包めるサイズで立体的に作られているのと‥（耳のパーツにピンクのアクセントが入っているのが良いですね✨）

シールドのZ軸がカメラに正対するように表示されています。

見下ろしだと分かりやすいですが、十字型の星のキラキラもシールドとまとめて一緒にZ軸ビルボード状態になっていることが分かります。UE5 で再現するにはひと手間かかりそう？

また、シールドは片面表示で裏側が見えないようにしていますね。

シールドモデルの両端に青い模様が濃く出ていて中央が透けているのは、フレネルでやっているというよりはテクスチャでマスクしているか頂点カラーのアルファ値を使ってそうな気がします。（フレネルも併用しているかも知れないです）

青い縞模様が上に向かってスクロールしているのに加え、宇宙のように小さな粒がスクリーンスペースUVで表示されている感じですね。

✨星型のパーツと演出

シールド本体のモデルより少し外側に大小の星型の模様が並んでいるパーツがあります。これをシトラリンの青いマフラーそのままのデザインにしていないのは、マフラーの形状だと太くて絵的に明るい面積が足元に偏ってバランスが悪くなってしまうからかなと思いました。

また、出現や消滅時の演出もとても凝っていて、星ごとに拡大縮小しているのでこれが可能な作り方をしないといけないのでひと手間かかりますよね。星の水色の輪郭は視差があるように見えてますが、単にもう一枚背後にズラして表示しているだけかな？

また、星と星を繋げるように細いリングを重ねていて、やはりスクリーンスペースのUVでの絵柄になっているので星本体とリングが地続きになっていますね。

🐸シールド展開の演出

とても凝っています！どれくらいのパーツで構成されているか分かりますか？

✨シールドが展開するまでの演出

  1. 地面に広がるリングがちぎれていく
  2. シトラリの足元から上昇しながら散る、白くてやや細長の光の粒
  3. 先頭に十字の星がある細長くて濃い青の点線のトレイル２つがシトラリの周囲を旋回
    • 点線が進行方向と逆にスクロールしている
  4. 大きなトレイル（シトラリン風）１つと小さなトレイル２つがシトラリの周囲を旋回
    • トレイルはボルボード表示タイプなので折り返す際に捻じれてしまっている（これは仕方ない）
    • 沢山の粒子が連なっている
  5. 専用のゲージを拡大しながら表示

✨シールドが展開する瞬間の演出

  1. 画面いっぱいに広がるかなり大きな水色のグロー（ソフトパーティクル強め）
  2. シールドモデルの表示（目を２つ瞬間的に表示）
    • ぼよんぼよんと拡大縮小アニメ
  3. 大きな星が並んだパーツの表示
  4. 細くて白いリングが中央から外側に広がる（歪みが入っている）
    • 恐らく球体モデル（中央をくり抜いたリング形状かも）
    • リングが不均一な形になるよう変形 + ビルボード
    • ちぎれながら消えている
  5. ひし形の破片パーティクルが周囲に沢山飛び散る + 宇宙のマテリアル
  6. 放射状に広がる小さな星パーティクル + 沢山の白い粒のパーティクル

✨イツパパ召喚の演出

  1. 放射状に広がる光の帯

  2. 放射状に飛び散る白くてやや細長の光の粒

  3. 拡大しながらフェードインしてくるイツパパモデル

  4. 周囲の歪み（UE で再現する場合は半透明マテリアルの Refraction）

  5. イツパパモデルの輪郭発光（フレネルかな？）

  6. シトラリを包むのと同じようなトレイル３つほどイツパパの周囲を旋回

🐸思ったこと

シールドを展開する技１つでも沢山の要素が詰まっていて成り立っていて、録画＆動画編集ソフトでコマ送りしながら観察することで、あらためて学べることがたくさんあると思いました。

その中でも今回はカラーリングについて触れておきたいと思います。

✨『原神』のカラーリング

原神の VFX はキャラクターごとにキーとなるカラーとアクセントとなるカラーがあって、例えばシトラリなら下記のように配色されているように思います。

  • キーカラー（ベースカラー）　‥　白～水色
  • サブカラー　　　　　　　　　‥　濃い青～紫
  • アクセントカラー　　　　　　‥　ピンク

キャラクター自身の配色が紫寄りなのもあって、全体的に統一されていながらも「単色な感じ」がなくてうまいなあと思わせられます。学生さんの作品を見ると単色・単調な配色の場合がとにかく多いので、みんなそこを意識した方が良いと思います。（このあたりはまた記事にする予定）

原神のキャラクターには元素と呼ばれる属性が割り当てられていて、シトラリは氷キャラなので、配色で水色をベースにしつつもピンクを入れるといったキャラクターの個性としてのカラーリングを押し出している感じがします。

それがより顕著なのが同じナタのヴァレサで、雷属性でありつつもそこに囚われずにキャラクターのキーカラーであるピンクを全面に押し出していますよね。

参考：マテリアルデザイン｜No.12-1/2：The color system｜日本語解説

Discussion