CocosBuilderとcocos2d-x JSB

11,963 views

Published on

CocosBuilderとcocos2d-x JSB

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,963
On SlideShare
0
From Embeds
0
Number of Embeds
9,257
Actions
Shares
0
Downloads
12
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CocosBuilderとcocos2d-x JSB

  1. 1. CocosBuilderとcocos2d-x JavaScript Bindings 株式会社TKS2 清水友晶
  2. 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. 3. —  6/25発売 —  2,800円 + 税 —  400ページ —  6/18発売 —  2,980円 + 税 —  312ページ
  4. 4. —  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/cocos2dxjp/
  5. 5. —  8/23 第2回cocos2d-x開発技術勉強会 —  8/29 第11回 shinjuku.cocos2d-x —  9/12 shinjuku.cocos2d-x初心者ハンズオン     ∼cocos2d-xを利用したクロスプラットフォーム開発環境構築∼ —  9/26 第12回 shinjuku.cocos2d-x —  10/M shinjuku.cocos2d-x初心者ハンズオン     ∼CocosBuilderを利用した開発の進め方∼ —  10/M 第13回 shinjuku.cocos2d-x
  6. 6. 目次 —  CocosBuilderとは —  CocosBuilderデモ —  本に載っていない使い方 —  CocosBuilderに関するハンズオンの紹介
  7. 7. CocosBuilderとは —  http://cocosbuilder.com —  cocos2dのレイアウトやアニメーションをGUIで調整可能 —  オープンソース(MITライセンス) —  最新版CocosBuilder 3.0 Alpha —  JSB(JavaScript bindings)の機能が大幅に追加 —  CocosPlayer (for JSB) —  cocos2d-xやcocos2d-iphoneでも利用可能 —  cocos2d-xではCCBReaderクラスを利用して連携可能 —  初心者向けの主な情報源 —  CocosBuilder User Guide —  cocos2d-xサンプル「TestCpp」
  8. 8. CocosBuilderでの注意 —  次のバージョンに揃える必要がある —  cocos2d-x 2.1.4 (cocos2d-x 3.0 alpha0-pre) —  CocosBuilder 3.0 alpha 5 —  Mac OS X 10.8を使用すること —  Mac OS X 10.7以前の場合、ファイルを読込めないバグがある —  参考になるプロジェクト —  cocos2d-xプロジェクト —  cocos2d-x-2.1.4/samples/Cpp/TestCpp —  CocosBuilderプロジェクト —  cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/ CocosBuilderExample.ccbproj
  9. 9. 注意 — 今回は以下のバージョンで進めます —  CocosBuilder 3.0 alpha5 —  本日のスライド http://www.slideshare.net/doraemonsss/ —  必要なリソース http://tks2.net/nyanrun/images.zip
  10. 10. CocosBuilderの使い方1 —  基本設定 —  プロジェクトの作成 —  デフォルトではJSB向けの設定になっている ècocos2d-x向けの設定に変更 —  出力設定 —  解像度追加・変更 —  表示設定 —  解像度変更 —  見た目の変更 cocos2d-x-3.0alpha0-pre/samples/Cpp/TestCpp/Resources/ CocosBuilderExample.ccbproj
  11. 11. CocosBuilderの使い方2 —  リソース追加 —  画像・テクスチャアトラス —  パーティクル —  クラス追加 —  画像の調整 —  アニメーション編集 —  タイムラインの追加 —  スティッキーノート追加
  12. 12. 簡単なゲームを作ってみる
  13. 13. 簡単なゲームを作ってみる —  タップしてネコを走らせるゲームを作ります —  単純すぎてゴメンなさい。。。 —  でも基本的な機能は全部盛り込んでいます —  CocosBuilderファイルの作成 —  ボタンタップイベントの取得 —  他のオブジェクトの取得 —  複数アニメーションの設定 —  時間の都合上、解像度480 x 320のみの説明とします —  CocosBuilderとcocos2d-xのマルチレゾリューションサポー トを利用して簡単に対応できますが、いろいろと罠が潜んでい ます。詳細については執筆中の本にて書く予定です。 —  http://tks2.net/nyanrun/images_js.zip
  14. 14. cocos2d-x JSBとの連携 —  Android —  読み込むリソースディレクトリをPublished- Androidとするだけ —  iOS —  cocos2d-xでプロジェクトを作成し、 ResourcesディレクトリにPublished-iOS ディレクトリを配置する —  AppDelegate::applicationDidFinishLaunchi ng内で次のコードを書く vector<std::string> searchPaths; searchPaths.push_back("Published-iOS"); CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);
  15. 15. (1) CocosBuilderで画面を作成 —  CocosBuilderプロジェクトの作成 —  リソースの追加 —  画像の配置 —  bg1.png … Pos(%)x=0:y=100, Anc x=0.0:y=1.0 —  bg2.png … Pos(%)x=0:y= 25, Anc x=0.0:y=0.5 —  bg3.png … Pos(%)x=0:y= 0, Anc x=0.0:y=0.0 —  cat_normal.png … Pos(%)x=25:y=35, Anc x=0.5:y=0.5 —  CocosPlayerでの確認
  16. 16. (2) タップイベントを取得 —  CocosBuilderプロジェクトの編集 —  ボタンの配置 —  CCMenu … Pos x=0:y=0, Size(%)x=100.0:y=100.0 —  CCMenuItemImage … Pos(%) x=40:y=15 Selector:tappedLeftFoot Target:Document root —  CCMenuItemImage … Pos(%) x=60:y=15 Selector:tappedRightFoot Target:Document root —  レイヤー編集 —  CCLayer … JS Controller: MainScene —  ソースの編集 —  MainScene.js https://gist.github.com/tks2shimizu/ 8ab5369d507ed02bf726 Normal Selected Disabled
  17. 17. (3) 他オブジェクトを取得 —  CocosBuilderプロジェクトの編集 —  背景編集 —  bg1.png … Doc root var: mBg1 —  bg2.png … Doc root var: mBg2 —  bg3.png … Doc root var: mBg3 —  cat_normal.png … Tag: 1 —  ソースの編集 —  MainScene.js https://gist.github.com/tks2shimizu/ 2e935cde627ea2d245cd
  18. 18. (4) 基本アニメーション —  CocosBuilderプロジェクトの編集 —  ネコ編集(後で必要なので、今のうちに編集) —  CCNode … Pos(%) x=25:y=35, Size W=72:H=123, Anc x=0.50:y=0.50, Tag:1 —  cat … Pos(%) x=50:y=25, Anc x=0.50:y=0.25 —  タイムライン編集 —  cat … Default Timeline (duration 00:00:20) —  00:00:00 … Rotation = 3 —  00:00:10 … Rotation = -3 —  00:00:20 … Rotation = 3 —  Chained Timeline … Default Timeline
  19. 19. (5) 複数アニメーション —  CocosBuilderプロジェクトの編集 —  タイムライン編集 (詳細は後述) —  Leftfoot (duration 00:00:10) —  Rightfoot (duration 00:00:10) —  Tumble —  Normal —  Goal (duration 00:00:15) —  ソースの編集 —  MainScene.js https://gist.github.com/tks2shimizu/ 216e7899bf38a810952f
  20. 20. (5) 複数アニメーション —  Leftfoot —  00:00:00 … Sprite frame: cat_leftfoot.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=27 —  00:00:10 … Position: (%) x=50:y=25 —  Rightfoot —  00:00:00 … Sprite frame: cat_rightfoot.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=27 —  00:00:10 … Position: (%) x=50:y=25
  21. 21. (5) 複数アニメーション —  Tumble —  00:00:00 … Sprite frame: cat_tumble.png —  00:00:00 … Rotation: 90.0 —  00:01:00 … Callbacks: changeTappable Document root —  Goal —  00:00:00 … Sprite frame: cat_goal.png —  00:00:00 … Position: (%) x=50:y=25 —  00:00:05 … Position: (%) x=50:y=33 —  00:00:10 … Sprite frame: cat_normal.png —  00:00:10 … Position: (%) x=50:y=25 —  Chained Timeline … Goal
  22. 22. (6) 時間・距離・リロード —  CocosBuilderプロジェクトの編集 —  ラベル追加 —  時間 … Doc root var: mTime —  距離 … Doc root var: mDistance —  ボタン追加 —  リセットボタン … Selector:tappedReset Target:Document root —  左足ボタン … Doc root var: mLeftButton —  右足ボタン … Doc root var: mRightButton —  ソースの編集 —  MainScene.js https://gist.github.com/tks2shimizu/ 7716bdc9ab3f1a661197 Normal Selected Disabled
  23. 23. おわり —  ご清聴ありがとうございました。

×