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