CocosBuilderとcocos2d-x JSB
-
Upload
tomoaki-shimizu -
Category
Documents
-
view
9.054 -
download
2
description
Transcript of CocosBuilderとcocos2d-x JSB
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
おわり � ご清聴ありがとうございました。