Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,819 views

Published on

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

  • Be the first to comment

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

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

×