06 html5 and cocos2d-x

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