Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cocos2d-x(JS) ハンズオン #05「Cocos StudioとCocos2d-x (JS)との連携」

1,306 views

Published on

2016/3/15 イベント&コミュニティスペース dots.にて開催したCocos2d-x(JS) ハンズオン #05 「Cocos StudioとCocos2d-x (JS)との連携」の資料です。Cocos2d-xにおけるイベント関連を紹介しました。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #05「Cocos StudioとCocos2d-x (JS)との連携」

  1. 1. Cocos2d-x(JS) ハンズオン #5 Cocos Studioと Cocos2d-x (JS)との連携 株式会社TKS2 清水友晶
  2. 2. 清水 友晶  株式会社TKS2 アプリ開発コンサル Cocos2d-xサポート スマホアプリ開発 TECH.C.非常勤講師  プライベートでも Cocos2d-xに関するゲーム開発 講演活動 執筆活動  マイブーム: ゲームエンジン調査  チラ裏開発メモ: http://tks2.net/memo  SlideShare: http://www.slideshare.net/doraemonsss  Facebook: http://www.facebook.com/doraemonsss
  3. 3. http://line.me/S/sticker/1085672
  4. 4. もくじ  Cocos Studioについて  Cocos Studioとは  Cocosのインストール  Cocos Studioの設定  エディタの使い方  基本的な使い方  リソース追加  アニメーション作成  Cocos2d-x (JS) との連携  Android APK生成
  5. 5. Cocos Studioについて
  6. 6. Cocos Studio  旧名: CocoStudio  最新版: Cocos Studio v3.10β  動作環境: Windows, Mac  特徴:  UIエディタ  アニメーションエディタ (含:スケルタルアニメーション)  シミュレータ(デザイン用)  Win,Mac,iPhone,Android向けビルド  ipa, apk生成  ブラウザアプリ対応
  7. 7. Cocosのインストール
  8. 8. http://cocos2d-x.org/download/ Cocosダウンロード
  9. 9. Cocosインストール
  10. 10. Cocos起動
  11. 11. 新規プロジェクト作成  「New Project」ボタンクリック
  12. 12. 新規プロジェクト作成  Project Name … プロジェクト名  Project Path … プロジェクトを配置するフォルダ  Engine Version … Cocos2d-xのバージョン  Engine Type … エンジンの状態  Precompiled Library … コンパイル済み  Source Code … ソースコード  Language … 開発言語  Editor … エディタ  SDKs … SDKBOX
  13. 13. Cocosの設定  他バージョンのCocos2d-xを導入したい場合  Cocos2d-xフォルダにCocos2d-xを配置する (現在、Macのみ認識可 Cocos Studio上ではWindowsでも認識する)
  14. 14. Cocos Studio起動
  15. 15. Cocos Studioの設定
  16. 16. Android Path設定
  17. 17. Android Path設定  SDK … Android SDKのパス  NDK … Android NDKのパス  ANT … Apache ANTのパス (CocosフォルダにあるANTが指定されている)  JDK … Java Developer Kitのパス  「One Click Configure」には注意  SDK, NDK, JDKをインストールする ことができるが、Android・Oracle のLicense Agreementに同意した うえで利用すること
  18. 18. エディタの使い方
  19. 19. 基本的な使い方 オ ブ ジ ェ ク ト プ ロ パ テ ィ リ ソ ー ス ツール アニメーション ワーク
  20. 20. 編集前にここをチェック  必須ではないが、事前にチェックしておくことで、ア ニメーション編集時に必要な項目が最初から表示され るようになる
  21. 21. 画像のダウンロード  今回使用する画像をダウンロードしてください http://tks2.net/handson/20150315.zip
  22. 22. リソースの追加  画像があるフォルダから「リソース」ペインに ドラッグアンドドロップ
  23. 23. オブジェクトの配置  必要なオブジェクトを「オブジェクト」ペインから 「ワーク」ペインにドラッグアンドドロップ  注意: 「リソース」ペインから画像をドラッグアンッドロップして オブジェクトを追加することもできますが、操作に慣れるまでは 「オブジェクト」ペインから追加するようにしてください
  24. 24. 演習  次の画面を作ってください
  25. 25. アニメーション作成  「ワーク」「プロパティ」「アニメーション」ペイン を使って作業を行う  「アニメーション」ペインにおいて、変更したいタイ ミングに「タイムライン」を移動して、必要なプロパ ティを変更する  不要なフレームは削除する タイムライン 必要な場所にドラッグアンドドロップで移動
  26. 26. アニメーションリスト作成  タイムライン上に複数のアニメー ションを作成することが可能  それぞれのアニメーションを命名 することで、プログラム上でもそ の名前でアニメーションを実行可 能
  27. 27. 演習  手順に沿って、次のアニメーションを作ってください
  28. 28. 演習(1)  アニメーションリストの作成
  29. 29. 演習(2)  「Idle」アニメーション作成
  30. 30. 演習(2)  「Walk」アニメーション作成 normal normal normal leftfoot rightfoot
  31. 31. Cocos2d-x (JS) との連携
  32. 32. リソース書き出し  プロジェクトに反映するため、Cocos Studioよりリ ソースの書き出しを行う
  33. 33. リソース書き出し  プロジェクトの「res」フォルダに出力される  「resource.js」へは反映されないため、必要に応じて jsonファイルのパスなど記述すること
  34. 34. UI表示の準備  project.jsonの編集  Cocosのプロジェクト作成時に、エディタとしてCocos Studioにチェックを入れておけば、この作業は不要
  35. 35. UI表示の準備  resource.jsの編集  Cocosのプロジェクト作成時に、エディタとしてCocos Studioにチェックを入れておけば、この作業は不要
  36. 36. UI表示  app.jsの編集
  37. 37. プロジェクト実行  Cocos Studioよりプロジェクトを実行
  38. 38. プロジェクト実行
  39. 39. アニメーション実行  app.jsの編集
  40. 40. アニメーション実行  app.jsの編集
  41. 41. 追加アニメーション  app.jsの編集
  42. 42. 追加アニメーション
  43. 43. Android APK生成
  44. 44. Android APK出力設定  Android APK生成に必要な設定を行う
  45. 45. APK出力  packageフォルダに出力される
  46. 46. 作業はここまで
  47. 47. 参考になるサイト  Cocos公式Wiki http://www.cocos2d- x.org/wiki/Cocos2d-JS  Cocos2d-JS APIリファレンス http://cocos2d-x.org/wiki/Reference  Qiita (tag: cocos2d-js) https://qiita.com
  48. 48. おわり  ありがとうございました

×