Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,109 views

Published on

Aiming × KLab コラボMeetup!
BLEACH -Brave Souls- 3DUI演出の実装事例

Published in: Software
  • Be the first to comment

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

  1. 1. BLEACH -Brave Souls- 3DUI演出の実装事例 KLab株式会社 KlabGames事業本部 フロントエンジニア 鈴木愛忠 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  2. 2. 自己紹介 名前 鈴木 愛忠 (すずきなりただ) 職種 クライントエンジニア => 主にUI実装/特殊なUI演出の実装担当 備考 2016入社(新卒3年目) 趣味 お絵描き ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  3. 3. アジェンダ ● BLEACH -Brave Souls-について ● 実装した演出の紹介 ● 演出の制作解説 ● 起こったトラブルピックアップ ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  4. 4. BLEACH -Brave Souls-について ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  5. 5. BLEACH -Brave Souls-について 「BLEACH Brave Souls」とは、ぴえろが大人気コミックをアニメ化した作品 「BLEACH」を題材とした爽快3Dアクションゲームです。おなじみのキャラクタ ーを自在に操作し、本格的なアクションを楽しむ事ができます。公式HP 2015年7月に国内リリース 2016年1月に海外でもリリース 今年で3周年になります ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  6. 6. BLEACH -Brave Souls-について 開発部分の解説 Unityのバージョン 5.4系 =>2016年に4系から移行した UIの表示 : NGUIを使用 サウンド : Wwiseを使用 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  7. 7. BLEACH -Brave Souls-について 最近新しいゲーム要素が入りました グループと呼ばれる機能です ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  8. 8. BLEACH -Brave Souls-について グループ機能 メンバーとグループを作り 人数やレベルに応じて効果をもらったり グループバトルでランキング報酬をもらったりできる =>他のゲームだとギルド機能と呼ばれてる物 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  9. 9. BLEACH -Brave Souls-について 今回、そのロビー部分の演出を制作しました ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  10. 10. 制作した演出紹介 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  11. 11. 制作した演出紹介 ホログラム演出のサイネージ 3Dで空間に浮遊する感じで出現します ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  12. 12. 制作した演出紹介 ホログラム演出のサイネージ ● ディスプレイの走査線をシェーダーで表示 ● 一定時間ごとにサムネイル表示がぶれます ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  13. 13. 制作した演出紹介 ホログラム演出のサイネージ ● メンバー表示は送り文字で流してます ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  14. 14. 制作した演出紹介 特殊な出現エフェクト ● 横線が入りながらデジタルっぽく キャラが出現します ● サムネイルも同じ感じように出現 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  15. 15. 制作した演出紹介 グループエンブレム 壁に表示しているのは自分のグループのエンブレムです ユーザーでデザインをカスタマイズできます 通常UIで出すエンブレムと違いここは少しかすれて オーバーレイ合成で表示してます 他部分での エンブレム ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  16. 16. 制作した演出紹介 3Dキャラ配置のアスペクト対応 アスペクト比に応じてキャラクターを綺麗に 並べる機能を実装 iPhoneXは大人の事情で専用処理を入れました ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  17. 17. 制作した演出紹介 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  18. 18. 制作した演出紹介 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  19. 19. BLEACH -Brave Souls-について もう一度御覧ください ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  20. 20. 各演出の制作解説 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  21. 21. 各演出の制作解説 ②3Dモデル描画時に 画面エフェクト掛ける ①UI部分をTexture化 3Dモデルに付ける キャラクターサイネージ ①別カメラでUI部分を撮影しTexture 化 ②Textureをモデルに貼り付け 3D上に描画する際に Noiseエフェクトを掛ける ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  22. 22. 各演出の制作解説 キャラクターサイネージ 完成 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  23. 23. 各演出の制作解説 出現エフェクト グレーのテスクチャを用意 表示したいテクスチャを用意 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  24. 24. 各演出の制作解説 出現エフェクト 黒を0白を1としてグレー値0.5までを 合成したいテクスチャと合成する ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  25. 25. 各演出の制作解説 出現エフェクト 格子に近いほど青くなるように色合成 する 完成! ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  26. 26. 各演出の制作解説 出現エフェクト 3Dキャラクター部分も 同じ形で実装しています ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  27. 27. 各演出の制作解説 壁のグループエンブレム まずエンブレムを表示 その上にカスレ用の画像を重ねるとかすれる 右はデザイナーさんに頼むときの資料 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  28. 28. 各演出の制作解説 壁のグループエンブレム エンブレムは3Dメッシュとして配置 描画時にオーバーレイで合成 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  29. 29. 起こったトラブルピックアップ ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  30. 30. 起こったトラブルピックアップ 一部端末でサイネージがピンクになる デバック期間中に一部端末でピンク色になる不具合発生 該当の端末で確認するとログでコンパイルエラーを確認 ピンク色の悪魔 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  31. 31. 起こったトラブルピックアップ 一部端末でサイネージがピンクになる 原因は該当端末が一部シェーダの変数キャス トが上手く行ってなかった (端末のGPU側 [グラフィック性能]の問題 該当部分のシェーダーを書き直して修正して 解決! ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  32. 32. 起こったトラブルピックアップ キャラクターの確認が大変 実装時キャラクターモデルは200体近く存在 いちいちプレイヤーデータを直すのは大変 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  33. 33. 起こったトラブルピックアップ キャラクターの出現エフェクトの確認が大変 少し時間をかけてデバック機能を実装し解決! 以下の機能を入れてました ● 全てのモデル情報をサイネージで選ぶ機能 ● 次グループ情報を即更新する機能 ● 移動するキャラクターを強制出現 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  34. 34. 起こったトラブルピックアップ キャラクターの確認が大変 デバック機能のために時間を割きましたが ● 表示不具合発生時の即時確認 ● デザイナーから特定のキャラクター時のレイ アウトが見たいときにすぐ用意できる ● 後に別の演出を追加した際に活用する事がで きた 色々恩恵が有り実装して良かった ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  35. 35. 起こったトラブルピックアップ エンブレムがきれいに設置できない 2D背景に3Dの板ポリを ぴったりになるよう配置したいが 普通に設置するとちょっと歪んだ感じにある 配置しても何度も調整お願いされて困る自分 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  36. 36. 起こったトラブルピックアップ エンブレムがきれいに設置できない 自分なりに考えてみた パースがピッタリ合わない 消失点を変更できないか? ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  37. 37. 起こったトラブルピックアップ エンブレムがきれいに設置できない 変更するスクリプトを組んで解決 画像は消失点移動前 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  38. 38. 起こったトラブルピックアップ エンブレムがきれいに設置できない 消失点移動後 消失点変わらず カメラだけ動いている ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  39. 39. 起こったトラブルピックアップ エンブレムがきれいに設置できない これで意図した場所まで 消失点をずらして配置 解決! ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  40. 40. 起こったトラブルピックアップ エンブレムがきれいに設置できない おまけ ちなみにエディターで消失点のあたり線を 表示するようにしています ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  41. 41. まとめ 以上、今回実装した演出でした。 実装内容まとめ ● RendererTextureで別途描画した映像を3Dオブジェクトでモニタ風に表示 ● サムネイルやキャラクターはグレースケールの格子と合成して表示 ● エンブレム表示はカスレエフェクトを足してオーバーレイ表示 ● エンブレムは2D背景に合うように ● アスペクト比に合わせたキャラクター配置 ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  42. 42. まとめ トラブルで学んだことまとめ ● 端末ごとの表示確認重要 ○ 特にAndroidのマイナーなGPUの確認はしていく必要がある ● 演出系はデバッグ機能の充実も大事 ○ デザイナーから確認したい要望を見越して実装しておく必要がある ● カメラの消失点変えれば2D背景と3Dオブジェクトの配置 ○ デザイナーさんに納得の行く形で修正できた ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
  43. 43. あとがき ご静聴ありがとうございました ノイズエフェクト実装時の参考資料 [Unity3D]ブラウン管風シェーダーを作った 消失点修正スクリプトの参考資料 カメラの消失点を移動させる ©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames

×