遊技機の演出をUnityで再現してみよう！

デザイン2課のTです。

普段は遊技機のオーサリング業務やエフェクト制作を担当していますが、時にはゲームのお仕事で
エフェクトを制作することもあります。

遊技機の映像開発ではAfter Effects、
ゲーム開発ではUnityなどのゲームエンジンを使用しています。
両方のツールに精通していると、アイデアの幅がグッと拡がると感じています。

特にAfter Efectsはゼロベースから様々な効果を作成することが可能な為、ゲームエフェクトのTexture作りにもうってつけです。

というわけで今回は
『遊技機の演出をUnityで再現してみよう！』
というテーマで進めていきます。

After Effectsで演出作成&素材化

今回制作する演出は、遊技機演出の中でも特にポピュラーな「ロゴアタック演出」です。
この演出に必要な要素は大きく分けて次の2つです。

・3Dロゴの出現&待機LOOP
・インパクトエフェクト

まずはAfterEffectsで演出全体の動きを作っていきましょう。
その後、完成した演出を構成パーツごとに分解・書き出して、Unityに取り込める形式(今回はPNG)で
素材化します。

また今回3Dロゴ作成でご紹介するElement 3Dはゲーム開発のロゴやUIの素材作成にも
流用可能なので遊技機にあまり触れたことが無い方でもぜひご一読いただければと思います。

3Dロゴ部分を作成

After Effectsで3Dロゴを作成する方法は大きく分けて3つあります。

A:標準機能の押し出し機能を使用する
B:「Element 3D」というプラグインを使用する
C:AE付属の「Cinema 4D Lite」で3Dロゴを作成する

遊技機開発の現場では、殆どの場合Bの方法が取られています。
理由は幾つかあるのですが、効率性と表現力のバランスが取れていることが挙げられます。

特に遊技機開発では短納期且つ演出数の多いプロジェクトである場合が多く、
制作を行うだけでなく修正要望や仕様変更についてもスピーディに対応する必要があります。

その為、
1.AE内で直接3Dが扱える為、調整や修正が行いやすい
2.レンダリング速度が高速
3.既存のOBJやFBXを扱うことが出来る
といった特徴を持つElement 3Dが選ばれています。

なので、今回はBのElement 3Dを使用する方法で3Dロゴを作っていきます。

1.テキストレイヤーで文字を作成
After Effectsのテキストツールを使用して、ロゴとなる文字を入力します。
経験的に線が太めのフォントを選ぶとロゴに迫力が出やすいのでオススメです
※クオリティを上げたい場合は、IllustratorやPhotoshopでアウトライン化したパスを作成し、
　After Effectsに読み込むのもおすすめです。
　この時に線の太らせ具合を少しずつ変えたアウトラインを複数用意すると
　この後に記述する『多層感』を楽に表現できます。
　
2.Element 3Dで押し出し＆調整
作成したテキスト(or パス)をElement 3Dに読み込み、押し出し処理を行います。
マテリアルやライティングなどのディティールを調整して、立体感のあるロゴに仕上げます。

ひとつ、お手軽にロゴのクオリティを上げる方法として『多層感を出す』があります。

画像を見ていただけると分かるのですが、今回作成したロゴは5層に分けています。
ロゴ最前面から「メタリックな赤」「金縁」「黒くて太い縁」「発光部分」「黒台座」と
各層に異なった質感を持たせることでロゴの実在性に説得力を持たせています。

もし作成したロゴに物足りなさを感じたら、多層感を足してみたら解決するかも……！

3.ロゴが奥から飛び込んでくる動きを作成
カメラアニメーションやElement 3Dのポジション設定を使って、ロゴが奥から手前に飛び込んで
くるような動きを加えます。
待機中の演出は、シンプルな揺れ動作のみとしました。

インパクトエフェクトの作成

ロゴ演出ができたら、演出の肝となるインパクトエフェクトの作成に移ります。

インパクトエフェクトの組み立て方については過去のブログ記事、
『AfterEffectsを使ってインパクトエフェクトを作る』
https://zenn.dev/matrixsoftware/articles/da59a47433fec0
をご参考いただければ幸いです……！

良い感じにまとまれば、ロゴアタック演出の作成は完了です。
以下はロゴ演出とインパクトエフェクトを組み合わせた映像になります。
映像1_【AE】ロゴアタック
https://youtu.be/DBG2u3YVJcw

エフェクト素材の書き出し

ここまでは遊技機開発の領域でしたが、ここからはゲーム開発の領域に入っていきます。

具体的には、作成したロゴアタックをUnityで使えるように構成パーツごとに分解し、それぞれを
PNG素材として書き出していきます。

複数枚の絵をパラパラ漫画的に表示したい演出は、
画像をずらっと並べた見た目のFlipBook形式に変換。
1枚の絵をParticleにして飛ばす演出は、それぞれ個別にテクスチャ(※1)として出力します。

今回の場合は下記の様に分けて出力しました。
・3Dロゴやインパクトエフェクトの線エフェクト：FlipBook形式
・パーティクル系(丸や十字の光、粒子など)：個別のテクスチャ

……今回はサンプルなので簡易的に分けていますが、
実際のゲーム開発では描画負荷や色味、ブレンドモードの調整、表示させるタイミングや
動きを考えてより細かく素材を分割することが重要です。

また、今回3Dロゴについては見た目を保持する為に赤で持っていきましたが
基本的にUnityで使うエフェクト用のテクスチャに関してはグレースケールで作成するのが良いかと思われます。
Unity側で彩色を行い、カラーバリエーションもUnity側で作った方がデータ負荷的に軽量化になるからです。

全ての素材化が終わったら、Unityの作業に移りましょう！

Unityでロゴアタック演出を再現

続いて、After Effectsで作成したPNG素材をUnityに取り込み、演出を再現していきます。

1.PNG素材のインポート
書き出した各PNGファイルをUnityに読み込みます。

2.Materialの作成
読み込んだテクスチャごとに、エフェクト用のMaterialを作成します。

3.Particle Systemに適用
作成したMaterialをUnityのParticle Systemに割り当て、After Effectsでの動きを参考にしながら、各種パラメータ(速度、寿命、サイズなど)を調整します。

そして、実際に再現を行った映像がこちらになります。
映像2_【Unity】ロゴアタック
https://youtu.be/WK6dEdKDiRk
やや粗さや物足りなさは感じる部分もありますが、検証用や動きのサンプルとしては十分なクオリティではないでしょうか……？

もし本番向けのクオリティに仕上げるなら、
・テクスチャのクオリティUP
・Particle SystemをVFX Graphに切り替える
・シェーダーをカスタムで調整する
・ロゴを3Dモデルに置き換える
・演出タイミング(タメ・ツメ)を微調整する

終わりに

ここまでお読みいただき、ありがとうございました！
少しでも遊技機演出やエフェクト制作にご興味を持っていただけたなら幸甚です。

前述の通り、弊社では遊技機だけでなく、ゲームのエフェクト制作も手掛けています。
そのため、ゲームエフェクト制作のご経験をお持ちの方にも、
遊技機エフェクト制作の楽しさや魅力を感じていただけるチャンスが多くございます。

そして、遊技機のエフェクト制作という仕事に興味を持たれた方に、ささやかながらアドバイスさせてください。

本格的な映像演出やエフェクト制作スキルを身につけるには自己研鑽ももちろん大切ですが、
やはり実際の現場で経験を積みながら、目とセンスの肥えた先輩方からフィードバックを受けて学ぶことが最も確実な近道だと感じています。
(特に遊技機開発のノウハウは、書籍やWeb上にあまり出回っていないのが実情です……)

もちろんこの業界は、クリエイティブで刺激的な反面、競争も激しく大変な部分もあります。
それでも、

『カッコいい演出で魅せる遊技機が作りたい！』
『パチンコ・パチスロが大好きで、面白い台を作りたい！』

という熱意や想いがある方は、ぜひこの業界に飛び込んで来て下さい！
お待ちしています！