cocos2d-x JavaScript Bindingsによる マルチプラットフォーム開発

GCS2014

Keisuke Hata (@Seasons)

自己紹介• cocos2d Japan evangelist

• Seasons

• cocos2dfan_jp

• cocos2d facebook Group

• Seasons.NET

• SlideShare

• 執筆、連載活動(Mobile Touch)

@

@

f

B

S

アジェンダ1. cocos2d-x 2. 開発環境 3. JavaScript Bindings 4. デバッグ手法 5. 開発支援ツール 6. デモ

cocos2d-x

cocos2d-x• オープンソースプロジェクト

• 中国、米国で開発

• 2Dゲームフレームワーク

• OpenGL ES 1.1/2.0対応

• マルチプラットフォーム対応(iOS,Mac,Android,Windows…)

• ネイティブ言語、スクリプト対応

• v2.x系、v3.x系の2系統

cocos2d-x

cocos2d-xna

cocos2d-html5

開発環境

開発環境

• Windows, Mac, Linux PC

• C++,C言語

• Lua, JS Binding対応

• ソースコード共通Windows, Mac, Linux

C++, C

Lua JS

CocoStudioは、Windowsでのみ 動作。利用したい環境にあわせて

OS使い分けると良い。メインOS Parallels Desktop, VMWare

(Mac, Windows, Linux)

or

JavaScript Bindings

JavaScript Bindings(JSB)

• One Source on マルチ環境

• JavaScriptを共通言語（cocos2dのプラットフォームで共有）

• cocos2dの機能をフルサポート

• 高いパフォーマンス

Common JavaScript SourceCode

cocos2d-iphone cocos2d-mac

cocos2d-x

cocos2d-html5

JSBの実装

• JavaScript Bindingsの実装の種類は、2種類

• zynga repository

• cocos2d-x repository

• zyngaのiPhone版のjsbがベースとなっている。

JavaScript Bindings

cocos2d-x zynga

基本仕様は同じであるが、 実装の内容が異なる。

JSB アーキテクチャJavaScript

(JavaScript : *.js )

Native Library (C++,C : *.c, *.cpp)

JavaScript Bindings (C++ : *.cpp)

SpiderMonkey (VM)

SpiderMonkey• C言語で記述されたJavaScriptエンジン( v27搭載[2014/02/16現在] )

• オープンソースプロジェクト

• MPL/GPL/LGPLのトリプルライセンス

• cocos2d組み込み用にカスタマイズ(ビルド向け)

SpiderMoneky (original)

SpiderMoneky v27 (for cocos2d)

cocos2d-x

JSBの機能• cocos2d-xのクラスを利用可能

• C/C++の資産の再利用=>JS側からコール可能

• カスタマイズが可能

• JS->Cppへの変換の自動化

• JS上でネイティブオブジェクトのサブクラス化

• Callbackのサポート

• デバッガのサポート

APIの互換性• cocos2d-html5との互換性が担保。移植が容易。

cocos2d-xcocos2d-html5

*.js

同じソースコードを利用可能

JSBの仕組み

1. JS側からCpp側のネイティブのcocos2dライブラリを呼び出す（要プロキシオブジェクト）。

2. 構造体などは、Cpp側のコードにアクセスするのではなく、JS側でそのまま移植。

JS Cpp

JS cc.p = function( x, y ) { return {x:x, y:y}; };

オブジェクトライフサイクル

• JSとCppのオブジェクトライフサイクル管理用にProxyオブジェクトを用意。

• ネイティブオブジェクトの破棄のタイミングでプロキシオブジェクト経由でJSオブジェクトを破棄

JS Object

Proxy Object

Cpp Object

Proxy Object

Proxy Object

Hash Table

xxxx.create()

Proxy Object

デバッグ手法

デバッグ手法1. CCLOG=cc.logの出力

2. Firefoxを利用した高性能デバッガ

上記2つの詳細な解説は、 「cocos2d javascript bindingsでマルチプラットフォーム開発」

第10,11回で解説。

cc.log(“出力したい文字列” or オブジェクト)

Firefoxリモートデバッガ

Pause, Continue

Step In, Out

Watch

Breakpoint

開発支援ツール

SublimeText

• http://www.sublimetext.com

• テキストエディタ

• 軽快な動作

• カスタマイズ性が高い

• 豊富なプラグイン

エディタ

WebStorm

• http://www.jetbrains.com/webstorm/

• Web開発専用統合環境

• 高機能(コード補完、エラーチェックなど)

• 豊富なプラグイン

エディタ

TexturePacker• http://www.codeandweb.com/texturepacker

• テクスチャ汎用ツール • アトラス化

• 減色

• 圧縮

• cocos2d対応

テクスチャ

GlyphDesigner

• http://71squared.com/ja/glyphdesigner

• ビットマップフォントツール

• cocos2d対応(CCBMFont)

フォント

ParticleDesigner

• http://71squared.com/particledesigner

• パーティクル生成ツール

• cocos2d対応(CCParticle)

パーティクル

Dash

• https://itunes.apple.com/jp/app/dash-docs-snippets/id458034879?mt=12

• リファレンスツール

• 軽快な動作

• スニペット機能対応

• cocos2dシリーズ対応

リファレンス

各種デモ

デモ一覧

• JSB Debugger on Firefox 27

• JSB Sample Game