cocos2d-xとCocosBuilder
Upcoming SlideShare
Loading in...5
×
 

cocos2d-xとCocosBuilder

on

  • 3,333 views

 

Statistics

Views

Total Views
3,333
Views on SlideShare
3,333
Embed Views
0

Actions

Likes
6
Downloads
29
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

cocos2d-xとCocosBuilder cocos2d-xとCocosBuilder Presentation Transcript

  • cocos2d-xとCocosBuilderでゲームを作ってみよう株式会社TKS2 清水友晶
  • 清水 友晶—  株式会社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
  • 出版されました!
  • —  http://cocos2d-x.jp—  cocos2d-x開発元Chukong Technologies社公認—  cocos2d-xのための自由なコミュニティー—  入門者から上級者まで誰でもOK!!ぜひご参加を!—  cocos2d-xに関することなら何でも投稿できます!!—  https://www.facebook.com/groups/152840204871454/
  • —  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アプリ開発環境を作ろう!∼
  • 目次—  CocosBuilderとは—  CocosBuilderのデモ—  CocosBuilderの使い方—  簡単なゲームを作ってみる—  CocosBuilderファイルの作成—  ボタンタップイベントを取得する—  他のオブジェクトを取得する—  複数のアニメーションを持たせる
  • 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」
  • 注意— 今回は以下のバージョンで進めます—  cocos2d-x 2.1.4—  CocosBuilder 3.0 Alpha5—  本日のスライドhttp://www.slideshare.net/doraemonsss/—  必要なリソースhttp://tks2.net/nyanrun/images.zip
  • 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
  • CocosBuilderの使い方1—  基本設定—  プロジェクトの作成—  デフォルトではJSB向けの設定になっているècocos2d-x向けの設定に変更—  出力設定—  解像度追加・変更—  表示設定—  解像度変更—  見た目の変更Cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj
  • CocosBuilderの使い方2—  リソース追加—  画像・テクスチャアトラス—  パーティクル—  クラス追加—  画像の調整—  アニメーション編集—  タイムラインの追加—  スティッキーノート追加
  • 簡単なゲームを作ってみる
  • 簡単なゲームを作ってみる—  タップしてネコを走らせるゲームを作ります—  単純すぎてゴメンなさい。。。—  でも基本的な機能は全部盛り込んでいます—  CocosBuilderファイルの作成—  ボタンタップイベントの取得—  他のオブジェクトの取得—  複数アニメーションの設定—  時間の都合上、解像度480 x 320のみの説明とします—  CocosBuilderとcocos2d-xのマルチレゾリューションサポートを利用して簡単に対応できますが、いろいろと罠が潜んでいます。詳細については出版した本にて書いています。—  http://tks2.net/nyanrun/images.zip
  • (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
  • (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
  • (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
  • (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
  • (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
  • (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
  • (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
  • (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
  • おわり