cocos2d-xとCocosBuilderでゲームを作ってみよう

23,318 views
23,440 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. —  cocos2d-xのための自由なコミュニティー—  入門者から上級者まで誰でもOK!!ぜひご参加を!—  cocos2d-xに関することなら何でも投稿できます!!—  https://www.facebook.com/groups/152840204871454/
  5. 5. —  現在のshinjuku.cocos2d-xハンズオンの問題点 —  Macユーザのみを対象としている。 —  徐々にレベルが上がってきているため初心者ついて これない。—  将来のshinjuku.cocos2d-xハンズオン —  Windowsユーザ, Macユーザを区別しない —  レベルはこのまま—  shinjuku.cocos2d-x初心者ハンズオン
  6. 6. —  2/21 第5回 shinjuku.cocos2d-x—  3/14 第6回 shinjuku.cocos2d-x—  3/21 shinjuku.cocos2d-x初心者ハンズオン     ∼MacでAndroidアプリを作ろう!∼—  3/22 cocos2d-x公開講座 in 鹿児島—  3/23 cocos2d-x実践講座 in 鹿児島—  4/M 第7回 shinjuku.cocos2d-x—  4/M shinjuku.cocos2d-x初心者ハンズオン     ∼WindowsでAndroidアプリを作ろう!∼—  5/M 第8回 shinjuku.cocos2d-x—  5/M shinjuku.cocos2d-x初心者ハンズオン     ∼MacでiOSアプリを作ろう!∼
  7. 7. 目次—  CocosBuilderとは—  CocosBuilderのデモ—  CocosBuilderの使い方—  簡単なゲームを作ってみる —  CocosBuilderファイルの作成 —  ボタンタップイベントを取得する —  他のオブジェクトを取得する —  複数のアニメーションを持たせる
  8. 8. CocosBuilderとは—  http://cocosbuilder.com—  cocos2dのレイアウトやアニメーションをGUIで調整可能—  オープンソース(MITライセンス)—  最新版CocosBuilder 3.0 Alpha —  JSB(Javascript bindings)の機能が大幅に追加 —  CocosPlayer (for JSB) —  cocos2d-xやcocos2d-iphoneでも利用可能—  cocos2d-xではCCBReaderクラスを利用して連携可能—  もちろん日本語の情報は少ない—  初心者向けの主な情報源 —  CocosBuilder User Guide —  cocos2d-xサンプル「TestCpp」
  9. 9. 注意— 今回は以下のバージョンで進めます— cocos2d-2.1beta3-x-2.1.1— CocosBuilder 3.0 Alpha
  10. 10. CocosBuilderのデモ—  TestCppにCocosBuilderのデモがあります。—  iOS用プロジェクト —  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/ proj.ios/TestCpp.xcodeproj—  CocosBuilderプロジェクト —  cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/ Resources/CocosBuilderExample.ccbproj—  (おまけ)CocosPlayerのデモ
  11. 11. CocosBuilderの使い方1—  基本設定 —  プロジェクトの作成 —  デフォルトではJSB向けの設定になっている ècocos2d-x向けの設定に変更 —  出力設定 —  解像度追加・変更—  表示設定 —  解像度変更 —  見た目の変更cocos2d-2.1beta3-x-2.1.1/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj
  12. 12. CocosBuilderの使い方2—  リソース追加 —  画像・テクスチャアトラス —  パーティクル—  クラス追加 —  画像の調整—  アニメーション編集 —  タイムラインの追加—  スティッキーノート追加
  13. 13. 簡単なゲームを作ってみる
  14. 14. 簡単なゲームを作ってみる—  タップしてネコを走らせるゲームを作ります —  単純すぎてゴメンなさい。。。—  でも基本的な機能は全部盛り込んでいます —  CocosBuilderファイルの作成 —  ボタンタップイベントの取得 —  他のオブジェクトの取得 —  複数アニメーションの設定—  時間の都合上、解像度480 x 320のみの説明とします —  CocosBuilderとcocos2d-xのマルチレゾリューションサポー トを利用して簡単に対応できますが、いろいろと罠が潜んでい ます。詳細については執筆中の本にて書く予定です。—  http://tks2.net/nyanrun/images.zip
  15. 15. (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
  16. 16. (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 Normal —  CCMenuItemImage … Pos(%) x=60:y=15 Selector:tappedRightFoot Target:Document root —  レイヤー編集 —  CCLayer … Custom Class:GameLayer Selected Disabled—  Xcodeプロジェクトの編集 —  GameLayerLoader.h —  GameLayer.h —  GameLayer.cpp —  AppDelegate.cpp
  17. 17. (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
  18. 18. (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
  19. 19. (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
  20. 20. (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
  21. 21. (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
  22. 22. (6) 時間・距離・リロード—  CocosBuilderプロジェクトの編集 —  ラベル追加 —  時間 … Doc root var: mTime —  距離 … Doc root var: mDistance —  ボタン追加 —  リロードボタン … Selector:tappedReset Normal Target:Document root —  左足ボタン … Doc root var: mLeftButton —  右足ボタン … Doc root var: mRightButton Selected—  Xcodeプロジェクトの編集 Disabled —  GameLayer.h —  GameLayer.cpp
  23. 23. おわり—  次回、各OS機能へのアクセス方法を紹介します。—  ありがとうございました。

×