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.cpp

https://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=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

(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

(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

(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

(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: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

おわり