
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
「BLEACH Brave Souls」3DUI演出の実装事例(全1記事)
提供:株式会社KLab
リンクをコピー
記事をブックマーク
鈴木愛忠氏(以下、鈴木):KLab株式会社のフロントエンジニアの鈴木愛忠が、スマートフォンゲーム『BLEACH Brave Souls』の3DUI演出の制作について発表したいと思います。
(会場拍手)
クライアントエンジニアをしており、UI部分の実装と自前のシェーダー等を利用した、特殊なUI演出の実装担当をしています。
2016年に入社して、現在新卒3年目になります。趣味でお絵かきをちょっとしてます。写真のように立派な「エンジ」ニアとしてやっております!
よろしくお願いします。
(会場笑)
今回のアジェンダです。
大きく4つに分けて話します。基本的に実装した演出についての紹介がメインになります。さっそくゲーム『BLEACH Brave Souls』についてご紹介したいと思います。
『BLEACH Brave Souls』、通称『ブレソル』と呼ばれているのですが、ジャンプで連載している漫画『BLEACH』のアニメ版を題材としたゲームになっています。海外でも展開しており、今年で3周年を迎えています。
開発的な話をしますが、Unity5.4系で、過去にUnity4系から移行しています。NGUIとWwiseを使用しています。
最近ゲームに新規要素が増えました。グループと呼ばれている機能ですね。どういう機能かと言うと、メンバーの人数やグループレベルで効果がもらえたり、専用のバトルで報酬が入るといった、いわゆる他ゲームでいうところのギルドのような機能が入りました。
そして今回このグループのロビー部分を自分のほうで実装させていただきました。ちょっと動画を流しますね。
(動画)
こんな感じですね。めっちゃかっこよく出てくるって感じです。あとでもう1回この動画をお見せするので途中ですが切ります。こうしたものを実装しているという感じですね。
制作した演出について1つずつ紹介したいと思います。まず、ホログラム演出になります。こんな感じで浮遊するディスプレイにわっと出てくるというものになります。
細かく見ていくと、ディスプレイの走査線をシェーダーで再現しており、一定時間サムネイルの表示がぶれたり、走査線がゆっくり流れたりということをしています。
メンバーの部分は巻きで送り文字で表示していたりします。
特殊な出現エフェクトとして、メンバーをタップするとキャラクターが出現するのですが、格子状にデジタルっぽく登場します。
オサレでかっこいい演出となってます。自分の自信作になります。サムネイルも同じような感じで出てきてます。
続いて背景にグループエンブレムというものがあるのですが、自分のグループのエンブレムをカスタマイズできるんですが、通常のUIですと下の方に出ているんですが、ロビー部分ですと少しかすれたような表示をしています。オーバーレイ合成等をかけたりして、壁に馴染むような表示をしています。
アスペクト比対応もやっています。キャラクターをたくさん並べるんですけれども、画面比に合わせて隙間をきれいに等間隔に並べて配置するようにしています。
iPhoneⅩだけ大人の事情で専用処理を入れていますが、基本的に画面比に応じていい感じにならべています。iPhoneXだけセーフレイアウトと呼ばれるもので手を加える必要がありました。という感じです。以上、演出の紹介でした。どうだ、かっこいいだろう!
(会場笑)
ということで、再度動画を流します。
(動画)
参加者:かっこいい。
鈴木:やった(笑)。こんな感じでかっこよく現れてきて。メンバーの情報とかが背景に出てくるので、タップするとキャラクター出てくるといった感じです。
時間帯によって背景が変わり、夜と昼があります。なにもしないで放置しているとキャラクターが勝手に歩き回るといったところも実装しています。
続いて演出の制作解説をしていきたいと思います。実際にどう作ったか説明していきます。
まずサイネージ演出ですね。こちらは図のように、まずUI部分をカメラで撮影して、Textureに変えて。湾曲したモデルにそれを貼り付けて出しています。
描画するときにNoise演出等の必要なエフェクトをかけて出しているという流れになります。これでサイネージ部分は完成です。
続いて出現エフェクトです。これはまずグレーのテクスチャと表示したいテクスチャを用意します。
そして黒を0、白を1として、例えば0.5という値を入れたらグレーのところまでを合成して格子状の表示になるという処理を入れています。
それだけだとちょっとデジタルっぽさが足りなかったので、入れた値に応じて青みがかかるようにしたことで、よりデジタルっぽい表示に近づけるような工夫をしています。
これで完成って感じですね。
キャラクターを表示する部分も同じように応用して、同じ実装をしています。まあこんな感じになります。
最後に、壁にかかったグループのエンブレムですね。こちらも、カスレ用の画像を1枚重ねることで作り出しています。右の図が制作さんに頼んだときの実際の資料です。
こんな感じで黒色のところだけ透明にする、みたいな合成をかけて表示しています。
実際に配置するとき、2D背景に壁についているように合成したかったので、3Dのオブジェクトにして、背景に合うように配置しています。描画時にオーバーレイで合成しています。
最後に、実装中に起こったトラブルをいくつかピックアップしようかなと思います。まずよくあるやつです。特定端末でピンク色の悪魔を呼び起こすという問題が発生しました(笑)。
これ実際に見てみると、端末のログでシェーダー部分でエラーが発生したのが見えて、該当コードを直すという対応をしました。古い端末のチェックが大切なんだなとかなり思いました。
続いてキャラクターがたくさんいるという問題ですね(笑)。『ブレソル』は200体近くキャラクターモデルが存在しており、チェックが大変だということで、時間をかけてデバック機能をいくつか実装しました。
マスターデータにあるキャラクターを全部サイネージ上で見れるようにするっていう機能を足しました。
時間を割いたんですけれども、結果的に制作さんと見たいレイアウトをすぐ出せるといったことや、特定のキャラクターでちょっと提供っぽい表示をしてしまう問題があったのでそれをすぐ発見することができて、結果的にかなり良かったと思います。
最後はエンブレムがきれいに出せないという問題がありました。2D背景に合うように配置していたんですけれども、なんか歪む。制作さんから何回も調整依頼が来て大変でした。
自分なりに考えたんですけれども、消失点の位置というのがあって。Unityって中央にカメラがあるので中央のまま捉えていくんですけれども。この壁ってこのへんに消失点があるよなということで、動かせないか? というのを考えました。
そして、実際にスクリプトを組んで解決しました。
消失点移動させるとカメラの中央に収束したままいい感じに動かすということができるようになって。
これを調整してうまいこと配置できました。解決です。やった!
おまけですけれども、こんな感じで画面、エディター上できれいに出すという。消失点のあたりを表示する機能を入れました。
まとめですね。こんな感じで5つ紹介させていただきました。実装した内容のまとめになります。
トラブルで学んだことです。端末ごとの表示確認が重要だということと、デバック機能を必要に応じて先を見通して実装しておく必要があるなということと、カメラの表示がきれいにいかなかったら消失点いじったりして、それで背景とうまく合成できるなということを学びました。
以上で発表を終わります。ありがとうございました。
(会場拍手)
この資料をあとで公開するので、いくつか参考リンクをまとめてあるので、よろしければよろしくお願いします。以上です。ありがとうございました。
©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames
株式会社KLab
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
PR | 2025.02.04
能登半島地震で自宅は全壊、「これでどうやってDXするねん」 被災したサイボウズ社員と支援者らが語る災害支援のノウハウ
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10
片付けパパ対談【特別編】 整理術×行動術×メモ術で、仕事も人生も自在にデザイン!
2024.12.16 - 2024.12.16
日本を変える 中小企業リーダーズサミット2025
2025.01.30 - 2025.02.12