2024.12.10
“放置系”なのにサイバー攻撃を監視・検知、「統合ログ管理ツール」とは 最先端のログ管理体制を実現する方法
「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
2024.12.10
メールのラリー回数でわかる「評価されない人」の特徴 職場での評価を下げる行動5選
2024.12.09
10点満点中7点の部下に言うべきこと 部下を育成できない上司の特徴トップ5
2024.12.09
国内の有名ホテルでは、マグロ丼がなんと1杯「24,000円」 「良いものをより安く」を追いすぎた日本にとって値上げが重要な理由
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.12.10
職場であえて「不機嫌」を出したほうがいいタイプ NOと言えない人のための人間関係をラクにするヒント
2024.12.12
会議で発言しやすくなる「心理的安全性」を高めるには ファシリテーションがうまい人の3つの条件
2024.12.06
嫌いな相手の行動が気になって仕方ない… 臨床心理士が教える、人間関係のストレスを軽くする知恵
PR | 2024.11.26
なぜ電話営業はなくならない?その要因は「属人化」 通話内容をデータ化するZoomのクラウドサービス活用術
2024.12.11
大企業への転職前に感じた、「なんか違うかも」の違和感の正体 「親が喜ぶ」「モテそう」ではない、自分の判断基準を持つカギ
PR | 2024.11.22
「闇雲なAI導入」から脱却せよ Zoom・パーソル・THE GUILD幹部が語る、従業員と顧客体験を高めるAI戦略の要諦