SlideShare a Scribd company logo
1 of 23
Download to read offline
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
第 5 回 DeNA ゲーム開発勉強会 xAiming
パズル戦隊デナレンジャー : 制作を支えたツー
ル達
Apr. 28, 2015
渡辺 亮
Japan リージョンゲーム事業本部
技術・編成部 開発第三グループ
DeNA Co., Ltd.
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
自己紹介
 渡辺 亮 ( わたなべ りょう )
 DeNA でゲームを作り始めて 5 年目
⁃ ブラウザソーシャルゲームの開発・運用を
いくつか担当
⁃ 海外向けのアプリソーシャルゲーム
Blood Brothers のリードエンジニアを経て
⁃ パズル戦隊デナレンジャーの
クライアントエンジニアに
 サーバエンジニアですが、クライアントも
始めました、というパターン
 割となんでもやってます
2
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
アジェンダ
「パズル戦隊デナレンジャー」の開発・制作で
利用したツール ( の一部 ) と知見をご紹介します
クラッシュレポートとシューティング :
Crittercism & LiftEngine
ステージデータの制作 :
Tiled Map Editor
アニメーション・エフェクトの制作 :
SpriteStudio
その他、今回は触れませんが :
CocosBuilder(UI), TexturePacker( スプライトシート作成 ),
Jenkins( ビルドサーバ , 一部ツールの非エンジニア向けインタフェース ) など
3
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
デナレンジャーチームのミッション
ヒットさせるのは言うまでもなく、道を作る
ゲームクライアント開発力向上
⁃ サーバエンジニア出身のメンバー多い
⁃ 開発ノウハウ溜める
新しい自社フレームワーク・ライブラリの安定化
⁃ LiftEngine (2D ゲームフレームワーク )
⁃ DeAL ( サウンドライブラリ )
ツール選定
⁃ 後続タイトルの開発も考慮に入れて
4
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
クラッシュレポートとシューティング :
Crittercism & LiftEngine
5
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Crittercism
 mAPM(Mobile Application Performance Management) のサービス
⁃ クラッシュレポーティングに限らない
• アプリケーションの利用分析
• API アクセスなどのパフォーマンス分析
⁃ 現時点ではクラッシュレポータとしてのみ利用
 特に役に立ったもの :
⁃ スタックトレースの自動 Symbolicate
⁃ ゲームのユーザ ID との紐付け
⁃ クラッシュ数推移の集計
6
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Crittercism
7
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
LiftEngine によるデバッグ支援
 独自のメモリアロケータ
⁃ 解放するメモリ領域を特定パターンで塗りつぶす
→ 解放済みメモリへのアクセスを識別できる
 遅延解放
⁃ delete されたら、塗りつぶしだけしておき
実際のメモリ解放は少し待ってから行う
⁃ 解放するとき、内容が書き換わっていないか
チェック
→ 予期せぬメモリ破壊を検出できる
8
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
クラッシュ対応 その他の取り組み
 PC に接続したスマートフォンを使用して QA
⁃ Xcode でデバッガ起動した状態で QA
⁃ クラッシュしてブレークしたらそのまま開発者のも
とへ
 QA メンバに端末ログ採取を徹底
 長時間の耐久プレイテスト
 ベータテストでのクラッシュ調査
9
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ステージデータの制作 :
Tiled Map Editor
10
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Tiled Map Editor
11
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Tiled Map Editor
 座標ごとにタイルを置いてマップデータを作る
 レイヤーを複数持てる
⁃ デナレンジャーの場合は
• ギミックレイヤー
• 悪のオーラレイヤー
• ブロックレイヤー
• セルレイヤー
 といった具合。ゲーム上の概念と合わせやすい
 プロパティ (key-value) だけ持つレイヤーも
⁃ 必要スコアなどの設定値を保持するために利用
 Cocos2d-x 用のローダーがある
12
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
パズルのレイヤー構造
13
ギミック
悪のオーラ
ブロック
セル
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
イマイチだったところも
 座標ごとに持てるデータはタイルの ID のみ
⁃ 座標ごとに構造体を持ちたいケースには不適
⁃ 細かい設定を必要とするギミックがあるとつらい
 マップデータと描画情報が密結合している
⁃ 本当は 2 次元配列のマップデータだけでよかった
⁃ Tiled Map におけるレイヤーは、バッチ描画の単位。
ゲーム内の概念とは無関係
⁃ Cocos2d-x 用のローダーが、画像のロードまで
行っている
 編集時にバリデーションが効かない
開発期間の折り合いがつけば、専用に作ってもよかった。
14
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
アニメーション・エフェクトの制作 :
SpriteStudio
15
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
アニメーション作成ツールの選定
 データの量産に向いているか
⁃ 制作を担当するデザイナーの視点で
 導入実績が豊富か
⁃ ツールの普及度が高いほど、制作を外注しやすい
 再生用ライブラリの品質
⁃ オープンソースであれば手を入れることも可能
16
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
色々検討した
 AnimationBuilder ( 自社ツール ), Spine
▲ データ量産しづらい ( )※
• 既存データを組み合わせての新しいアニメーション作成
• タイムライン上でのキーフレーム編集の使い勝手
など
 DragonBones
◯ Flash の拡張機能 → Flash のスキルを活用できる
▲ 再生用ライブラリがいまいち
▲ c++ での導入実績少ない
※ 対象とするアニメーションの複雑度による。
  比較的シンプルなアニメーションを大量生産するなら SpriteStudio
17
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
 コンシューマでの採用実績もあり、パフォーマンスにも期待
⁃ プロトタイプの時点では結構よく動いていた
Optpix SpriteStudio を採用
18
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
…ところが
 Cocos2d-x 用の標準プレイヤーが遅すぎる
⁃ 高速化した
• DeNA 流 cocos2d-x との付き合い方
http://www.slideshare.net/dena_study/denacocos2d-x
 出力されるデータの中身に無駄が多い
( プロジェクトファイル内の全画像の参照が
全アニメーションに含まれる )
→ 無駄なロードが大量に発生
⁃ 使ってない画像の参照情報をツールで一括削除
⁃ 後続のプロジェクトではプロジェクトファイルの
分割単位を工夫
19
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
…ところが
 エンジニアが頑張ることが多かった
⁃ SpriteStudio のデータに、ゲーム中の Sprite や
他のアニメーションを attach したい場合など
⁃ AnimationBuilder が得意な部分
20
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
…ところが
 パーティクル使えない
⁃ デナレンジャーでは簡易パーティクルを実装
⁃ ランダム性が必須でなければそれっぽく手付け
( デザイナーが頑張る )
⁃ SpriteStudio の最新バージョンではサポート済
21
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
デナレンジャーの反省を活かして
 後続のタイトルでは AnimationBuilder と
SpriteStudio を併用
⁃ AnimationBuilder のアニメーションノードとして
SpriteStudio アニメーションを利用可能
…例えば
• 個別キャラクターのスプライトアニメーション :
SpriteStudio で制作
• キャラクターの移動曲線 : AnimationBuilder で制作
→ プログラムでキャラクターを差し替えて汎用的に使える
 AnimationBuilder での制作については :
⁃ FINAL FANTASY Record Keeper 演出データについて
http://www.slideshare.net/dena_study/20141111-dena-study21
22
Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
ご静聴ありがとうございました
23

More Related Content

What's hot

Effective web performance tuning for smartphone
Effective web performance tuning for smartphoneEffective web performance tuning for smartphone
Effective web performance tuning for smartphonedena_study
 
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術dena_study
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方dena_study
 
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。DeNA_Creators
 
Unityで本格戦国シュミレーションRPG 開発
Unityで本格戦国シュミレーションRPG 開発Unityで本格戦国シュミレーションRPG 開発
Unityで本格戦国シュミレーションRPG 開発dena_study
 
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)dena_study
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconDeNA
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~Web Technology Corp.
 
Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術kazuya noshiro
 
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」Web Technology Corp.
 
その後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconその後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconDeNA
 
消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれShun Noguchi
 
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”Drecom Co., Ltd.
 
DeNA TechCon2019 How to implement live streaming client using Unity
DeNA TechCon2019 How to implement live streaming client using UnityDeNA TechCon2019 How to implement live streaming client using Unity
DeNA TechCon2019 How to implement live streaming client using UnityTakeyuki Ogura
 
位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよ位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよDrecom Co., Ltd.
 
DeNA TechCon2016 360VR Live Streaming
DeNA TechCon2016 360VR Live StreamingDeNA TechCon2016 360VR Live Streaming
DeNA TechCon2016 360VR Live StreamingTakeyuki Ogura
 
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディgree_tech
 
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容sairoutine
 
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechconDeNA
 
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)denatech2016
 

What's hot (20)

Effective web performance tuning for smartphone
Effective web performance tuning for smartphoneEffective web performance tuning for smartphone
Effective web performance tuning for smartphone
 
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
 
DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方DeNA流cocos2d xとの付き合い方
DeNA流cocos2d xとの付き合い方
 
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
エフェクト、アニメーション、演出のデータ作るの大変じゃないですか? DeNAではこうしてます。
 
Unityで本格戦国シュミレーションRPG 開発
Unityで本格戦国シュミレーションRPG 開発Unityで本格戦国シュミレーションRPG 開発
Unityで本格戦国シュミレーションRPG 開発
 
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
DeNA の新しいネイティブ開発(パズル戦隊デナレンジャー)
 
Unityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechconUnityネイティブプラグインマニアクス #denatechcon
Unityネイティブプラグインマニアクス #denatechcon
 
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
 
Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術Unity開発で週イチ呑み会を支える技術
Unity開発で週イチ呑み会を支える技術
 
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
CEDEC2014 セッション資料「ヘキサドライブ流 OPTPiX SpriteStudio 最適化術!」
 
その後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechconその後のDeNAのネイティブアプリ開発 #denatechcon
その後のDeNAのネイティブアプリ開発 #denatechcon
 
消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ消滅都市 Cocos2d-xでの演出・UIあれこれ
消滅都市 Cocos2d-xでの演出・UIあれこれ
 
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
[CEDEC2014]モバイルゲームにおける社内基盤開発と“実録”
 
DeNA TechCon2019 How to implement live streaming client using Unity
DeNA TechCon2019 How to implement live streaming client using UnityDeNA TechCon2019 How to implement live streaming client using Unity
DeNA TechCon2019 How to implement live streaming client using Unity
 
位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよ位置情報を常に取得するのはつらいよ
位置情報を常に取得するのはつらいよ
 
DeNA TechCon2016 360VR Live Streaming
DeNA TechCon2016 360VR Live StreamingDeNA TechCon2016 360VR Live Streaming
DeNA TechCon2016 360VR Live Streaming
 
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ
[GREE Tech Talk #07] Unityカジュアルゲーム・ケーススタディ
 
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容
 
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon
強化学習を利用した自律型GameAIの取り組み ~高速自動プレイによるステージ設計支援~ #denatechcon
 
DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)DeNAのゲーム開発を支える技術 (クライアントサイド編)
DeNAのゲーム開発を支える技術 (クライアントサイド編)
 

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

長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)
長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)
長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)DeNA Games Tokyo
 
エンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてエンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてtatsuya mazaki
 
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote MobbingRegional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote MobbingKeiji Kikuchi
 
土下座パラダイスはこうして生まれた
土下座パラダイスはこうして生まれた土下座パラダイスはこうして生まれた
土下座パラダイスはこうして生まれたTakafumi Naito
 
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)DeNA Games Tokyo
 
強化学習技術とゲーム AI 〜 今できる事と今後できて欲しい事 〜
強化学習技術とゲーム AI  〜 今できる事と今後できて欲しい事 〜強化学習技術とゲーム AI  〜 今できる事と今後できて欲しい事 〜
強化学習技術とゲーム AI 〜 今できる事と今後できて欲しい事 〜佑 甲野
 
Quiznowを支える技術 #yapcasia
Quiznowを支える技術 #yapcasiaQuiznowを支える技術 #yapcasia
Quiznowを支える技術 #yapcasiaYosuke Furukawa
 
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠GREE/Art
 
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れる
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れるレガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れる
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れるsairoutine
 
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)Daniel-Hiroyuki Haga
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)Toshiharu Sugiyama
 
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...Web Technology Corp.
 
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法Drecom Co., Ltd.
 
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術Satoshi Yamafuji
 
DeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechconDeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechconDeNA
 
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTips
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTipsMixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTips
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTipsTakahiro Miyaura
 
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜Riki Kataoka
 
悪いRegexと良いregexと最良regex
悪いRegexと良いregexと最良regex悪いRegexと良いregexと最良regex
悪いRegexと良いregexと最良regexbasicinc_dev
 
ソーシャルアプリを分析してみた
ソーシャルアプリを分析してみたソーシャルアプリを分析してみた
ソーシャルアプリを分析してみたDrecom Co., Ltd.
 

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

長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)
長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)
長期運用に耐えるための設計とリファクタリング(DeNA Games Tokyo)
 
エンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流についてエンジニアとデザイナーの技術交流について
エンジニアとデザイナーの技術交流について
 
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote MobbingRegional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
Regional Scrum Gathering Tokyo 2023 Keiji Kikuchi Remote Mobbing
 
土下座パラダイスはこうして生まれた
土下座パラダイスはこうして生まれた土下座パラダイスはこうして生まれた
土下座パラダイスはこうして生まれた
 
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)
なぜ私たちは「効率化」を目指すのか(DeNA Games Tokyo)
 
強化学習技術とゲーム AI 〜 今できる事と今後できて欲しい事 〜
強化学習技術とゲーム AI  〜 今できる事と今後できて欲しい事 〜強化学習技術とゲーム AI  〜 今できる事と今後できて欲しい事 〜
強化学習技術とゲーム AI 〜 今できる事と今後できて欲しい事 〜
 
Quiznowを支える技術 #yapcasia
Quiznowを支える技術 #yapcasiaQuiznowを支える技術 #yapcasia
Quiznowを支える技術 #yapcasia
 
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠
 
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れる
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れるレガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れる
レガシーな Perl システムに DDD (ドメイン駆動設計)を取り入れる
 
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
新次元ゲーム開発セミナー キーノート (Oct-18, 2012)
 
Reinvent2017 recap-gaming-session-2
Reinvent2017 recap-gaming-session-2Reinvent2017 recap-gaming-session-2
Reinvent2017 recap-gaming-session-2
 
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
DeNAtechcon_DeNAのセキュリティの取り組みと、スマートフォンセキュリティ(same-origin policy)
 
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
 
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
3Dリアルマップを用いたモバイルゲーム開発における課題とその解決方法
 
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術
剣と魔法のログレス いにしえの女神 〜スマホ時代の MMORPG を支える技術
 
DeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechconDeNAのプログラミング教育の取り組み #denatechcon
DeNAのプログラミング教育の取り組み #denatechcon
 
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTips
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTipsMixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTips
Mixed RealityとAzure Digital Twinsを組合わせてデジタルツインを可視化するためのTips
 
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜
3フェーズ÷12タスク×7スキル=1ミッション〜受発注業務に必要な基礎知識と設計のポイント〜
 
悪いRegexと良いregexと最良regex
悪いRegexと良いregexと最良regex悪いRegexと良いregexと最良regex
悪いRegexと良いregexと最良regex
 
ソーシャルアプリを分析してみた
ソーシャルアプリを分析してみたソーシャルアプリを分析してみた
ソーシャルアプリを分析してみた
 

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

  • 1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 第 5 回 DeNA ゲーム開発勉強会 xAiming パズル戦隊デナレンジャー : 制作を支えたツー ル達 Apr. 28, 2015 渡辺 亮 Japan リージョンゲーム事業本部 技術・編成部 開発第三グループ DeNA Co., Ltd.
  • 2. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 自己紹介  渡辺 亮 ( わたなべ りょう )  DeNA でゲームを作り始めて 5 年目 ⁃ ブラウザソーシャルゲームの開発・運用を いくつか担当 ⁃ 海外向けのアプリソーシャルゲーム Blood Brothers のリードエンジニアを経て ⁃ パズル戦隊デナレンジャーの クライアントエンジニアに  サーバエンジニアですが、クライアントも 始めました、というパターン  割となんでもやってます 2
  • 3. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アジェンダ 「パズル戦隊デナレンジャー」の開発・制作で 利用したツール ( の一部 ) と知見をご紹介します クラッシュレポートとシューティング : Crittercism & LiftEngine ステージデータの制作 : Tiled Map Editor アニメーション・エフェクトの制作 : SpriteStudio その他、今回は触れませんが : CocosBuilder(UI), TexturePacker( スプライトシート作成 ), Jenkins( ビルドサーバ , 一部ツールの非エンジニア向けインタフェース ) など 3
  • 4. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. デナレンジャーチームのミッション ヒットさせるのは言うまでもなく、道を作る ゲームクライアント開発力向上 ⁃ サーバエンジニア出身のメンバー多い ⁃ 開発ノウハウ溜める 新しい自社フレームワーク・ライブラリの安定化 ⁃ LiftEngine (2D ゲームフレームワーク ) ⁃ DeAL ( サウンドライブラリ ) ツール選定 ⁃ 後続タイトルの開発も考慮に入れて 4
  • 5. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. クラッシュレポートとシューティング : Crittercism & LiftEngine 5
  • 6. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Crittercism  mAPM(Mobile Application Performance Management) のサービス ⁃ クラッシュレポーティングに限らない • アプリケーションの利用分析 • API アクセスなどのパフォーマンス分析 ⁃ 現時点ではクラッシュレポータとしてのみ利用  特に役に立ったもの : ⁃ スタックトレースの自動 Symbolicate ⁃ ゲームのユーザ ID との紐付け ⁃ クラッシュ数推移の集計 6
  • 7. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Crittercism 7
  • 8. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. LiftEngine によるデバッグ支援  独自のメモリアロケータ ⁃ 解放するメモリ領域を特定パターンで塗りつぶす → 解放済みメモリへのアクセスを識別できる  遅延解放 ⁃ delete されたら、塗りつぶしだけしておき 実際のメモリ解放は少し待ってから行う ⁃ 解放するとき、内容が書き換わっていないか チェック → 予期せぬメモリ破壊を検出できる 8
  • 9. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. クラッシュ対応 その他の取り組み  PC に接続したスマートフォンを使用して QA ⁃ Xcode でデバッガ起動した状態で QA ⁃ クラッシュしてブレークしたらそのまま開発者のも とへ  QA メンバに端末ログ採取を徹底  長時間の耐久プレイテスト  ベータテストでのクラッシュ調査 9
  • 10. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ステージデータの制作 : Tiled Map Editor 10
  • 11. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Tiled Map Editor 11
  • 12. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Tiled Map Editor  座標ごとにタイルを置いてマップデータを作る  レイヤーを複数持てる ⁃ デナレンジャーの場合は • ギミックレイヤー • 悪のオーラレイヤー • ブロックレイヤー • セルレイヤー  といった具合。ゲーム上の概念と合わせやすい  プロパティ (key-value) だけ持つレイヤーも ⁃ 必要スコアなどの設定値を保持するために利用  Cocos2d-x 用のローダーがある 12
  • 13. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. パズルのレイヤー構造 13 ギミック 悪のオーラ ブロック セル
  • 14. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. イマイチだったところも  座標ごとに持てるデータはタイルの ID のみ ⁃ 座標ごとに構造体を持ちたいケースには不適 ⁃ 細かい設定を必要とするギミックがあるとつらい  マップデータと描画情報が密結合している ⁃ 本当は 2 次元配列のマップデータだけでよかった ⁃ Tiled Map におけるレイヤーは、バッチ描画の単位。 ゲーム内の概念とは無関係 ⁃ Cocos2d-x 用のローダーが、画像のロードまで 行っている  編集時にバリデーションが効かない 開発期間の折り合いがつけば、専用に作ってもよかった。 14
  • 15. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション・エフェクトの制作 : SpriteStudio 15
  • 16. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. アニメーション作成ツールの選定  データの量産に向いているか ⁃ 制作を担当するデザイナーの視点で  導入実績が豊富か ⁃ ツールの普及度が高いほど、制作を外注しやすい  再生用ライブラリの品質 ⁃ オープンソースであれば手を入れることも可能 16
  • 17. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 色々検討した  AnimationBuilder ( 自社ツール ), Spine ▲ データ量産しづらい ( )※ • 既存データを組み合わせての新しいアニメーション作成 • タイムライン上でのキーフレーム編集の使い勝手 など  DragonBones ◯ Flash の拡張機能 → Flash のスキルを活用できる ▲ 再生用ライブラリがいまいち ▲ c++ での導入実績少ない ※ 対象とするアニメーションの複雑度による。   比較的シンプルなアニメーションを大量生産するなら SpriteStudio 17
  • 18. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.  コンシューマでの採用実績もあり、パフォーマンスにも期待 ⁃ プロトタイプの時点では結構よく動いていた Optpix SpriteStudio を採用 18
  • 19. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. …ところが  Cocos2d-x 用の標準プレイヤーが遅すぎる ⁃ 高速化した • DeNA 流 cocos2d-x との付き合い方 http://www.slideshare.net/dena_study/denacocos2d-x  出力されるデータの中身に無駄が多い ( プロジェクトファイル内の全画像の参照が 全アニメーションに含まれる ) → 無駄なロードが大量に発生 ⁃ 使ってない画像の参照情報をツールで一括削除 ⁃ 後続のプロジェクトではプロジェクトファイルの 分割単位を工夫 19
  • 20. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. …ところが  エンジニアが頑張ることが多かった ⁃ SpriteStudio のデータに、ゲーム中の Sprite や 他のアニメーションを attach したい場合など ⁃ AnimationBuilder が得意な部分 20
  • 21. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. …ところが  パーティクル使えない ⁃ デナレンジャーでは簡易パーティクルを実装 ⁃ ランダム性が必須でなければそれっぽく手付け ( デザイナーが頑張る ) ⁃ SpriteStudio の最新バージョンではサポート済 21
  • 22. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. デナレンジャーの反省を活かして  後続のタイトルでは AnimationBuilder と SpriteStudio を併用 ⁃ AnimationBuilder のアニメーションノードとして SpriteStudio アニメーションを利用可能 …例えば • 個別キャラクターのスプライトアニメーション : SpriteStudio で制作 • キャラクターの移動曲線 : AnimationBuilder で制作 → プログラムでキャラクターを差し替えて汎用的に使える  AnimationBuilder での制作については : ⁃ FINAL FANTASY Record Keeper 演出データについて http://www.slideshare.net/dena_study/20141111-dena-study21 22
  • 23. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ご静聴ありがとうございました 23