BLEACH -Brave Souls- 3DUI演出の実装事例

BLEACH -Brave Souls-
3DUI演出の実装事例
KLab株式会社 KlabGames事業本部
フロントエンジニア鈴木愛忠
©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames

自己紹介
名前鈴木愛忠 (すずきなりただ)
職種クライントエンジニア
=> 主にUI実装/特殊なUI演出の実装担当
備考 2016入社(新卒３年目)
趣味お絵描き

アジェンダ
● BLEACH -Brave Souls-について
● 実装した演出の紹介
● 演出の制作解説
● 起こったトラブルピックアップ

BLEACH -Brave Souls-について

「BLEACH Brave Souls」とは、ぴえろが大人気コミックをアニメ化した作品
「BLEACH」を題材とした爽快3Dアクションゲームです。おなじみのキャラクタ
ーを自在に操作し、本格的なアクションを楽しむ事ができます。公式HP
2015年7月に国内リリース
2016年1月に海外でもリリース
今年で３周年になります

開発部分の解説
Unityのバージョン 5.4系
=>2016年に4系から移行した
UIの表示 : NGUIを使用
サウンド : Wwiseを使用

最近新しいゲーム要素が入りました
グループと呼ばれる機能です

グループ機能
メンバーとグループを作り
人数やレベルに応じて効果をもらったり
グループバトルでランキング報酬をもらったりできる
＝＞他のゲームだとギルド機能と呼ばれてる物

今回、そのロビー部分の演出を制作しました

制作した演出紹介

ホログラム演出のサイネージ
3Dで空間に浮遊する感じで出現します

● ディスプレイの走査線をシェーダーで表示
● 一定時間ごとにサムネイル表示がぶれます

● メンバー表示は送り文字で流してます

特殊な出現エフェクト
● 横線が入りながらデジタルっぽく
キャラが出現します
● サムネイルも同じ感じように出現

グループエンブレム
壁に表示しているのは自分のグループのエンブレムです
ユーザーでデザインをカスタマイズできます
通常UIで出すエンブレムと違いここは少しかすれて
オーバーレイ合成で表示してます
他部分での
エンブレム

３Dキャラ配置のアスペクト対応
アスペクト比に応じてキャラクターを綺麗に
並べる機能を実装
iPhoneXは大人の事情で専用処理を入れました

もう一度御覧ください

各演出の制作解説

②3Dモデル描画時に
画面エフェクト掛ける
①UI部分をTexture化
3Dモデルに付ける
キャラクターサイネージ
①別カメラでUI部分を撮影しTexture
化
②Textureをモデルに貼り付け
3D上に描画する際に
Noiseエフェクトを掛ける

キャラクターサイネージ
完成

出現エフェクト
グレーのテスクチャを用意
表示したいテクスチャを用意

黒を0白を1としてグレー値0.5までを
合成したいテクスチャと合成する

格子に近いほど青くなるように色合成
する
完成！

3Dキャラクター部分も
同じ形で実装しています

壁のグループエンブレム
まずエンブレムを表示
その上にカスレ用の画像を重ねるとかすれる
右はデザイナーさんに頼むときの資料

壁のグループエンブレム
エンブレムは3Dメッシュとして配置
描画時にオーバーレイで合成

起こったトラブルピックアップ

一部端末でサイネージがピンクになる
デバック期間中に一部端末でピンク色になる不具合発生
該当の端末で確認するとログでコンパイルエラーを確認
ピンク色の悪魔

一部端末でサイネージがピンクになる
原因は該当端末が一部シェーダの変数キャス
トが上手く行ってなかった (端末のGPU側
[グラフィック性能]の問題
該当部分のシェーダーを書き直して修正して
解決！

キャラクターの確認が大変
実装時キャラクターモデルは200体近く存在
いちいちプレイヤーデータを直すのは大変

キャラクターの出現エフェクトの確認が大変
少し時間をかけてデバック機能を実装し解決！
以下の機能を入れてました
● 全てのモデル情報をサイネージで選ぶ機能
● 次グループ情報を即更新する機能
● 移動するキャラクターを強制出現

キャラクターの確認が大変
デバック機能のために時間を割きましたが
● 表示不具合発生時の即時確認
● デザイナーから特定のキャラクター時のレイ
アウトが見たいときにすぐ用意できる
● 後に別の演出を追加した際に活用する事がで
きた
色々恩恵が有り実装して良かった

エンブレムがきれいに設置できない
2D背景に3Dの板ポリを
ぴったりになるよう配置したいが
普通に設置するとちょっと歪んだ感じにある
配置しても何度も調整お願いされて困る自分

自分なりに考えてみた
パースがピッタリ合わない
消失点を変更できないか？

変更するスクリプトを組んで解決
画像は消失点移動前

消失点移動後
消失点変わらず
カメラだけ動いている

これで意図した場所まで
消失点をずらして配置
解決！

おまけ
ちなみにエディターで消失点のあたり線を
表示するようにしています

まとめ
以上、今回実装した演出でした。
実装内容まとめ
● RendererTextureで別途描画した映像を3Dオブジェクトでモニタ風に表示
● サムネイルやキャラクターはグレースケールの格子と合成して表示
● エンブレム表示はカスレエフェクトを足してオーバーレイ表示
● エンブレムは2D背景に合うように
● アスペクト比に合わせたキャラクター配置

まとめ
トラブルで学んだことまとめ
● 端末ごとの表示確認重要
○ 特にAndroidのマイナーなGPUの確認はしていく必要がある
● 演出系はデバッグ機能の充実も大事
○ デザイナーから確認したい要望を見越して実装しておく必要がある
● カメラの消失点変えれば2D背景と3Dオブジェクトの配置
○ デザイナーさんに納得の行く形で修正できた

あとがき
ご静聴ありがとうございました
ノイズエフェクト実装時の参考資料
[Unity3D]ブラウン管風シェーダーを作った
消失点修正スクリプトの参考資料
カメラの消失点を移動させる

BLEACH -Brave Souls- 3DUI演出の実装事例

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to BLEACH -Brave Souls- 3DUI演出の実装事例

Similar to BLEACH -Brave Souls- 3DUI演出の実装事例 (15)

More from KLab Inc. / Tech

More from KLab Inc. / Tech (20)

BLEACH -Brave Souls- 3DUI演出の実装事例

Editor's Notes