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のインストール

http://cocos2d-x.org/download/

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

おわり

ありがとうございました