CocoStudioとcocos2d-xの連携2

8,929 views

Published on

CocoStudioとcocos2d-xの連携2

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,929
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
22
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

CocoStudioとcocos2d-xの連携2

  1. 1. CocoStudioと cocos2d-xの連携2 (cocos2d-x 3.0rc0, CocoStudio 1.3) 株式会社TKS2 清水友晶
  2. 2. 清水 友晶 —  株式会社TKS2 スマートフォンアプリ開発 Webコンテンツ開発 —  日本cocos2d-xユーザ会代表 講演活動 執筆活動 —  チラ裏開発メモ: http://tks2.net/memo —  SlideShare: http://www.slideshare.net/doraemonsss
  3. 3. —  6/25発売 —  2,800円 + 税 —  400ページ —  6/18発売 —  2,980円 + 税 —  312ページ —  日経ソフトウェア 2014年2月号
  4. 4. —  日本cocos2d-xユーザ会 http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! (1300人以上参加) —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/cocos2dxjp/
  5. 5. —  3/30 第18回 shinjuku.cocos2d-x —  4/18 第19回 shinjuku.cocos2d-x
  6. 6. 目次 —  cocos2d-x 3.0rc0におけるプロジェクト作成 —  setup.py —  cocosコマンド —  CocoStudioについて —  UI Editorの使い方 —  cocos2d-xでUIの表示 —  Animation Editorの使い方 —  cocos2d-xでAnimationの表示 —  実際にさわってみよう!
  7. 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. 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. 9. CocoStudioについて —  CocoStudioの起動画面
  10. 10. Animation Editor —  スケルタルアニメーション(ボーンアニメーション)を 作成することができる —  Flashのプロジェクトを開くことができる(fla, xml) —  出力時、自動でテクスチャアトラスを作成してくれる
  11. 11. UI Editor —  UIおよびアニメーションを作成することができる —  機能としてはCocosBuilderと同じようなことができる —  CocosBuilderのファイルを開くことができる(ccb)
  12. 12. Scene Editor —  シーンを作成することができる —  Animation EditorやUI Editorで作成したノードを利用 —  クロスプラットフォーム対応プロジェクトを作成でき る(cocos2d-x 2.2.3)
  13. 13. Data Editor —  エクセルデータをKey-Valueデータへ変換するための 確認ができる(xls, csv) —  JSON, SQLiteも将来的に対応予定 —  xls, csvファイルをjsonへ変換できる
  14. 14. UI Editorの使い方 デモ
  15. 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. 16. Animation Editorの使い方 デモ
  17. 17. cocos2d-xでAnimationの表示 —  アニメーションデータは、ArmatureDataManagerクラスで 事前に読み込んでおく ArmatureDataManager::getInstance()->addArmatureFileInfo("xxx.ExportJson"); —  キャラクタの生成は、Armatureクラスを利用する auto character = Armature::create("xxx"); —  キャラクタのアニメーションは、ArmatureAnimationクラ スで管理する character->getAnimation()->play("xxx");
  18. 18. 実際にさわってみよう! —  これから利用するリソースはこちら —  http://goo.gl/kkbCZB
  19. 19. 画面を縦に設定する —  Device Orientationの設定 —  RootViewController.mmの変更 —  58行目 return UIInterfaceOrientationIsPortrait( interfaceOrientation ); —  64行目 return UIInterfaceOrientationMaskPortrait;
  20. 20. 背景の表示 —  GUIReaderクラスにより、Background.ExportJson からレイヤーを取得する —  auto layout = dynamic_cast<Layout*>(GUIReader::getInstance()- >widgetFromJsonFile("JumpingPenguinUI/ Background.ExportJson")); —  位置調整を行う —  ソース —  http://goo.gl/5PKGNx
  21. 21. キャラクタの表示 —  ArmatureDataManagerクラスにより、キャラクタ データを取得する —  ArmatureDataManager::getInstance()- >addArmatureFileInfo( xxx.ExportJson"); —  キャラクタの生成 —  _penguin = Armature::create( xxx"); —  ソース —  http://goo.gl/svlMoa
  22. 22. スタートの表示 —  ActionManagerExクラスにより、UIのアニメーション を実行する —  ActionManagerEx::getInstance()- >playActionByName("xxx.ExportJson", "xxx"); —  ソース —  http://goo.gl/ZOf0X2
  23. 23. タップイベントの設定 —  ボタンに対してaddTouchEventListener関数によりイ ベントを追加する —  auto goButton = dynamic_cast<Button*>(layer- >getChildByName("Go")); —  goButton->addTouchEventListener(this, toucheventselector(HelloWorld::goCallback)); —  ソース —  http://goo.gl/ZeBTfa
  24. 24. おわり —  ありがとうございました

×