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

�  6/25発売 �  2,800円 ＋ 税

�  400ページ

�  6/18発売 �  2,980円 ＋ 税

�  312ページ

�  http://cocos2d-x.jp

�  cocos2d-x開発元Chukong Technologies社公認

�  cocos2d-xのための自由なコミュニティー

�  入門者から上級者まで誰でもOK!!ぜひご参加を!

�  cocos2d-xに関することなら何でも投稿できます!!

�  https://www.facebook.com/groups/cocos2dxjp/

�  10/17 shinjuku.cocos2d-x初心者ハンズオン 　　　　～CocosBuilderを利用した開発の進め方～

�  10/24 第13回 shinjuku.cocos2d-x

�  11/12 第7回テックヒルズ

�  11/14 shinjuku.cocos2d-x初心者ハンズオン 　　　　～cocos2d-xを利用したクロスプラットフォーム開発環境構築～

�  11/21 第14回 shinjuku.cocos2d-x

�  12/M shinjuku.cocos2d-x初心者ハンズオン 　　　　～CocosBuilderを利用した開発の進め方～

�  12/M 第15回 shinjuku.cocos2d-x

CocosBuilderとは �  http://cocosbuilder.com

�  cocos2dのレイアウトやアニメーションをGUIで調整可能

�  オープンソース(MITライセンス)

�  最新版CocosBuilder 3.0 Alpha �  JSB(JavaScript bindings)の機能が大幅に追加 �  CocosPlayer (for JSB) �  cocos2d-xやcocos2d-iphoneでも利用可能

�  cocos2d-x(C++)ではCCBReaderクラスを利用して連携可能

�  初心者向けの主な情報源 �  CocosBuilder User Guide �  cocos2d-xサンプル「TestCpp」

CocosBuilderとは �  CocosBuilderはViktor Lidholt氏によって開発された

�  Viktor Lidholt氏 �  2011年　CocosBuilderの開発を行う �  2012年2月　Zynga社 �  2013年6月　Apportable社

�  Viktor Lidholt氏によるCocosBuilderの開発は2013年6月で止まっている 　https://github.com/cocos2d/CocosBuilder/network

�  CocosBuilderがオープンソース(MIT)でありGitHubで公開されているため、その改修を行うことも可能

�  現在も多くForkされており開発が続いている �  tiantian2007氏 �  ovenbits氏

CocosBuilderはこのまま死んでしまうのか。。。

SpriteBuilder � CocosBuilderの後継

�  Apportable社(恐らくViktor氏)によりSpriteBuilderが開発されている

�  SpriteBuilderのホームページはまだないようです �  GitHub

https://github.com/apportable/SpriteBuilder

CocosBuilderで利用できる機能 �  cocos2d-x

�  JavaScript �  UI Editor, Animation Editor �  JavaScript Editor, CocosPlayer

�  C++ �  Lua

�  UI Editor, Animation Editor

�  cocos2d-html5 �  JavaScript

�  UI Editor, Animation Editor �  JavaScript Editor, Browser

テストが容易

今日学べること �  主に学ぶこと

�  CocosBuilderの使い方 �  UI Editor �  Animation Editor

�  ちょっと学ぶこと �  手軽に利用できるブラウザで表示 �  JavaScriptを利用して実行

�  画面の表示 �  アニメーションの実行

CocosBuilderの使い方1 �  基本設定

�  プロジェクトの作成 �  デフォルトではJSB向けの設定になっている

èC++で利用する場合は設定の変更が必要 �  出力設定 �  解像度追加・変更

�  表示設定 �  解像度変更 �  見た目の変更

CocosBuilderの使い方2 �  リソース追加

�  画像・テクスチャアトラス �  パーティクル

�  クラス追加 �  画像の調整

�  アニメーション編集 �  タイムラインの追加

�  スティッキーノート追加

CocosBuilderにふれてみよう �  プロジェクトの作成

�  背景画像の表示

�  キャラクターノードの作成

�  ボタンの作成

�  ボタンの処理（JavaScript）

�  キャラクターのアニメーション作成

�  アニメーションの実行（JavaScript）

プロジェクトの作成 �  新しいプロジェクトは、任意のディレクトリに保存 �  ディレクトリには、以下が用意される

�  Resourcesディレクトリ �  プロジェクトファイル

�  次のURLより画像ファイルを ダウンロードする http://goo.gl/eEmfAz

�  画像ファイルは「resources-auto」へ配置する

背景画像の表示 �  「background.png」を左ペインから中央ペインへ、ドラッグ＆ドロップする

�  「background」のプロパティの調整 �  Position … %

�  x … 50.0 �  y … 50.0

背景画像の表示 �  「Publish Settings ...」よりプロパティを修正する

�  HTML5 �  Global scale factor … 2x �  Resolution

�  width … 1024 �  height … 768

�  「Run in Browser」より ブラウザ上で実行する

キャラクターノードの作成 �  キャラクターを表示させるだけであれば、ノードを別に用

意する必要はない。後の工程でノードにアニメーションを追加するため、今回は別に用意する。

�  ノードの作成 �  New > Interface File �  CCNodeを選択 �  Resourcesに「Cat」を作成

�  ルートノード「CCNode」を編集 �  CCSpriteを追加 �  Sprite farame è cat_normal.png

�  MainScene.ccbにCat.ccbを追加

ボタンの作成 �  MainScene.ccbを表示し、ルートノード「CCLayer」を選択 �  CCMenuを追加

�  CCMenuItemImageを追加 �  Normal è button_normal.png �  Selected è button_selected.png �  Selector è onPressButton �  Target è Document root

ボタンの処理（JavaScript） �  catの編集

�  Code Connections �  Doc root var è cat

�  MainScene.jsの編集 �  onPressButtonメソッドの編集

�  this.helloLabel è this.cat

�  ボタンをタップすると！！

キャラクターのアニメーション作成 �  Cat.ccbの編集

�  Edit timelines ... �  Timeline name è Run �  Autoplay è OFF

�  ネコの画像を示す「CCSprite」を選択する �  Animation > Insert Keyframe > Sprite Frame

�  can_run1.png �  can_run2.png

�  Set Timeline Duration ... �  Timeline duration è 00:03:00

アニメーションの実行（JavaScript）

�  MainScene.jsの編集 �  onPressButtonメソッドの編集

�  this.cat.animationManager.runAnimationsForSequenceNamed("Run");

�  ボタンをタップすると！！！

�  作成したアニメーションを 動かすことができる！

CocosBuilderでの注意 �  次のバージョンに揃える必要がある

�  cocos2d-x 2.1.3 è CocosBuilder 3.0 alpha 4 �  それ以降のバージョン è CocosBuilder 3.0 alpha 5

�  Mac OS X 10.8を使用すること �  Mac OS X 10.7以前の場合、ファイルを読込めないバグがある

�  オープンソースであるため、10.7に合わせCocosBuilderをビルドすることも可能

�  参考になるプロジェクト �  cocos2d-xプロジェクト

�  cocos2d-x-2.1.4/samples/Cpp/TestCpp �  CocosBuilderプロジェクト

�  cocos2d-x-2.1.4/samples/Cpp/TestCpp/Resources/CocosBuilderExample.ccbproj

本に載っていない情報 �  ガイド

�  効果音

�  コールバック関数

�  パーティクル

�  タイムラインの編集

�  Sprite Sheetの取り込み

�  Smart Sprite Sheetの利用

�  CocosPlayer �  cocos2d-xからCocosBuilderのリソースを直接読込む

ガイド �  ガイドの移動

�  command + クリック è マウスの移動

�  ガイドの削除 �  ガイドを画面外へ移動する

�  ガイドにスナップ �  できません。ソース上でコメントアウトされている

�  なぜ使用不可なのか不明… �  CocosScene.m 823~843行目をアンコメントし、適切

に修正することで利用可能になるかも?

効果音 �  キーフレームの追加は、alt + クリック

�  設定はキーフレームをダブルクリック

�  Resourcesに含まれる音声ファイルから選択

コールバック関数 �  キーフレームの追加は、alt + クリック

�  設定はキーフレームをダブルクリック

�  onResolveCCBCallFuncSelector関数にて設定 è CCB_SELECTORRESOLVER_CALLFUNC_GLUEマクロ

パーティクル �  FXボタンをクリックするとパーティクルが作成できる

�  使い勝手はParticleDesignerの方が良い

タイムラインの編集 �  キーフレームをダブルクリックすることにより、簡単に編集可能

�  キーフレームのコピー&ペーストが可能

�  キーフレームを複数選択することで、Animationメニューより次の項目が利用可能 �  Reverse Selected Keyframes

èキーフレームの順序を反転する �  Stretch Selected Keyframes...

èキーフレームの間隔を変更する

Sprite Sheetの取り込み �  TexturePackerなどで作成されたSprite Sheetは、

CocosBuilderから読み込み可能なディレクトリに配置するだけで利用可能 �  xxxx.plist �  xxxx.png

�  一連の画像から一度にキーフレームを作成することが可能 �  Create Keyframes from Selection

Smart Sprite Sheetの利用 �  ディレクトリのコンテキストメニュー

�  Make Smart Sprite Sheetを選択

�  Edit Smart Sprite Sheet...を選択

CocosPlayer �  インストール方法

�  CocosBuilderのサイトよりCocosBuilderのソースコードをダウンロードする

�  CocosPlayerのXcodeプロジェクトを 立ち上げ、iOSシミュレータまたは実機 にインストールする �  Xcode5の場合、一部修正が必要

cocos2d-xからCocosBuilderのリソースを直接読込む

�  iOS, Androidそれぞれ個別に設定が必要 �  iOS

�  AppDelegateクラスにおいて、パスを設定する CCFileUtilsクラスsetSearchPaths関数の利用

�  Android �  build_native.shの編集

RESOURCE_ROOTの設定

�  サンプル「CrystalCraze」が参考になる cocos2d-x-2.1.4/samples/Javascript/CrystalCraze

おわり