CocosBuilderとcocos2d-x JavaScript Bindings

株式会社TKS2 清水友晶

清水 友晶 �  株式会社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

�  6/25発売 �  2,800円 ＋ 税 �  400ページ

�  6/18発売 �  2,980円 ＋ 税 �  312ページ

�  http://cocos2d-x.jp

�  cocos2d-x開発元Chukong Technologies社公認

�  cocos2d-xのための自由なコミュニティー

�  入門者から上級者まで誰でもOK!!ぜひご参加を!

�  cocos2d-xに関することなら何でも投稿できます!!

�  https://www.facebook.com/groups/cocos2dxjp/

�  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

目次 �  CocosBuilderとは

�  CocosBuilderデモ

�  本に載っていない使い方

�  CocosBuilderに関するハンズオンの紹介

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」

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

注意 � 今回は以下のバージョンで進めます � CocosBuilder 3.0 alpha5

� 本日のスライド http://www.slideshare.net/doraemonsss/

� 必要なリソース http://tks2.net/nyanrun/images.zip

CocosBuilderの使い方1 �  基本設定

�  プロジェクトの作成 �  デフォルトではJSB向けの設定になっている

ècocos2d-x向けの設定に変更 �  出力設定 �  解像度追加・変更

�  表示設定 �  解像度変更 �  見た目の変更

cocos2d-x-3.0alpha0-pre/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj

CocosBuilderの使い方2 �  リソース追加

�  画像・テクスチャアトラス �  パーティクル

�  クラス追加 �  画像の調整

�  アニメーション編集 �  タイムラインの追加

�  スティッキーノート追加

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

簡単なゲームを作ってみる �  タップしてネコを走らせるゲームを作ります

�  単純すぎてゴメンなさい。。。

�  でも基本的な機能は全部盛り込んでいます �  CocosBuilderファイルの作成 �  ボタンタップイベントの取得 �  他のオブジェクトの取得 �  複数アニメーションの設定

�  時間の都合上、解像度480 x 320のみの説明とします �  CocosBuilderとcocos2d-xのマルチレゾリューションサポートを利用して簡単に対応できますが、いろいろと罠が潜んでいます。詳細については執筆中の本にて書く予定です。

�  http://tks2.net/nyanrun/images_js.zip

cocos2d-x JSBとの連携 �  Android

�  読み込むリソースディレクトリをPublished-Androidとするだけ

�  iOS �  cocos2d-xでプロジェクトを作成し、ResourcesディレクトリにPublished-iOSディレクトリを配置する

�  AppDelegate::applicationDidFinishLaunching内で次のコードを書く

vector<std::string> searchPaths; searchPaths.push_back("Published-iOS"); CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);

(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での確認

(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

(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

(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

(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

(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

(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

(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

おわり �  ご清聴ありがとうございました。