cocos2d-xとCocosBuilder

3,359 views

Published on

Published in: Technology

cocos2d-xとCocosBuilder

  1. 1. cocos2d-xと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. 出版されました!
  4. 4. —  http://cocos2d-x.jp—  cocos2d-x開発元Chukong Technologies社公認—  cocos2d-xのための自由なコミュニティー—  入門者から上級者まで誰でもOK!!ぜひご参加を!—  cocos2d-xに関することなら何でも投稿できます!!—  https://www.facebook.com/groups/152840204871454/
  5. 5. —  6/22 cocos2d-xハンズオン勉強会—  6/25 第9回 shinjuku.cocos2d-x—  6/28 第1回 cocos2d-x開発事例勉強会—  7/11 shinjuku.cocos2d-x初心者ハンズオン    ∼WindowsでAndroidアプリ開発環境を作ろう!∼—  7/18 第10回 shinjuku.cocos2d-x—  8/M shinjuku.cocos2d-x初心者ハンズオン    ∼MacでiOSアプリ開発環境を作ろう!∼—  8/M 第11回 shinjuku.cocos2d-x—  9/M shinjuku.cocos2d-x初心者ハンズオン    ∼MacでAndroidアプリ開発環境を作ろう!∼
  6. 6. 目次—  CocosBuilderとは—  CocosBuilderのデモ—  CocosBuilderの使い方—  簡単なゲームを作ってみる—  CocosBuilderファイルの作成—  ボタンタップイベントを取得する—  他のオブジェクトを取得する—  複数のアニメーションを持たせる
  7. 7. CocosBuilderとは—  http://cocosbuilder.com—  cocos2dのレイアウトやアニメーションをGUIで調整可能—  オープンソース(MITライセンス)—  最新版CocosBuilder 3.0 Alpha5—  JSB(Javascript bindings)の機能が大幅に追加—  CocosPlayer (for JSB)、Console—  cocos2d-xやcocos2d-iphoneでも利用可能—  cocos2d-xではCCBReaderクラスを利用して連携可能—  もちろん日本語の情報は少ない—  初心者向けの主な情報源—  CocosBuilder User Guide—  cocos2d-xサンプル「TestCpp」
  8. 8. 注意— 今回は以下のバージョンで進めます—  cocos2d-x 2.1.4—  CocosBuilder 3.0 Alpha5—  本日のスライドhttp://www.slideshare.net/doraemonsss/—  必要なリソースhttp://tks2.net/nyanrun/images.zip
  9. 9. CocosBuilderのデモ—  TestCppにCocosBuilderのデモがあります。—  iOS用プロジェクト—  cocos2d-x-2.1.4/samples/Cpp/TestCpp/proj.ios/TestCpp.xcodeproj—  CocosBuilderプロジェクト—  cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj
  10. 10. CocosBuilderの使い方1—  基本設定—  プロジェクトの作成—  デフォルトではJSB向けの設定になっているècocos2d-x向けの設定に変更—  出力設定—  解像度追加・変更—  表示設定—  解像度変更—  見た目の変更Cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj
  11. 11. CocosBuilderの使い方2—  リソース追加—  画像・テクスチャアトラス—  パーティクル—  クラス追加—  画像の調整—  アニメーション編集—  タイムラインの追加—  スティッキーノート追加
  12. 12. 簡単なゲームを作ってみる
  13. 13. 簡単なゲームを作ってみる—  タップしてネコを走らせるゲームを作ります—  単純すぎてゴメンなさい。。。—  でも基本的な機能は全部盛り込んでいます—  CocosBuilderファイルの作成—  ボタンタップイベントの取得—  他のオブジェクトの取得—  複数アニメーションの設定—  時間の都合上、解像度480 x 320のみの説明とします—  CocosBuilderとcocos2d-xのマルチレゾリューションサポートを利用して簡単に対応できますが、いろいろと罠が潜んでいます。詳細については出版した本にて書いています。—  http://tks2.net/nyanrun/images.zip
  14. 14. (1) CocosBuilderで画面を作成—  CocosBuilderプロジェクトの作成—  cocos2d-x向けの設定—  リソースの追加—  画像の配置—  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—  Xcodeプロジェクトの作成—  リソースの追加(含ccbiファイル)—  AppDelegate.cpphttps://gist.github.com/tks2shimizu/b48b377e817245f7d8a9
  15. 15. (2) タップイベントを取得—  CocosBuilderプロジェクトの編集—  ボタンの配置—  CCMenu … Pos x=0:y=0, Size(%)x=100.0:y=100.0—  CCMenuItemImage … Pos(%) x=40:y=15Selector:tappedLeftFootTarget:Document root—  CCMenuItemImage … Pos(%) x=60:y=15Selector:tappedRightFootTarget:Document root—  レイヤー編集—  CCLayer … Custom Class:GameLayer—  Xcodeプロジェクトの編集—  GameLayerLoader.h—  GameLayer.h—  GameLayer.cpp—  AppDelegate.cpphttps://gist.github.com/tks2shimizu/d6ecb457fd6c5bff32fbNormalSelectedDisabled
  16. 16. (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—  Xcodeプロジェクトの編集—  GameLayer.h—  GameLayer.cpphttps://gist.github.com/tks2shimizu/587ea98f879fb6fdb7e6
  17. 17. (4) 基本アニメーション—  CocosBuilderプロジェクトの編集—  ネコ編集(後で必要なので、今のうちに編集)—  CCNode … Pos(%) x=25:y=35, Size W=72:H=123, Ancx=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
  18. 18. (5) 複数アニメーション—  CocosBuilderプロジェクトの編集—  タイムライン編集 (詳細は後述)—  Leftfoot (duration 00:00:10)—  Rightfoot (duration 00:00:10)—  Tumble—  Normal—  Goal (duration 00:00:15)—  Xcodeプロジェクトの編集—  GameLayer.h—  GameLayer.cpp—  AppDelegate.cpphttps://gist.github.com/tks2shimizu/f44523a371cbe4c11081
  19. 19. (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
  20. 20. (5) 複数アニメーション—  Tumble—  00:00:00 … Sprite frame: cat_tumble.png—  00:00:00 … Rotation: 90.0—  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_goal.png—  00:00:10 … Position: (%) x=50:y=25—  00:00:11 … Sprite frame: cat_normal.png—  Chained Timeline … Goal
  21. 21. (6) 時間・距離・リロード—  CocosBuilderプロジェクトの編集—  ラベル追加—  時間 … Doc root var: mTime—  距離 … Doc root var: mDistance—  ボタン追加—  リロードボタン … Selector:tappedResetTarget:Document root—  左足ボタン … Doc root var: mLeftButton—  右足ボタン … Doc root var: mRightButton—  Xcodeプロジェクトの編集—  GameLayer.h—  GameLayer.cpphttps://gist.github.com/tks2shimizu/b27c1d656dd6ad0670d1NormalSelectedDisabled
  22. 22. おわり

×