CocoStudioとcocos2d-xの連携

1. CocoStudioとcococs2d-xの連携
株式会社TKS2 清水友晶

2. 清水 友晶
— 株式会社TKS2
スマートフォンアプリ開発
(iOS, Android, Windows Phone 8)
Webコンテンツ開発
— cocos2d-xへの開発参加
cocos2d-xを利用したアプリ開発
講演活動
執筆活動
— Twitter: tks2shimizu
— Blog: http://tks2.net/memo
— SlideShare: http://www.slideshare.net/doraemonsss
— Facebook: http://www.facebook.com/doraemonsss

3. — 6/25発売
— 6/18発売
— 2,800円 ＋ 税
— 2,980円 ＋ 税
— 400ページ
— 312ページ

4. — http://cocos2d-x.jp
— cocos2d-x開発元Chukong Technologies社公認
— cocos2d-xのための自由なコミュニティー
— 入門者から上級者まで誰でもOK!!ぜひご参加を!
— cocos2d-xに関することなら何でも投稿できます!!
— https://www.facebook.com/groups/cocos2dxjp/

5. — 10/24 第13回 shinjuku.cocos2d-x
— 11/12 第7回テックヒルズ
— 11/13 gumi study #17
— 11/14 shinjuku.cocos2d-x初心者ハンズオン
∼cocos2d-xを利用したクロスプラットフォーム開発環境構築∼
— 11/19 第14回 shinjuku.cocos2d-x
— 12/M shinjuku.cocos2d-x初心者ハンズオン
∼CocosBuilderを利用した開発の進め方∼
— 12/M 第15回 shinjuku.cocos2d-x

6. 目次
— CocoStudioとは
— CocosBuilderは？
— CocoStudioをさわってみよう
—
—
—
—
Animation Editor
UI Editor
Scene Editor
Data Editor
— まとめ

7. CocoStudioとは
— UIやアニメーションをGUIで作成できるエディタ
— cocos2d-x 2.2
— cocos2d-x 3.0alpha
— cocos2d-html5 2.2
— 安定バージョン
— CocoStudio v1.0.0.0
— 無償
— CocoStudioに含まれるもの
—
—
—
—
Animation Editor
UI Editor
Scene Editor
Data Editor

8. CocoStudioとは
— 動作環境
— Windows XP, Windows 7, Windows 8
— Microsoft .NET Framework 4
— 今のところMacは未対応
https://github.com/chukong
— 言語（現在ヘルプは中国語のみ）
— 英語
— 中国語（簡体字）
— 残念ながらオープンソースではない
— 2012年初旬より開発が始まっている
— CocosBuilderで作成したccbファイルを読み込ませる
ことができる

9. CocoStudioのインストール
— cocos2d-xサイトのダウンロードページよりCocoStduioをダウ
ンロードすることができる
http://www.cocos2d-x.org/download
— ダウンロードしたCocoStudio_Full_V1.0.0.0.exeをダブルクリッ
クし、手順に沿って進めるだけ
— CocoStudioの説明にはインストールが必要な項目が挙げられ
ているが、上記とともにインストールされる
http://www.cocos2d-x.org/wiki/CocoStudio

10. CocosBuilderは？
— CocosBuilderはViktor Lidholt氏によって開発された
— Viktor Lidholt氏
— 2011年 CocosBuilderの開発を行う
— 2012年2月 Zynga社
— 2013年6月 Apportable社
— Viktor Lidholt氏によるCocosBuilderの開発は2013年6月で止
まっている
https://github.com/cocos2d/CocosBuilder/network
— CocosBuilderがオープンソース(MIT)でありGitHubで公開されて
いるため、その改修を行うことも可能
— 現在も多くForkされており開発が続いている
— tiantian2007氏
— ovenbits氏
CocosBuilderはこのまま死んでしまうのか。。。

11. SpriteBuilder
— CocosBuilderの後継
— Apportable社によりSpriteBuilderが開発されている
— SpriteBuilderのホームページはまだないようです
— GitHub
https://github.com/apportable/SpriteBuilder

12. 本日利用するリソース
http://goo.gl/F1FbYx

13. CocoStudio
— CocoStudioの起動画面

14. Animation Editor
— スケルタルアニメーション（ボーンアニメーション）を
作成することができる
— Flashのプロジェクトを開くことができる（fla, xml）
— 衝突エリアの指定が可能（物理エンジンは使用しない）

15. Animation Editor
— 出力時、自動でテクスチャアトラスを作成してくれる
— cocos2d-xにおいて利用するクラス
— AmatureDataManagerクラス
— Armatureクラス

16. Animation Editor
— データの読み込み
ArmatureDataManager::getInstance()->
addArmatureFileInfo( xxx.ExportJson );
— オブジェクトの表示
auto obj = Armature::create( ArmatureName );
addChild(obj);
— アニメーション
obj->getAnimation()->play( AnimationName );

17. UI Editor
— UIおよびアニメーションを作成することができる
— 機能としてはCocosBuilderと同じようなことができる
— CocosBuilderのファイルを開くことができる（ccb）

18. UI Editor
— 14種類のオブジェクトをセットすることができる
— cocos2d-xにおいて利用するクラス
— UIxxxクラス

19. UI Editor
— UIWidgetクラスのインスタンスを取得
CCUIHELPER->createWidgetFromJsonFile( xxx.json )
— UILayerを利用して画面に表示
auto layer = UILayer::create();
layer->addWidget(widget);
addChild(layer);
— Widget名を利用してオブジェクト取得
auto obj = layer->getWidgetByName( ObjName );

20. UI Editor
— UIButtonに対するイベント追加
addTouchEventListner(this,
toucheventselector(xxx::yyy));
void xxx::yyy(Object* sender, TouchEventType type);
— ActionManagerExクラスによりアニメーション実行
ActionManagerEx::shareManager()->
playActionByName( xxx.json , AnimationName )

21. Scene Editor
— シーンを作成することができる
— Animation EditorやUI Editorで作成したノードを利用
— cocos2d-xにおいて利用するクラス
— SceneReaderクラス

22. Scene Editor
— Nodeクラスのインスタンスを取得
SceneReader::getInstance()->
createNodeWithSceneFile( xxx.json );
— オブジェクト取得
— Tagを利用してオブジェクトを取得することが可能

23. Data Editor
— エクセルデータをKey-Valueデータへ変換するための
確認ができる（xls, csv）
— JSON, SQLiteも将来的に対応予定
— xls, csvファイルをjsonへ変換できる
— cocos2d-xにおいて利用するクラス
— JsonDictionaryクラス

24. Data Editor
— データの作成
— Data Editorにてjsonファイルを出力する
— データの取得
— 現在CocoStudioで用意されているパーサーは
JsonDictionaryのみ（連想配列のみ対応？？）
— Array（一次元配列）に対するパーサーは将来的に実装
されるものと思われます
— 現在ルートがArrayのjsonは、spineで用意されている
パーサーを利用すると良いでしょう

25. おわり