200体近くのキャラクターの実装をどうチェックするか？　『ブレソル』UI開発の舞台裏

『BLEACH Brave Souls』における3DUI演出

鈴木愛忠氏（以下、鈴木）：KLab株式会社のフロントエンジニアの鈴木愛忠が、スマートフォンゲーム『BLEACH Brave Souls』の3DUI演出の制作について発表したいと思います。

（会場拍手）

クライアントエンジニアをしており、UI部分の実装と自前のシェーダー等を利用した、特殊なUI演出の実装担当をしています。

2016年に入社して、現在新卒3年目になります。趣味でお絵かきをちょっとしてます。写真のように立派な「エンジ」ニアとしてやっております！

よろしくお願いします。

（会場笑）

今回のアジェンダです。

大きく4つに分けて話します。基本的に実装した演出についての紹介がメインになります。さっそくゲーム『BLEACH Brave Souls』についてご紹介したいと思います。

『BLEACH Brave Souls』、通称『ブレソル』と呼ばれているのですが、ジャンプで連載している漫画『BLEACH』のアニメ版を題材としたゲームになっています。海外でも展開しており、今年で3周年を迎えています。

開発的な話をしますが、Unity5.4系で、過去にUnity4系から移行しています。NGUIとWwiseを使用しています。

新機能「グループ」におけるUIデザイン

最近ゲームに新規要素が増えました。グループと呼ばれている機能ですね。どういう機能かと言うと、メンバーの人数やグループレベルで効果がもらえたり、専用のバトルで報酬が入るといった、いわゆる他ゲームでいうところのギルドのような機能が入りました。

そして今回このグループのロビー部分を自分のほうで実装させていただきました。ちょっと動画を流しますね。

（動画）

こんな感じですね。めっちゃかっこよく出てくるって感じです。あとでもう1回この動画をお見せするので途中ですが切ります。こうしたものを実装しているという感じですね。

制作した演出について1つずつ紹介したいと思います。まず、ホログラム演出になります。こんな感じで浮遊するディスプレイにわっと出てくるというものになります。

細かく見ていくと、ディスプレイの走査線をシェーダーで再現しており、一定時間サムネイルの表示がぶれたり、走査線がゆっくり流れたりということをしています。

メンバーの部分は巻きで送り文字で表示していたりします。

特殊な出現エフェクトとして、メンバーをタップするとキャラクターが出現するのですが、格子状にデジタルっぽく登場します。

オサレでかっこいい演出となってます。自分の自信作になります。サムネイルも同じような感じで出てきてます。

エンブレムとキャラクター表示を美しくする

続いて背景にグループエンブレムというものがあるのですが、自分のグループのエンブレムをカスタマイズできるんですが、通常のUIですと下の方に出ているんですが、ロビー部分ですと少しかすれたような表示をしています。オーバーレイ合成等をかけたりして、壁に馴染むような表示をしています。

アスペクト比対応もやっています。キャラクターをたくさん並べるんですけれども、画面比に合わせて隙間をきれいに等間隔に並べて配置するようにしています。

iPhoneⅩだけ大人の事情で専用処理を入れていますが、基本的に画面比に応じていい感じにならべています。iPhoneXだけセーフレイアウトと呼ばれるもので手を加える必要がありました。という感じです。以上、演出の紹介でした。どうだ、かっこいいだろう！

（会場笑）

ということで、再度動画を流します。

（動画）

参加者：かっこいい。

鈴木：やった（笑）。こんな感じでかっこよく現れてきて。メンバーの情報とかが背景に出てくるので、タップするとキャラクター出てくるといった感じです。

時間帯によって背景が変わり、夜と昼があります。なにもしないで放置しているとキャラクターが勝手に歩き回るといったところも実装しています。

演出の制作方法

続いて演出の制作解説をしていきたいと思います。実際にどう作ったか説明していきます。

まずサイネージ演出ですね。こちらは図のように、まずUI部分をカメラで撮影して、Textureに変えて。湾曲したモデルにそれを貼り付けて出しています。

描画するときにNoise演出等の必要なエフェクトをかけて出しているという流れになります。これでサイネージ部分は完成です。

続いて出現エフェクトです。これはまずグレーのテクスチャと表示したいテクスチャを用意します。

そして黒を0、白を1として、例えば0.5という値を入れたらグレーのところまでを合成して格子状の表示になるという処理を入れています。

それだけだとちょっとデジタルっぽさが足りなかったので、入れた値に応じて青みがかかるようにしたことで、よりデジタルっぽい表示に近づけるような工夫をしています。

これで完成って感じですね。

キャラクターを表示する部分も同じように応用して、同じ実装をしています。まあこんな感じになります。

最後に、壁にかかったグループのエンブレムですね。こちらも、カスレ用の画像を1枚重ねることで作り出しています。右の図が制作さんに頼んだときの実際の資料です。

こんな感じで黒色のところだけ透明にする、みたいな合成をかけて表示しています。

実際に配置するとき、2D背景に壁についているように合成したかったので、３Dのオブジェクトにして、背景に合うように配置しています。描画時にオーバーレイで合成しています。

実装中に起こったトラブル

最後に、実装中に起こったトラブルをいくつかピックアップしようかなと思います。まずよくあるやつです。特定端末でピンク色の悪魔を呼び起こすという問題が発生しました（笑）。

これ実際に見てみると、端末のログでシェーダー部分でエラーが発生したのが見えて、該当コードを直すという対応をしました。古い端末のチェックが大切なんだなとかなり思いました。

続いてキャラクターがたくさんいるという問題ですね（笑）。『ブレソル』は200体近くキャラクターモデルが存在しており、チェックが大変だということで、時間をかけてデバック機能をいくつか実装しました。

マスターデータにあるキャラクターを全部サイネージ上で見れるようにするっていう機能を足しました。

時間を割いたんですけれども、結果的に制作さんと見たいレイアウトをすぐ出せるといったことや、特定のキャラクターでちょっと提供っぽい表示をしてしまう問題があったのでそれをすぐ発見することができて、結果的にかなり良かったと思います。

消失点をずらして2D表示を自然にする

最後はエンブレムがきれいに出せないという問題がありました。2D背景に合うように配置していたんですけれども、なんか歪む。制作さんから何回も調整依頼が来て大変でした。

自分なりに考えたんですけれども、消失点の位置というのがあって。Unityって中央にカメラがあるので中央のまま捉えていくんですけれども。この壁ってこのへんに消失点があるよなということで、動かせないか？　というのを考えました。

そして、実際にスクリプトを組んで解決しました。

消失点移動させるとカメラの中央に収束したままいい感じに動かすということができるようになって。

これを調整してうまいこと配置できました。解決です。やった！

おまけですけれども、こんな感じで画面、エディター上できれいに出すという。消失点のあたりを表示する機能を入れました。

トラブルから学んだこと

まとめですね。こんな感じで5つ紹介させていただきました。実装した内容のまとめになります。

トラブルで学んだことです。端末ごとの表示確認が重要だということと、デバック機能を必要に応じて先を見通して実装しておく必要があるなということと、カメラの表示がきれいにいかなかったら消失点いじったりして、それで背景とうまく合成できるなということを学びました。

以上で発表を終わります。ありがとうございました。

（会場拍手）

この資料をあとで公開するので、いくつか参考リンクをまとめてあるので、よろしければよろしくお願いします。以上です。ありがとうございました。

©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames