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