制作を支えたツール達 (パズル戦隊デナレンジャー)

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

第 5 回 DeNA ゲーム開発勉強会 xAiming

パズル戦隊デナレンジャー : 制作を支えたツール達

Apr. 28, 2015

渡辺　亮Japan リージョンゲーム事業本部技術・編成部開発第三グループDeNA Co., Ltd.


自己紹介渡辺亮 ( わたなべりょう )

DeNA でゲームを作り始めて 5 年目⁃ ブラウザソーシャルゲームの開発・運用を

いくつか担当⁃ 海外向けのアプリソーシャルゲーム

Blood Brothers のリードエンジニアを経て⁃ パズル戦隊デナレンジャーの

クライアントエンジニアに

サーバエンジニアですが、クライアントも始めました、というパターン

割となんでもやってます2


アジェンダ「パズル戦隊デナレンジャー」の開発・制作で利用したツール ( の一部 ) と知見をご紹介します

クラッシュレポートとシューティング : Crittercism & LiftEngineステージデータの制作 :Tiled Map Editorアニメーション・エフェクトの制作 :SpriteStudio

その他、今回は触れませんが :

CocosBuilder(UI), TexturePacker( スプライトシート作成 ),

Jenkins( ビルドサーバ , 一部ツールの非エンジニア向けインタフェース ) など3


デナレンジャーチームのミッションヒットさせるのは言うまでもなく、道を作る

ゲームクライアント開発力向上⁃ サーバエンジニア出身のメンバー多い⁃ 開発ノウハウ溜める

新しい自社フレームワーク・ライブラリの安定化⁃ LiftEngine (2D ゲームフレームワーク )

⁃ DeAL ( サウンドライブラリ )

ツール選定⁃ 後続タイトルの開発も考慮に入れて

4


クラッシュレポートとシューティング :Crittercism & LiftEngine

5


Crittercism mAPM (Mobile Application Performance Management) のサービス

⁃ クラッシュレポーティングに限らない• アプリケーションの利用分析• API アクセスなどのパフォーマンス分析

⁃ 現時点ではクラッシュレポータとしてのみ利用特に役に立ったもの :

⁃ スタックトレースの自動 Symbolicate⁃ ゲームのユーザ ID との紐付け⁃ クラッシュ数推移の集計

6


Crittercism

7


LiftEngine によるデバッグ支援独自のメモリアロケータ

⁃ 解放するメモリ領域を特定パターンで塗りつぶす→ 解放済みメモリへのアクセスを識別できる

遅延解放⁃ delete されたら、塗りつぶしだけしておき

実際のメモリ解放は少し待ってから行う⁃ 解放するとき、内容が書き換わっていないか

チェック→ 予期せぬメモリ破壊を検出できる

8


クラッシュ対応その他の取り組み PC に接続したスマートフォンを使用して QA

⁃ Xcode でデバッガ起動した状態で QA⁃ クラッシュしてブレークしたらそのまま開発者のも

とへ QA メンバに端末ログ採取を徹底長時間の耐久プレイテストベータテストでのクラッシュ調査

9


ステージデータの制作 :Tiled Map Editor

10


Tiled Map Editor

11


Tiled Map Editor 座標ごとにタイルを置いてマップデータを作るレイヤーを複数持てる

⁃ デナレンジャーの場合は• ギミックレイヤー• 悪のオーラレイヤー• ブロックレイヤー• セルレイヤー

　といった具合。ゲーム上の概念と合わせやすいプロパティ (key-value) だけ持つレイヤーも

⁃ 必要スコアなどの設定値を保持するために利用 Cocos2d-x 用のローダーがある

12


パズルのレイヤー構造

13

ギミック

悪のオーラ

ブロック

セル


イマイチだったところも座標ごとに持てるデータはタイルの ID のみ

⁃ 座標ごとに構造体を持ちたいケースには不適⁃ 細かい設定を必要とするギミックがあるとつらい

マップデータと描画情報が密結合している⁃ 本当は 2 次元配列のマップデータだけでよかった⁃ Tiled Map におけるレイヤーは、バッチ描画の単位。

ゲーム内の概念とは無関係⁃ Cocos2d-x 用のローダーが、画像のロードまで

行っている編集時にバリデーションが効かない

開発期間の折り合いがつけば、専用に作ってもよかった。14


アニメーション・エフェクトの制作 :SpriteStudio

15


アニメーション作成ツールの選定データの量産に向いているか

⁃ 制作を担当するデザイナーの視点で導入実績が豊富か

⁃ ツールの普及度が高いほど、制作を外注しやすい再生用ライブラリの品質

⁃ オープンソースであれば手を入れることも可能

16


色々検討した AnimationBuilder ( 自社ツール ), Spine▲ データ量産しづらい (※)• 既存データを組み合わせての新しいアニメーション作成• タイムライン上でのキーフレーム編集の使い勝手

など

DragonBones◯ Flash の拡張機能 → Flash のスキルを活用できる▲ 再生用ライブラリがいまいち▲ c++ での導入実績少ない

※ 対象とするアニメーションの複雑度による。

　比較的シンプルなアニメーションを大量生産するなら SpriteStudio

17


コンシューマでの採用実績もあり、パフォーマンスにも期待⁃ プロトタイプの時点では結構よく動いていた

Optpix SpriteStudio を採用

18


ところが… Cocos2d-x 用の標準プレイヤーが遅すぎる

⁃ 高速化した• DeNA流 cocos2d-x との付き合い方

http://www.slideshare.net/dena_study/denacocos2d-x

出力されるデータの中身に無駄が多い( プロジェクトファイル内の全画像の参照が全アニメーションに含まれる )→ 無駄なロードが大量に発生⁃ 使ってない画像の参照情報をツールで一括削除⁃ 後続のプロジェクトではプロジェクトファイルの

分割単位を工夫

19


ところが… エンジニアが頑張ることが多かった

⁃ SpriteStudio のデータに、ゲーム中の Sprite や他のアニメーションを attach したい場合など

⁃ AnimationBuilder が得意な部分

20


ところが… パーティクル使えない

⁃ デナレンジャーでは簡易パーティクルを実装⁃ ランダム性が必須でなければそれっぽく手付け

( デザイナーが頑張る )

⁃ SpriteStudio の最新バージョンではサポート済

21


デナレンジャーの反省を活かして後続のタイトルでは AnimationBuilder と

SpriteStudio を併用⁃ AnimationBuilder のアニメーションノードとして

SpriteStudio アニメーションを利用可能例えば…• 個別キャラクターのスプライトアニメーション :

SpriteStudio で制作• キャラクターの移動曲線 : AnimationBuilder で制作

→ プログラムでキャラクターを差し替えて汎用的に使える

AnimationBuilder での制作については : ⁃ FINAL FANTASY Record Keeper 演出データについて

http://www.slideshare.net/dena_study/20141111-dena-study21

22


ご静聴ありがとうございました

23

制作を支えたツール達 (パズル戦隊デナレンジャー)

Software