GCS2014で講演した cocos2d-x javascript bindingsについてのスライドとなります。 サンプルソースコード https://github.com/Seasons7/Hitohude

1. GCS2014
cocos2d-x
JavaScript Bindingsによる
マルチプラットフォーム開発
Keisuke Hata (@Seasons)

2. 自己紹介
•
cocos2d Japan evangelist
•
@ Seasons
•
@ cocos2dfan_jp
•
f cocos2d facebook Group
•
B Seasons.NET
•
S SlideShare
•
執筆、連載活動(Mobile Touch)

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

4. cocos2d-x

5. cocos2d-x
•
オープンソースプロジェクト
•
中国、米国で開発
•
2Dゲームフレームワーク
•
OpenGL ES 1.1/2.0対応
•
マルチプラットフォーム対応
(iOS,Mac,Android,Windows…)
•
ネイティブ言語、スクリプト対
応
•
v2.x系、v3.x系の2系統
cocos2d-x
cocos2d-html5
cocos2d-xna

6. 開発環境

7. 開発環境
•
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)

8. JavaScript
Bindings

9. JavaScript Bindings(JSB)
•
One Source on マルチ環境
•
JavaScriptを共通言語
（cocos2dのプラットフォームで共有）
•
cocos2dの機能をフルサポート
•
高いパフォーマンス
Common JavaScript
SourceCode
cocos2d-iphone
cocos2d-mac
cocos2d-x
cocos2d-html5

10. JSBの実装
•
JavaScript Bindingsの実装の
種類は、2種類
•
•
zynga repository
•
cocos2d-x repository
基本仕様は同じであるが、
実装の内容が異なる。
zyngaのiPhone版のjsbが
ベースとなっている。
JavaScript Bindings
cocos2d-x
zynga

11. JSB アーキテクチャ
JavaScript
(JavaScript : *.js )
SpiderMonkey
(VM)
JavaScript Bindings
(C++ : *.cpp)
Native Library
(C++,C : *.c, *.cpp)

12. SpiderMonkey
•
C言語で記述されたJavaScript
エンジン
( v27搭載[2014/02/16現在] )
•
SpiderMoneky
(original)
オープンソースプロジェクト
•
MPL/GPL/LGPLのトリプル
ライセンス
•
cocos2d組み込み用にカスタ
マイズ(ビルド向け)
SpiderMoneky v27
(for cocos2d)
cocos2d-x

13. JSBの機能
•
cocos2d-xのクラスを利用可能
•
C/C++の資産の再利用=>JS側からコール可能
•
カスタマイズが可能
•
JS->Cppへの変換の自動化
•
JS上でネイティブオブジェクトのサブクラス化
•
Callbackのサポート
•
デバッガのサポート

14. APIの互換性
•
cocos2d-html5との互換性が担保。移植が容易。
同じソースコードを利用可能
*.js
cocos2d-html5
cocos2d-x

15. JSBの仕組み
1. JS側からCpp側のネイティブの
cocos2dライブラリを呼び出す
JS
Cpp
（要プロキシオブジェクト）。
2. 構造体などは、Cpp側のコード
にアクセスするのではなく、
JS側でそのまま移植。
JS
cc.p = function( x, y )
{ return {x:x, y:y}; };

16. オブジェクトライフサイクル
xxxx.create()
•
•
JSとCppのオブジェクトライ
フサイクル管理用にProxyオブ
ジェクトを用意。
ネイティブオブジェクトの
破棄のタイミングでプロキシ
オブジェクト経由でJSオブ
ジェクトを破棄
Cpp Object
Proxy Object
JS Object
Hash Table
Proxy Object
Proxy Object

17. デバッグ手法

18. デバッグ手法
1. CCLOG=cc.logの出力
cc.log( 出力したい文字列 or
オブジェクト)
2. Firefoxを利用した
高性能デバッガ
Firefoxリモートデバッガ
Pause, Continue
上記2つの詳細な解説は、
「cocos2d javascript bindingsで
マルチプラットフォーム開発」
第10,11回で解説。
Step In, Out
Watch
Breakpoint

19. 開発支援ツール

20. SublimeText
エディタ
•
http://
www.sublimetext.com
•
テキストエディタ
•
軽快な動作
•
カスタマイズ性が高い
•
豊富なプラグイン

21. WebStorm
エディタ
•
http://www.jetbrains.com/
webstorm/
•
Web開発専用統合環境
•
高機能(コード補完、エラー
チェックなど)
•
豊富なプラグイン

22. TexturePacker
テクスチャ
•
http://
www.codeandweb.com/
texturepacker
•
テクスチャ汎用ツール
•
•
減色
•
•
アトラス化
圧縮
cocos2d対応

23. GlyphDesigner
フォント
•
http://71squared.com/ja/
glyphdesigner
•
ビットマップフォントツール
•
cocos2d対応(CCBMFont)

24. ParticleDesigner
パーティクル
•
http://71squared.com/
particledesigner
•
パーティクル生成ツール
•
cocos2d対応(CCParticle)

25. Dash
リファレンス
•
https://itunes.apple.com/jp/
app/dash-docs-snippets/
id458034879?mt=12
•
リファレンスツール
•
軽快な動作
•
スニペット機能対応
•
cocos2dシリーズ対応

26. 各種デモ

27. デモ一覧
•
JSB Debugger on Firefox 27
•
JSB Sample Game