Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a CocosBuilderを利用した開発の進め方
Similar a CocosBuilderを利用した開発の進め方 (20)
Más de Tomoaki Shimizu
Más de Tomoaki Shimizu (20)
CocosBuilderを利用した開発の進め方
- 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発売 — 6/18発売 — 2,800円 ＋ 税 — 2,980円 ＋ 税 — 400ページ — 312ページ
- 4. — http://cocos2d-x.jp — cocos2d-x開発元Chukong Technologies社公認 — cocos2d-xのための自由なコミュニティー — 入門者から上級者まで誰でもOK!!ぜひご参加を! — cocos2d-xに関することなら何でも投稿できます!! — https://www.facebook.com/groups/cocos2dxjp/
- 5. — 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
- 6. 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」
- 7. 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はこのまま死んでしまうのか。。。
- 8. SpriteBuilder — CocosBuilderの後継 — Apportable社(恐らくViktor氏)によりSpriteBuilderが開 発されている — SpriteBuilderのホームページはまだないようです — GitHub https://github.com/apportable/SpriteBuilder
- 9. 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 テストが容易
- 10. 今日学べること — 主に学ぶこと — CocosBuilderの使い方 — UI Editor — Animation Editor — ちょっと学ぶこと — 手軽に利用できるブラウザで表示 — JavaScriptを利用して実行 — 画面の表示 — アニメーションの実行
- 11. CocosBuilderの使い方1 — 基本設定 — プロジェクトの作成 — デフォルトではJSB向けの設定になっている èC++で利用する場合は設定の変更が必要 — 出力設定 — 解像度追加・変更 — 表示設定 — 解像度変更 — 見た目の変更
- 12. CocosBuilderの使い方2 — リソース追加 — 画像・テクスチャアトラス — パーティクル — クラス追加 — 画像の調整 — アニメーション編集 — タイムラインの追加 — スティッキーノート追加
- 13. CocosBuilderにふれてみよう — プロジェクトの作成 — 背景画像の表示 — キャラクターノードの作成 — ボタンの作成 — ボタンの処理（JavaScript） — キャラクターのアニメーション作成 — アニメーションの実行（JavaScript）
- 14. プロジェクトの作成 — 新しいプロジェクトは、任意のディレクトリに保存 — ディレクトリには、以下が用意される — Resourcesディレクトリ — プロジェクトファイル — 次のURLより画像ファイルを ダウンロードする http://goo.gl/eEmfAz — 画像ファイルは「resources-auto」へ配置する
- 15. 背景画像の表示 — 「background.png」を左ペインから中央ペインへ、 ドラッグ＆ドロップする — 「background」のプロパティの調整 — Position … % — x … 50.0 — y … 50.0
- 16. 背景画像の表示 — 「Publish Settings ...」よりプロパティを修正する — HTML5 — Global scale factor … 2x — Resolution — width … 1024 — height … 768 — 「Run in Browser」より ブラウザ上で実行する
- 17. キャラクターノードの作成 — キャラクターを表示させるだけであれば、ノードを別に用 意する必要はない。後の工程でノードにアニメーションを 追加するため、今回は別に用意する。 — ノードの作成 — New > Interface File — CCNodeを選択 — Resourcesに「Cat」を作成 — ルートノード「CCNode」を編集 — CCSpriteを追加 — Sprite farame è cat_normal.png — MainScene.ccbにCat.ccbを追加
- 18. ボタンの作成 — MainScene.ccbを表示し、ルートノード「CCLayer」 を選択 — CCMenuを追加 — CCMenuItemImageを追加 — — — — Normal è button_normal.png Selected è button_selected.png Selector è onPressButton Target è Document root
- 19. ボタンの処理（JavaScript） — catの編集 — Code Connections — Doc root var è cat — MainScene.jsの編集 — onPressButtonメソッドの編集 — this.helloLabel è this.cat — ボタンをタップすると！！
- 20. キャラクターのアニメーション作成 — 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
- 21. アニメーションの実行 （JavaScript） — MainScene.jsの編集 — onPressButtonメソッドの編集 — this.cat.animationManager.runAnimationsForSequence Named("Run"); — ボタンをタップすると！！！ — 作成したアニメーションを 動かすことができる！
- 22. 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
- 23. 本に載っていない情報 — ガイド — 効果音 — コールバック関数 — パーティクル — タイムラインの編集 — Sprite Sheetの取り込み — Smart Sprite Sheetの利用 — CocosPlayer — cocos2d-xからCocosBuilderのリソースを直接読込む
- 24. ガイド — ガイドの移動 — command + クリック è マウスの移動 — ガイドの削除 — ガイドを画面外へ移動する — ガイドにスナップ — できません。ソース上でコメントアウトされている — なぜ使用不可なのか不明… — CocosScene.m 823 843行目をアンコメントし、適切 に修正することで利用可能になるかも?
- 25. 効果音 — キーフレームの追加は、alt + クリック — 設定はキーフレームをダブルクリック — Resourcesに含まれる音声ファイルから選択
- 26. コールバック関数 — キーフレームの追加は、alt + クリック — 設定はキーフレームをダブルクリック — onResolveCCBCallFuncSelector関数にて設定 è CCB_SELECTORRESOLVER_CALLFUNC_GLUEマクロ
- 28. タイムラインの編集 — キーフレームをダブルクリックすることにより、簡単 に編集可能 — キーフレームのコピー&ペーストが可能 — キーフレームを複数選択することで、Animationメ ニューより次の項目が利用可能 — Reverse Selected Keyframes èキーフレームの順序を反転する — Stretch Selected Keyframes... èキーフレームの間隔を変更する
- 29. Sprite Sheetの取り込み — TexturePackerなどで作成されたSprite Sheetは、 CocosBuilderから読み込み可能なディレクトリに配置する だけで利用可能 — xxxx.plist — xxxx.png — 一連の画像から一度にキーフレームを作成することが可能 — Create Keyframes from Selection
- 30. Smart Sprite Sheetの利用 — ディレクトリのコンテキストメニュー — Make Smart Sprite Sheetを選択 — Edit Smart Sprite Sheet...を選択
- 31. CocosPlayer — インストール方法 — CocosBuilderのサイトよりCocosBuilderのソースコー ドをダウンロードする — CocosPlayerのXcodeプロジェクトを 立ち上げ、iOSシミュレータまたは実機 にインストールする — Xcode5の場合、一部修正が必要
- 32. cocos2d-xからCocosBuilder のリソースを直接読込む — iOS, Androidそれぞれ個別に設定が必要 — iOS — AppDelegateクラスにおいて、パスを設定する CCFileUtilsクラスsetSearchPaths関数の利用 — Android — build_native.shの編集 RESOURCE_ROOTの設定 — サンプル「CrystalCraze」が参考になる cocos2d-x-2.1.4/samples/Javascript/CrystalCraze
- 33. おわり