CocosBuilderとcocos2d-x JSB

1. CocosBuilderとcocos2d-x
JavaScript Bindings
株式会社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発売
— 2,800円 ＋ 税
— 400ページ
— 6/18発売
— 2,980円 ＋ 税
— 312ページ

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

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. 目次
— CocosBuilderとは
— CocosBuilderデモ
— 本に載っていない使い方
— CocosBuilderに関するハンズオンの紹介

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. 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. 注意
— 今回は以下のバージョンで進めます
— CocosBuilder 3.0 alpha5
— 本日のスライド
http://www.slideshare.net/doraemonsss/
— 必要なリソース
http://tks2.net/nyanrun/images.zip

10. CocosBuilderの使い方1
— 基本設定
— プロジェクトの作成
— デフォルトではJSB向けの設定になっている
ècocos2d-x向けの設定に変更
— 出力設定
— 解像度追加・変更
— 表示設定
— 解像度変更
— 見た目の変更
cocos2d-x-3.0alpha0-pre/samples/Cpp/TestCpp/Resources/
CocosBuilderExample.ccbproj

11. CocosBuilderの使い方2
— リソース追加
— 画像・テクスチャアトラス
— パーティクル
— クラス追加
— 画像の調整
— アニメーション編集
— タイムラインの追加
— スティッキーノート追加

12. 簡単なゲームを作ってみる

13. 簡単なゲームを作ってみる
— タップしてネコを走らせるゲームを作ります
— 単純すぎてゴメンなさい。。。
— でも基本的な機能は全部盛り込んでいます
— CocosBuilderファイルの作成
— ボタンタップイベントの取得
— 他のオブジェクトの取得
— 複数アニメーションの設定
— 時間の都合上、解像度480 x 320のみの説明とします
— CocosBuilderとcocos2d-xのマルチレゾリューションサポー
トを利用して簡単に対応できますが、いろいろと罠が潜んでい
ます。詳細については執筆中の本にて書く予定です。
— http://tks2.net/nyanrun/images_js.zip

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. (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. (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. (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. (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. (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. (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. (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. (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. おわり
— ご清聴ありがとうございました。