CocoStudioとcocos2d-xの連携2

1. CocoStudioと
cocos2d-xの連携2
(cocos2d-x 3.0rc0, CocoStudio 1.3)
株式会社TKS2 清水友晶

2. 清水 友晶
— 株式会社TKS2
スマートフォンアプリ開発
Webコンテンツ開発
— 日本cocos2d-xユーザ会代表
講演活動
執筆活動
— チラ裏開発メモ: http://tks2.net/memo
— SlideShare:
http://www.slideshare.net/doraemonsss

3. — 6/25発売
— 2,800円 ＋ 税
— 400ページ
— 6/18発売
— 2,980円 ＋ 税
— 312ページ
— 日経ソフトウェア
2014年2月号

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

5. — 3/30 第18回 shinjuku.cocos2d-x
— 4/18 第19回 shinjuku.cocos2d-x

6. 目次
— cocos2d-x 3.0rc0におけるプロジェクト作成
— setup.py
— cocosコマンド
— CocoStudioについて
— UI Editorの使い方
— cocos2d-xでUIの表示
— Animation Editorの使い方
— cocos2d-xでAnimationの表示
— 実際にさわってみよう！

7. cocos2d-x 3.0rc0における
プロジェクト作成
— setup.py
— 環境変数の設定を行うことができる
— COCOS_CONSOLE_ROOT
— NDK_ROOT
— ANDROID_SDK_ROOT
— ANT_ROOT
— cocosコマンドでAndroid向けビルドをするには、
Android NDK, Android SDK, ANTが必要になるため、
チェックの意味も含めて実行してみるといい

8. cocos2d-x 3.0rc0における
プロジェクト作成
— cocosコマンド
— new
— クロスプラットフォーム対応プロジェクトの生成を行うことが
できる
— プロジェクト名
— -p … パッケージ名
— -d … ディレクトリ
— -l … 言語(cpp, lua, js)
— ./cocos new MyProject -p net.tks2.MyProject -d -l cpp
— run
— 指定プラットフォームのビルドを行い、シミュレータまたは実
機で実行することができる
— -p … プラットフォーム(android, ios, mac, web, win32, linux)
— -m … モード(debug, release)
— ./cocos run -s /MyProject -p android

9. CocoStudioについて
— CocoStudioの起動画面

10. Animation Editor
— スケルタルアニメーション（ボーンアニメーション）を
作成することができる
— Flashのプロジェクトを開くことができる（fla, xml）
— 出力時、自動でテクスチャアトラスを作成してくれる

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

12. Scene Editor
— シーンを作成することができる
— Animation EditorやUI Editorで作成したノードを利用
— クロスプラットフォーム対応プロジェクトを作成でき
る(cocos2d-x 2.2.3)

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

14. UI Editorの使い方
デモ

15. cocos2d-xでUIの表示
— 各パーツはGUIReaderクラスを利用しファイルから読み込
む
GUIReader::getInstance()->widgetFromJsonFile("xxx.ExportJson");
— UI Editorで作成したアニメーションは、
ActionManagerExクラスを利用して実行する
ActionManagerEx::getInstance()->playActionByName("xxx.ExportJson",
"XXXXX");
— ボタンのタップイベントは、ボタンのNodeを取得し、
addTouchEventListener関数を利用して追加する
button->addTouchEventListener(this, toucheventselector(HelloWorld::xxx));

16. Animation Editorの使い方
デモ

17. cocos2d-xでAnimationの表示
— アニメーションデータは、ArmatureDataManagerクラスで
事前に読み込んでおく
ArmatureDataManager::getInstance()->addArmatureFileInfo("xxx.ExportJson");
— キャラクタの生成は、Armatureクラスを利用する
auto character = Armature::create("xxx");
— キャラクタのアニメーションは、ArmatureAnimationクラ
スで管理する
character->getAnimation()->play("xxx");

18. 実際にさわってみよう！
— これから利用するリソースはこちら
— http://goo.gl/kkbCZB

19. 画面を縦に設定する
— Device Orientationの設定
— RootViewController.mmの変更
— 58行目
return UIInterfaceOrientationIsPortrait( interfaceOrientation );
— 64行目
return UIInterfaceOrientationMaskPortrait;

20. 背景の表示
— GUIReaderクラスにより、Background.ExportJson
からレイヤーを取得する
— auto layout =
dynamic_cast<Layout*>(GUIReader::getInstance()-
>widgetFromJsonFile("JumpingPenguinUI/
Background.ExportJson"));
— 位置調整を行う
— ソース
— http://goo.gl/5PKGNx

21. キャラクタの表示
— ArmatureDataManagerクラスにより、キャラクタ
データを取得する
— ArmatureDataManager::getInstance()-
>addArmatureFileInfo( xxx.ExportJson");
— キャラクタの生成
— _penguin = Armature::create( xxx");
— ソース
— http://goo.gl/svlMoa

22. スタートの表示
— ActionManagerExクラスにより、UIのアニメーション
を実行する
— ActionManagerEx::getInstance()-
>playActionByName("xxx.ExportJson", "xxx");
— ソース
— http://goo.gl/ZOf0X2

23. タップイベントの設定
— ボタンに対してaddTouchEventListener関数によりイ
ベントを追加する
— auto goButton = dynamic_cast<Button*>(layer-
>getChildByName("Go"));
— goButton->addTouchEventListener(this,
toucheventselector(HelloWorld::goCallback));
— ソース
— http://goo.gl/ZeBTfa

24. おわり
— ありがとうございました