Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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.cpp https://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=15 Selector:tappedLeftFoot Target:Document root —  CCMenuItemImage … Pos(%) x=60:y=15 Selector:tappedRightFoot Target:Document root —  レイヤー編集 —  CCLayer … Custom Class:GameLayer —  Xcodeプロジェクトの編集 —  GameLayerLoader.h —  GameLayer.h —  GameLayer.cpp —  AppDelegate.cpp https://gist.github.com/tks2shimizu/d6ecb457fd6c5bff32fb Normal Selected Disabled
  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.cpp https://gist.github.com/tks2shimizu/587ea98f879fb6fdb7e6
  17. 17. (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
  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.cpp https://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:tappedReset Target:Document root —  左足ボタン … Doc root var: mLeftButton —  右足ボタン … Doc root var: mRightButton —  Xcodeプロジェクトの編集 —  GameLayer.h —  GameLayer.cpp https://gist.github.com/tks2shimizu/b27c1d656dd6ad0670d1 Normal Selected Disabled
  22. 22. おわり

×