Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
CocosBuilderを利用した
開発の進め方
株式会社TKS2 清水友晶
清水 友晶
—  株式会社TKS2

スマートフォンアプリ開発
(iOS, Android, Windows Phone 8)
Webコンテンツ開発

—  cocos2d-xへの開発参加

cocos2d-xを利用したアプリ開発
講演活動...
—  6/25発売

—  6/18発売

—  2,800円 + 税

—  2,980円 + 税

—  400ページ

—  312ページ
—  http://cocos2d-x.jp
—  cocos2d-x開発元Chukong Technologies社公認
—  cocos2d-xのための自由なコミュニティー
—  入門者から上級者まで誰でもOK!!ぜひご参加を!
—...
—  10/17 shinjuku.cocos2d-x初心者ハンズオン
    ∼CocosBuilderを利用した開発の進め方∼

—  10/24 第13回 shinjuku.cocos2d-x
—  11/12 第7回テックヒルズ
...
CocosBuilderとは
—  http://cocosbuilder.com
—  cocos2dのレイアウトやアニメーションをGUIで調整可能
—  オープンソース(MITライセンス)
—  最新版CocosBuilder 3....
CocosBuilderとは
—  CocosBuilderはViktor Lidholt氏によって開発された
—  Viktor Lidholt氏
—  2011年 CocosBuilderの開発を行う
—  2012年2月 Zyng...
SpriteBuilder
— CocosBuilderの後継
—  Apportable社(恐らくViktor氏)によりSpriteBuilderが開
発されている

—  SpriteBuilderのホームページはまだないようです
—...
CocosBuilderで利用できる機能
—  cocos2d-x
—  JavaScript
—  UI Editor, Animation Editor
—  JavaScript Editor, CocosPlayer
—  C...
今日学べること
—  主に学ぶこと
—  CocosBuilderの使い方
—  UI Editor
—  Animation Editor

—  ちょっと学ぶこと
—  手軽に利用できるブラウザで表示
—  JavaScrip...
CocosBuilderの使い方1
—  基本設定
—  プロジェクトの作成
—  デフォルトではJSB向けの設定になっている
èC++で利用する場合は設定の変更が必要
—  出力設定
—  解像度追加・変更

—  表示設定
—...
CocosBuilderの使い方2
—  リソース追加
—  画像・テクスチャアトラス
—  パーティクル

—  クラス追加
—  画像の調整

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

—  スティッキーノート追...
CocosBuilderにふれてみよう
—  プロジェクトの作成
—  背景画像の表示
—  キャラクターノードの作成
—  ボタンの作成
—  ボタンの処理(JavaScript)
—  キャラクターのアニメーション作成
—  ...
プロジェクトの作成
—  新しいプロジェクトは、任意のディレクトリに保存
—  ディレクトリには、以下が用意される
—  Resourcesディレクトリ
—  プロジェクトファイル

—  次のURLより画像ファイルを
ダウンロードす...
背景画像の表示
—  「background.png」を左ペインから中央ペインへ、
ドラッグ&ドロップする

—  「background」のプロパティの調整
—  Position … %
—  x … 50.0
—  y … 50...
背景画像の表示
—  「Publish Settings ...」よりプロパティを修正する
—  HTML5
—  Global scale factor … 2x
—  Resolution
—  width … 1024
—  ...
キャラクターノードの作成
—  キャラクターを表示させるだけであれば、ノードを別に用
意する必要はない。後の工程でノードにアニメーションを
追加するため、今回は別に用意する。

—  ノードの作成
—  New > Interface F...
ボタンの作成
—  MainScene.ccbを表示し、ルートノード「CCLayer」
を選択
—  CCMenuを追加
—  CCMenuItemImageを追加
— 
— 
— 
— 

Normal è button_no...
ボタンの処理(JavaScript)
—  catの編集
—  Code Connections
—  Doc root var è cat

—  MainScene.jsの編集
—  onPressButtonメソッドの編集
—...
キャラクターのアニメーション作成
—  Cat.ccbの編集
—  Edit timelines ...
—  Timeline name è Run
—  Autoplay è OFF
—  ネコの画像を示す「CCSprite」...
アニメーションの実行
(JavaScript)
—  MainScene.jsの編集
—  onPressButtonメソッドの編集
—  this.cat.animationManager.runAnimationsForSequenc...
CocosBuilderでの注意
—  次のバージョンに揃える必要がある
—  cocos2d-x 2.1.3 è CocosBuilder 3.0 alpha 4
—  それ以降のバージョン è CocosBuilder 3.0 a...
本に載っていない情報
—  ガイド
—  効果音
—  コールバック関数
—  パーティクル
—  タイムラインの編集
—  Sprite Sheetの取り込み
—  Smart Sprite Sheetの利用
—  Cocos...
ガイド
—  ガイドの移動
—  command + クリック è マウスの移動

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

—  ガイドにスナップ
—  できません。ソース上でコメントアウトされている
—  なぜ使...
効果音
—  キーフレームの追加は、alt + クリック
—  設定はキーフレームをダブルクリック

—  Resourcesに含まれる音声ファイルから選択
コールバック関数
—  キーフレームの追加は、alt + クリック
—  設定はキーフレームをダブルクリック

—  onResolveCCBCallFuncSelector関数にて設定
è CCB_SELECTORRESOLVER_C...
パーティクル
—  FXボタンをクリックするとパーティクルが作成できる
—  使い勝手はParticleDesignerの方が良い
タイムラインの編集
—  キーフレームをダブルクリックすることにより、簡単
に編集可能

—  キーフレームのコピー&ペーストが可能
—  キーフレームを複数選択することで、Animationメ
ニューより次の項目が利用可能
—  Re...
Sprite Sheetの取り込み
—  TexturePackerなどで作成されたSprite Sheetは、

CocosBuilderから読み込み可能なディレクトリに配置する
だけで利用可能
—  xxxx.plist
—  xxx...
Smart Sprite Sheetの利用
—  ディレクトリのコンテキストメニュー
—  Make Smart Sprite Sheetを選択

—  Edit Smart Sprite Sheet...を選択
CocosPlayer
—  インストール方法
—  CocosBuilderのサイトよりCocosBuilderのソースコー
ドをダウンロードする

—  CocosPlayerのXcodeプロジェクトを
立ち上げ、iOSシミュレータま...
cocos2d-xからCocosBuilder
のリソースを直接読込む
—  iOS, Androidそれぞれ個別に設定が必要
—  iOS
—  AppDelegateクラスにおいて、パスを設定する
CCFileUtilsクラスsetS...
おわり
Prochain SlideShare
Chargement dans…5
×

9

Partager

Télécharger pour lire hors ligne

CocosBuilderを利用した開発の進め方

Télécharger pour lire hors ligne

CocosBuilderを利用した開発の進め方

CocosBuilderを利用した開発の進め方

  1. 1. 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. —  6/25発売 —  6/18発売 —  2,800円 + 税 —  2,980円 + 税 —  400ページ —  312ページ
  4. 4. —  http://cocos2d-x.jp —  cocos2d-x開発元Chukong Technologies社公認 —  cocos2d-xのための自由なコミュニティー —  入門者から上級者まで誰でもOK!!ぜひご参加を! —  cocos2d-xに関することなら何でも投稿できます!! —  https://www.facebook.com/groups/cocos2dxjp/
  5. 5. —  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
  6. 6. 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」
  7. 7. 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はこのまま死んでしまうのか。。。
  8. 8. SpriteBuilder — CocosBuilderの後継 —  Apportable社(恐らくViktor氏)によりSpriteBuilderが開 発されている —  SpriteBuilderのホームページはまだないようです —  GitHub https://github.com/apportable/SpriteBuilder
  9. 9. 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 テストが容易
  10. 10. 今日学べること —  主に学ぶこと —  CocosBuilderの使い方 —  UI Editor —  Animation Editor —  ちょっと学ぶこと —  手軽に利用できるブラウザで表示 —  JavaScriptを利用して実行 —  画面の表示 —  アニメーションの実行
  11. 11. CocosBuilderの使い方1 —  基本設定 —  プロジェクトの作成 —  デフォルトではJSB向けの設定になっている èC++で利用する場合は設定の変更が必要 —  出力設定 —  解像度追加・変更 —  表示設定 —  解像度変更 —  見た目の変更
  12. 12. CocosBuilderの使い方2 —  リソース追加 —  画像・テクスチャアトラス —  パーティクル —  クラス追加 —  画像の調整 —  アニメーション編集 —  タイムラインの追加 —  スティッキーノート追加
  13. 13. CocosBuilderにふれてみよう —  プロジェクトの作成 —  背景画像の表示 —  キャラクターノードの作成 —  ボタンの作成 —  ボタンの処理(JavaScript) —  キャラクターのアニメーション作成 —  アニメーションの実行(JavaScript)
  14. 14. プロジェクトの作成 —  新しいプロジェクトは、任意のディレクトリに保存 —  ディレクトリには、以下が用意される —  Resourcesディレクトリ —  プロジェクトファイル —  次のURLより画像ファイルを ダウンロードする http://goo.gl/eEmfAz —  画像ファイルは「resources-auto」へ配置する
  15. 15. 背景画像の表示 —  「background.png」を左ペインから中央ペインへ、 ドラッグ&ドロップする —  「background」のプロパティの調整 —  Position … % —  x … 50.0 —  y … 50.0
  16. 16. 背景画像の表示 —  「Publish Settings ...」よりプロパティを修正する —  HTML5 —  Global scale factor … 2x —  Resolution —  width … 1024 —  height … 768 —  「Run in Browser」より ブラウザ上で実行する
  17. 17. キャラクターノードの作成 —  キャラクターを表示させるだけであれば、ノードを別に用 意する必要はない。後の工程でノードにアニメーションを 追加するため、今回は別に用意する。 —  ノードの作成 —  New > Interface File —  CCNodeを選択 —  Resourcesに「Cat」を作成 —  ルートノード「CCNode」を編集 —  CCSpriteを追加 —  Sprite farame è cat_normal.png —  MainScene.ccbにCat.ccbを追加
  18. 18. ボタンの作成 —  MainScene.ccbを表示し、ルートノード「CCLayer」 を選択 —  CCMenuを追加 —  CCMenuItemImageを追加 —  —  —  —  Normal è button_normal.png Selected è button_selected.png Selector è onPressButton Target è Document root
  19. 19. ボタンの処理(JavaScript) —  catの編集 —  Code Connections —  Doc root var è cat —  MainScene.jsの編集 —  onPressButtonメソッドの編集 —  this.helloLabel è this.cat —  ボタンをタップすると!!
  20. 20. キャラクターのアニメーション作成 —  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
  21. 21. アニメーションの実行 (JavaScript) —  MainScene.jsの編集 —  onPressButtonメソッドの編集 —  this.cat.animationManager.runAnimationsForSequence Named("Run"); —  ボタンをタップすると!!! —  作成したアニメーションを 動かすことができる!
  22. 22. 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
  23. 23. 本に載っていない情報 —  ガイド —  効果音 —  コールバック関数 —  パーティクル —  タイムラインの編集 —  Sprite Sheetの取り込み —  Smart Sprite Sheetの利用 —  CocosPlayer —  cocos2d-xからCocosBuilderのリソースを直接読込む
  24. 24. ガイド —  ガイドの移動 —  command + クリック è マウスの移動 —  ガイドの削除 —  ガイドを画面外へ移動する —  ガイドにスナップ —  できません。ソース上でコメントアウトされている —  なぜ使用不可なのか不明… —  CocosScene.m 823 843行目をアンコメントし、適切 に修正することで利用可能になるかも?
  25. 25. 効果音 —  キーフレームの追加は、alt + クリック —  設定はキーフレームをダブルクリック —  Resourcesに含まれる音声ファイルから選択
  26. 26. コールバック関数 —  キーフレームの追加は、alt + クリック —  設定はキーフレームをダブルクリック —  onResolveCCBCallFuncSelector関数にて設定 è CCB_SELECTORRESOLVER_CALLFUNC_GLUEマクロ
  27. 27. パーティクル —  FXボタンをクリックするとパーティクルが作成できる —  使い勝手はParticleDesignerの方が良い
  28. 28. タイムラインの編集 —  キーフレームをダブルクリックすることにより、簡単 に編集可能 —  キーフレームのコピー&ペーストが可能 —  キーフレームを複数選択することで、Animationメ ニューより次の項目が利用可能 —  Reverse Selected Keyframes èキーフレームの順序を反転する —  Stretch Selected Keyframes... èキーフレームの間隔を変更する
  29. 29. Sprite Sheetの取り込み —  TexturePackerなどで作成されたSprite Sheetは、 CocosBuilderから読み込み可能なディレクトリに配置する だけで利用可能 —  xxxx.plist —  xxxx.png —  一連の画像から一度にキーフレームを作成することが可能 —  Create Keyframes from Selection
  30. 30. Smart Sprite Sheetの利用 —  ディレクトリのコンテキストメニュー —  Make Smart Sprite Sheetを選択 —  Edit Smart Sprite Sheet...を選択
  31. 31. CocosPlayer —  インストール方法 —  CocosBuilderのサイトよりCocosBuilderのソースコー ドをダウンロードする —  CocosPlayerのXcodeプロジェクトを 立ち上げ、iOSシミュレータまたは実機 にインストールする —  Xcode5の場合、一部修正が必要
  32. 32. cocos2d-xからCocosBuilder のリソースを直接読込む —  iOS, Androidそれぞれ個別に設定が必要 —  iOS —  AppDelegateクラスにおいて、パスを設定する CCFileUtilsクラスsetSearchPaths関数の利用 —  Android —  build_native.shの編集 RESOURCE_ROOTの設定 —  サンプル「CrystalCraze」が参考になる cocos2d-x-2.1.4/samples/Javascript/CrystalCraze
  33. 33. おわり
  • but8

    Nov. 23, 2015
  • KatokichiSoft

    May. 11, 2015
  • nobuhisayasugi

    Nov. 18, 2014
  • jmzspr

    Oct. 6, 2014
  • hirooshigetomi

    Mar. 17, 2014
  • MiuraKatsu

    Dec. 12, 2013
  • smaedajp

    Nov. 19, 2013
  • ogamita777

    Oct. 28, 2013
  • TakeshiWatanabe2

    Oct. 22, 2013

CocosBuilderを利用した開発の進め方

Vues

Nombre de vues

14 489

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

2 386

Actions

Téléchargements

24

Partages

0

Commentaires

0

Mentions J'aime

9

×