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

1. Cocos2d-x(JS) ハンズオン #5
Cocos Studioと
Cocos2d-x (JS)との連携
株式会社TKS2 清水友晶

2. 清水 友晶
 株式会社TKS2
アプリ開発コンサル
Cocos2d-xサポート
スマホアプリ開発
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: ゲームエンジン調査
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. もくじ
 Cocos Studioについて
 Cocos Studioとは
 Cocosのインストール
 Cocos Studioの設定
 エディタの使い方
 基本的な使い方
 リソース追加
 アニメーション作成
 Cocos2d-x (JS) との連携
 Android APK生成

6. Cocos Studioについて

7. Cocos Studio
 旧名: CocoStudio
 最新版: Cocos Studio v3.10β
 動作環境: Windows, Mac
 特徴:
 UIエディタ
 アニメーションエディタ
（含:スケルタルアニメーション）
 シミュレータ（デザイン用）
 Win,Mac,iPhone,Android向けビルド
 ipa, apk生成
 ブラウザアプリ対応

9. Cocosのインストール

10. http://cocos2d-x.org/download/
Cocosダウンロード

11. Cocosインストール

12. Cocos起動

13. 新規プロジェクト作成
 「New Project」ボタンクリック

14. 新規プロジェクト作成
 Project Name … プロジェクト名
 Project Path … プロジェクトを配置するフォルダ
 Engine Version … Cocos2d-xのバージョン
 Engine Type … エンジンの状態
 Precompiled Library … コンパイル済み
 Source Code … ソースコード
 Language … 開発言語
 Editor … エディタ
 SDKs … SDKBOX

15. Cocosの設定
 他バージョンのCocos2d-xを導入したい場合
 Cocos2d-xフォルダにCocos2d-xを配置する
（現在、Macのみ認識可
Cocos Studio上ではWindowsでも認識する）

16. Cocos Studio起動

17. Cocos Studioの設定

18. Android Path設定

19. 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に同意した
うえで利用すること

20. エディタの使い方

21. 基本的な使い方
オ
ブ
ジ
ェ
ク
ト
プ
ロ
パ
テ
ィ
リ
ソ
ー
ス
ツール
アニメーション
ワーク

22. 編集前にここをチェック
 必須ではないが、事前にチェックしておくことで、ア
ニメーション編集時に必要な項目が最初から表示され
るようになる

23. 画像のダウンロード
 今回使用する画像をダウンロードしてください
http://tks2.net/handson/20150315.zip

24. リソースの追加
 画像があるフォルダから「リソース」ペインに
ドラッグアンドドロップ

25. オブジェクトの配置
 必要なオブジェクトを「オブジェクト」ペインから
「ワーク」ペインにドラッグアンドドロップ
 注意: 「リソース」ペインから画像をドラッグアンッドロップして
オブジェクトを追加することもできますが、操作に慣れるまでは
「オブジェクト」ペインから追加するようにしてください

26. 演習
 次の画面を作ってください

27. アニメーション作成
 「ワーク」「プロパティ」「アニメーション」ペイン
を使って作業を行う
 「アニメーション」ペインにおいて、変更したいタイ
ミングに「タイムライン」を移動して、必要なプロパ
ティを変更する
 不要なフレームは削除する
タイムライン
必要な場所にドラッグアンドドロップで移動

28. アニメーションリスト作成
 タイムライン上に複数のアニメー
ションを作成することが可能
 それぞれのアニメーションを命名
することで、プログラム上でもそ
の名前でアニメーションを実行可
能

29. 演習
 手順に沿って、次のアニメーションを作ってください

30. 演習(1)
 アニメーションリストの作成

31. 演習(2)
 「Idle」アニメーション作成

32. 演習(2)
 「Walk」アニメーション作成
normal normal normal
leftfoot rightfoot

33. Cocos2d-x (JS) との連携

34. リソース書き出し
 プロジェクトに反映するため、Cocos Studioよりリ
ソースの書き出しを行う

35. リソース書き出し
 プロジェクトの「res」フォルダに出力される
 「resource.js」へは反映されないため、必要に応じて
jsonファイルのパスなど記述すること

36. UI表示の準備
 project.jsonの編集
 Cocosのプロジェクト作成時に、エディタとしてCocos
Studioにチェックを入れておけば、この作業は不要

37. UI表示の準備
 resource.jsの編集
 Cocosのプロジェクト作成時に、エディタとしてCocos
Studioにチェックを入れておけば、この作業は不要

38. UI表示
 app.jsの編集

39. プロジェクト実行
 Cocos Studioよりプロジェクトを実行

40. プロジェクト実行

41. アニメーション実行
 app.jsの編集

42. アニメーション実行
 app.jsの編集

43. 追加アニメーション
 app.jsの編集

44. 追加アニメーション

45. Android APK生成

46. Android APK出力設定
 Android APK生成に必要な設定を行う

47. APK出力
 packageフォルダに出力される

48. 作業はここまで

49. 参考になるサイト
 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

50. おわり
 ありがとうございました