06 html5 and cocos2d-x
DESCRIPTION
kun hu (google) and shun linTRANSCRIPT
Google Confidential and Proprietary
胡坤 Google Chrome/HTML5 开发技术推广经理 林顺 Cocos2d-html5 核心开发者
Cocos2d-x & HTML5
1
Google Confidential and Proprietary
HTML5游戏引擎 之 资源加载
2
Google Confidential and Proprietary
Cocos2d-HTML5的设计思想
3
Google Confidential and Proprietary
HTML5游戏引擎 之 性能
• Update & Draw
• > 60帧 = Kill Browser
• Inner Timer à Fixed Tick
• Canvas in Canvas
4
Google Confidential and Proprietary
Cocos2d-HTML5 内部时钟
内部时钟的实现,保证固定的步长
5
t0 tt1 t2
S =S0+ t *v;
Loop1 Loop2 Loop3 Loop n
Google Confidential and Proprietary
HTML5游戏引擎 之 兼容性
6
Google Confidential and Proprietary
Cocos2d-HTML5的设计思想
7
Google Confidential and Proprietary
Cocos2d-HTML5的设计思想
8
Google Confidential and Proprietary 9
林顺 Sean Lin Cocos2d-html5 核心开发者 Cocos2d-x核心开发者!
Google Confidential and Proprietary
Cocos2d-html5简介
• 原生Javascript
• 兼容cocos2d-x API
• 兼容JS binding API
• MIT license!
10
Google Confidential and Proprietary
Cocos2d-HTML5框架
Cocos2DGraphic
Canvas WebGL
CocosDenshionAudio
Box2dPhysics
Games
PC
Chrome Safari FireFox ......
Mobile Phone
Chrome Safari ...... ......
Menu
DOM
11
Google Confidential and Proprietary
引擎支持的图层结构
12
Google Confidential and Proprietary
游戏的发布
13
COCOS2D&HTML5
CANVAS
HTML5&GAMES
For$HTML5,$Canvas$and$WebGL
cocos2d&html5
Same%API,%Quick%Publish
cocos2d&js(binding
cocos2d&x(game(resources
Easy%Por)ng,%Low%cost
Google Confidential and Proprietary
跨平台性能
iOS
cocos2d-iphone
cocos2d-x
cocos2d-android
Android WP BrowserWindows Ubuntu
2dx lua binding
OS X
cocos2d-html5
cocos2d-xna
14
Google Confidential and Proprietary
Write once, run anywhere
Games&Wri*en&in&JS
JS&Binding cocos2d4?
JS&API
SAME&JS&API
cocos2d4html5
CANVAS
15
JavaScript������
Google Confidential and Proprietary
Cocos2d-HTML5特性
• -x,-iphone开发者的无缝过渡
• cocos or cc 名字空间
• 使用、安装简单
16
Google Confidential and Proprietary
HelloWorld C++和JS代码对比
17
Google Confidential and Proprietary
代码对比
//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) );
18
Google Confidential and Proprietary
俄罗斯方块Demo
19
Google Confidential and Proprietary
Layer的继承和鼠标消息的处理
20
Google Confidential and Proprietary
游戏的移植和开发
C++ API:
CCDirector
CCDirector::sharedDirector();
CCDirector::sharedDirector()->getWinSize();
CCScene
CCLayer
CCSprite
21
JS API:
cc.Director
cc.Director.sharedDirector();
cc.Director.sharedDirector() .getWinSize();
cc.Scene
cc.Layer
cc.Sprite
Google Confidential and Proprietary
RoadMap
Alpha Beta
DOMMenu
ChromeGame
Canvas WebGLJS binding
Other Browsers
Mobile Browsers
2012
22
Google Confidential and Proprietary 23