kun hu (google) and shun lin

1. Cocos2d-x & HTML5
胡坤 Google Chrome/HTML5 开发技术推广经理
林顺 Cocos2d-html5 核心开发者
Google Confidential and Proprietary 1

2. HTML5游戏引擎 之 资源加载
Google Confidential and Proprietary 2

3. Cocos2d-HTML5的设计思想
Google Confidential and Proprietary 3

4. HTML5游戏引擎 之 性能
• Update & Draw
• > 60帧 = Kill Browser
• Inner Timer à Fixed Tick
• Canvas in Canvas
Google Confidential and Proprietary 4

5. Cocos2d-HTML5 内部时钟
内部时钟的实现，保证固定的步长
Loop1 Loop2 Loop3 Loop n
t0 t1 t2 t
S =S0+ t *v;
Google Confidential and Proprietary 5

6. HTML5游戏引擎 之 兼容性
Google Confidential and Proprietary 6

7. Cocos2d-HTML5的设计思想
Google Confidential and Proprietary 7

8. Cocos2d-HTML5的设计思想
Google Confidential and Proprietary 8

9. 林顺 Sean Lin
Cocos2d-html5 核心开发者
Cocos2d-x核心开发者!
Google Confidential and Proprietary 9

10. Cocos2d-html5简介
• 原生Javascript
• 兼容cocos2d-x API
• 兼容JS binding API
• MIT license!
Google Confidential and Proprietary 10

11. Cocos2d-HTML5框架
Games
Cocos2D
Box2d
Graphic Menu CocosDenshion
Physics
Audio
Canvas WebGL DOM
PC Mobile Phone
Chrome Safari FireFox ...... Chrome Safari ...... ......
Google Confidential and Proprietary 11

12. 引擎支持的图层结构
Google Confidential and Proprietary 12

13. 游戏的发布
HTML5&GAMES
cocos2d&html5
For$HTML5,$Canvas$and$WebGL
COCOS2D&HTML5
cocos2d&js(binding
Same%API,%Quick%Publish
cocos2d&x(game( CANVAS
resources
Easy%Por)ng,%Low%cost
Google Confidential and Proprietary 13

14. 跨平台性能
iOS Android WP Windows OS X Ubuntu Browser
cocos2d-iphone
cocos2d-android
cocos2d-xna
cocos2d-x
2dx lua binding
cocos2d-html5
Google Confidential and Proprietary 14

15. Write once, run anywhere
Games&Wri*en&in&JS
JavaScript
SAME&JS&API
JS&API cocos2d4html5
JS&Binding cocos2d4? CANVAS
Google Confidential and Proprietary 15

16. Cocos2d-HTML5特性
• -x，-iphone开发者的无缝过渡
• cocos or cc 名字空间
• 使用、安装简单
Google Confidential and Proprietary 16

17. HelloWorld C++和JS代码对比
Google Confidential and Proprietary 17

18. 代码对比
//C++
// add "HelloWorld" splash screen"
CCSprite* pSprite = CCSprite::spriteWithFile("HelloWorld.png");
pSprite->setPosition( ccp(size.width/2, size.height/2) );
//JS
// add "HelloWorld" splash screen”
var pSprite = cc.Sprite.spriteWithFile(“HelloWorld.png");
pSprite.setPosition( cc.ccp(size.width/2, size.height/2) );
Google Confidential and Proprietary 18

19. 俄罗斯方块Demo
Google Confidential and Proprietary 19

20. Layer的继承和鼠标消息的处理
Google Confidential and Proprietary 20

21. 游戏的移植和开发
C++ API： JS API：
CCDirector cc.Director
CCDirector::sharedDirector(); cc.Director.sharedDirector();
CCDirector::sharedDirector()- cc.Director.sharedDirector() .
>getWinSize(); getWinSize();
CCScene cc.Scene
CCLayer cc.Layer
CCSprite cc.Sprite
Google Confidential and Proprietary 21

22. RoadMap
Alpha Beta Chrome Other Mobile
Game Browsers Browsers
2012
DOM
Canvas JS binding WebGL
Menu
Google Confidential and Proprietary 22

23. Google Confidential and Proprietary 23