CocosBuilderを利用した開発の進め方

CocosBuilderを利用した開発の進め方
CocosBuilderを利用した開発の進め方株式会社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発売 —  6/18発売 —  2,800円＋税 —  2,980円＋税 —  400ページ —  312ページ
—  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/cocos2dxjp/
—  10/17 shinjuku.cocos2d-x初心者ハンズオン ∼CocosBuilderを利用した開発の進め方∼ —  10/24 第13回 shinjuku.cocos2d-x —  11/12 第7回テックヒルズ —  11/14 shinjuku.cocos2d-x初心者ハンズオン ∼cocos2d-xを利用したクロスプラットフォーム開発環境構築∼ —  11/21 第14回 shinjuku.cocos2d-x —  12/M shinjuku.cocos2d-x初心者ハンズオン ∼CocosBuilderを利用した開発の進め方∼ —  12/M 第15回 shinjuku.cocos2d-x
CocosBuilderとは —  http://cocosbuilder.com —  cocos2dのレイアウトやアニメーションをGUIで調整可能 —  オープンソース(MITライセンス) —  最新版CocosBuilder 3.0 Alpha —  JSB(JavaScript bindings)の機能が大幅に追加 —  CocosPlayer (for JSB) —  cocos2d-xやcocos2d-iphoneでも利用可能 —  cocos2d-x(C++)ではCCBReaderクラスを利用して連携可能 —  初心者向けの主な情報源 —  CocosBuilder User Guide —  cocos2d-xサンプル「TestCpp」
CocosBuilderとは —  CocosBuilderはViktor Lidholt氏によって開発された —  Viktor Lidholt氏 —  2011年 CocosBuilderの開発を行う —  2012年2月 Zynga社 —  2013年6月 Apportable社 —  Viktor Lidholt氏によるCocosBuilderの開発は2013年6月で止まっている https://github.com/cocos2d/CocosBuilder/network —  CocosBuilderがオープンソース(MIT)でありGitHubで公開されているため、その改修を行うことも可能 —  現在も多くForkされており開発が続いている —  tiantian2007氏 —  ovenbits氏 CocosBuilderはこのまま死んでしまうのか。。。
SpriteBuilder — CocosBuilderの後継 —  Apportable社(恐らくViktor氏)によりSpriteBuilderが開発されている —  SpriteBuilderのホームページはまだないようです —  GitHub https://github.com/apportable/SpriteBuilder
CocosBuilderで利用できる機能 —  cocos2d-x —  JavaScript —  UI Editor, Animation Editor —  JavaScript Editor, CocosPlayer —  C++ —  Lua —  UI Editor, Animation Editor —  cocos2d-html5 —  JavaScript —  UI Editor, Animation Editor —  JavaScript Editor, Browser テストが容易
今日学べること —  主に学ぶこと —  CocosBuilderの使い方 —  UI Editor —  Animation Editor —  ちょっと学ぶこと —  手軽に利用できるブラウザで表示 —  JavaScriptを利用して実行 —  画面の表示 —  アニメーションの実行
CocosBuilderの使い方1 —  基本設定 —  プロジェクトの作成 —  デフォルトではJSB向けの設定になっている èC++で利用する場合は設定の変更が必要 —  出力設定 —  解像度追加・変更 —  表示設定 —  解像度変更 —  見た目の変更
CocosBuilderの使い方2 —  リソース追加 —  画像・テクスチャアトラス —  パーティクル —  クラス追加 —  画像の調整 —  アニメーション編集 —  タイムラインの追加 —  スティッキーノート追加
CocosBuilderにふれてみよう —  プロジェクトの作成 —  背景画像の表示 —  キャラクターノードの作成 —  ボタンの作成 —  ボタンの処理（JavaScript） —  キャラクターのアニメーション作成 —  アニメーションの実行（JavaScript）
プロジェクトの作成 —  新しいプロジェクトは、任意のディレクトリに保存 —  ディレクトリには、以下が用意される —  Resourcesディレクトリ —  プロジェクトファイル —  次のURLより画像ファイルをダウンロードする http://goo.gl/eEmfAz —  画像ファイルは「resources-auto」へ配置する
背景画像の表示 —  「background.png」を左ペインから中央ペインへ、ドラッグ＆ドロップする —  「background」のプロパティの調整 —  Position … % —  x … 50.0 —  y … 50.0
背景画像の表示 —  「Publish Settings ...」よりプロパティを修正する —  HTML5 —  Global scale factor … 2x —  Resolution —  width … 1024 —  height … 768 —  「Run in Browser」よりブラウザ上で実行する
キャラクターノードの作成 —  キャラクターを表示させるだけであれば、ノードを別に用意する必要はない。後の工程でノードにアニメーションを追加するため、今回は別に用意する。 —  ノードの作成 —  New > Interface File —  CCNodeを選択 —  Resourcesに「Cat」を作成 —  ルートノード「CCNode」を編集 —  CCSpriteを追加 —  Sprite farame è cat_normal.png —  MainScene.ccbにCat.ccbを追加
ボタンの作成 —  MainScene.ccbを表示し、ルートノード「CCLayer」を選択 —  CCMenuを追加 —  CCMenuItemImageを追加 —  —  —  —  Normal è button_normal.png Selected è button_selected.png Selector è onPressButton Target è Document root
ボタンの処理（JavaScript） —  catの編集 —  Code Connections —  Doc root var è cat —  MainScene.jsの編集 —  onPressButtonメソッドの編集 —  this.helloLabel è this.cat —  ボタンをタップすると！！
キャラクターのアニメーション作成 —  Cat.ccbの編集 —  Edit timelines ... —  Timeline name è Run —  Autoplay è OFF —  ネコの画像を示す「CCSprite」を選択する —  Animation > Insert Keyframe > Sprite Frame —  can_run1.png —  can_run2.png —  Set Timeline Duration ... —  Timeline duration è 00:03:00
アニメーションの実行（JavaScript） —  MainScene.jsの編集 —  onPressButtonメソッドの編集 —  this.cat.animationManager.runAnimationsForSequence Named("Run"); —  ボタンをタップすると！！！ —  作成したアニメーションを動かすことができる！
CocosBuilderでの注意 —  次のバージョンに揃える必要がある —  cocos2d-x 2.1.3 è CocosBuilder 3.0 alpha 4 —  それ以降のバージョン è CocosBuilder 3.0 alpha 5 —  Mac OS X 10.8を使用すること —  Mac OS X 10.7以前の場合、ファイルを読込めないバグがある —  オープンソースであるため、10.7に合わせCocosBuilderをビルドすることも可能 —  参考になるプロジェクト —  cocos2d-xプロジェクト —  cocos2d-x-2.1.4/samples/Cpp/TestCpp —  CocosBuilderプロジェクト —  cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/ CocosBuilderExample.ccbproj
本に載っていない情報 —  ガイド —  効果音 —  コールバック関数 —  パーティクル —  タイムラインの編集 —  Sprite Sheetの取り込み —  Smart Sprite Sheetの利用 —  CocosPlayer —  cocos2d-xからCocosBuilderのリソースを直接読込む
ガイド —  ガイドの移動 —  command + クリック è マウスの移動 —  ガイドの削除 —  ガイドを画面外へ移動する —  ガイドにスナップ —  できません。ソース上でコメントアウトされている —  なぜ使用不可なのか不明… —  CocosScene.m 823 843行目をアンコメントし、適切に修正することで利用可能になるかも?
効果音 —  キーフレームの追加は、alt + クリック —  設定はキーフレームをダブルクリック —  Resourcesに含まれる音声ファイルから選択
コールバック関数 —  キーフレームの追加は、alt + クリック —  設定はキーフレームをダブルクリック —  onResolveCCBCallFuncSelector関数にて設定 è CCB_SELECTORRESOLVER_CALLFUNC_GLUEマクロ
パーティクル —  FXボタンをクリックするとパーティクルが作成できる —  使い勝手はParticleDesignerの方が良い
タイムラインの編集 —  キーフレームをダブルクリックすることにより、簡単に編集可能 —  キーフレームのコピー&ペーストが可能 —  キーフレームを複数選択することで、Animationメニューより次の項目が利用可能 —  Reverse Selected Keyframes èキーフレームの順序を反転する —  Stretch Selected Keyframes... èキーフレームの間隔を変更する
Sprite Sheetの取り込み —  TexturePackerなどで作成されたSprite Sheetは、 CocosBuilderから読み込み可能なディレクトリに配置するだけで利用可能 —  xxxx.plist —  xxxx.png —  一連の画像から一度にキーフレームを作成することが可能 —  Create Keyframes from Selection
Smart Sprite Sheetの利用 —  ディレクトリのコンテキストメニュー —  Make Smart Sprite Sheetを選択 —  Edit Smart Sprite Sheet...を選択
CocosPlayer —  インストール方法 —  CocosBuilderのサイトよりCocosBuilderのソースコードをダウンロードする —  CocosPlayerのXcodeプロジェクトを立ち上げ、iOSシミュレータまたは実機にインストールする —  Xcode5の場合、一部修正が必要
cocos2d-xからCocosBuilder のリソースを直接読込む —  iOS, Androidそれぞれ個別に設定が必要 —  iOS —  AppDelegateクラスにおいて、パスを設定する CCFileUtilsクラスsetSearchPaths関数の利用 —  Android —  build_native.shの編集 RESOURCE_ROOTの設定 —  サンプル「CrystalCraze」が参考になる cocos2d-x-2.1.4/samples/Javascript/CrystalCraze
おわり

Check these out next

CocosBuilderを利用した開発の進め方

Recommandé

Contenu connexe

Présentations pour vous(20)

En vedette(8)

Similaire à CocosBuilderを利用した開発の進め方(20)

Plus de Tomoaki Shimizu(20)

CocosBuilderを利用した開発の進め方