GCS2014

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

Keisuke Hata (@Seasons)
自己紹介
•

cocos2d Japan evangelist

•

@ Seasons

•

@ cocos2dfan_jp

•

f cocos2d facebook Group

•

B Seasons.NET

•

S SlideShare

•

執筆、連載活動(Mobile Touch)
アジェンダ
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-html5

cocos2d-xna
開発環境
開発環境
•

Windows, Mac, Linux PC

•

C++,C言語

•

Lua, JS Binding対応

•

Lua

JS
C++, C

Windows, Mac, Linux

ソースコード共通

or
CocoStudioは、Windowsでのみ

動作。利用したい環境にあわせて

OS使い分けると良い。

メインOS

Parallels Desktop, VMWare
(Mac, Windows, Linux)
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 )

SpiderMonkey
(VM)

JavaScript Bindings
(C++ : *.cpp)

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

C言語で記述されたJavaScript
エンジン

( v27搭載[2014/02/16現在] )

•

SpiderMoneky
(original)

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

•

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

•

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

SpiderMoneky v27
(for cocos2d)

cocos2d-x
JSBの機能
•

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

•

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

•

カスタマイズが可能

•

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

•

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

•

Callbackのサポート

•

デバッガのサポート
APIの互換性
•

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

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

*.js
cocos2d-html5

cocos2d-x
JSBの仕組み
1. JS側からCpp側のネイティブの
cocos2dライブラリを呼び出す


JS

Cpp

(要プロキシオブジェクト)。

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

JS側でそのまま移植。

JS

cc.p = function( x, y )
{ return {x:x, y:y}; };
オブジェクトライフサイクル
xxxx.create()
•

•

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

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

Cpp Object
Proxy Object
JS Object

Hash Table
Proxy Object
Proxy Object
デバッグ手法
デバッグ手法
1. CCLOG=cc.logの出力

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

2. Firefoxを利用した

高性能デバッガ
Firefoxリモートデバッガ
Pause, Continue
上記2つの詳細な解説は、
「cocos2d javascript bindingsで
マルチプラットフォーム開発」
第10,11回で解説。

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

Gcs2014 0225 cocos2d-xjsb