cocos2d-html5模板分析

结构总览

js文件

src/myApp.js

src/resource.js

cocos2d.js

cocos2d-jsb.js

main.js

其他文件

build.xml

index.html

---

具体实现

myapp.js

var MyLayer = cc.Layer.extend(
{
isMouseDown :
false
,
helloImg :
null
,
helloLabel :
null
,
circle :
null
,
sprite :
null
,

init :
function
()
{

//////////////////////////////

// 1. super init first

this
._super();

/////////////////////////////

// 2. add a menu item with "X" image, which is clicked to quit the program

// you may modify it.

// ask director the window size

var
size = cc.Director.getInstance().getWinSize();

// add a "close" icon to exit the progress. it's an autorelease object

var
closeItem = cc.MenuItemImage.create(
s_CloseNormal,
s_CloseSelected,

function
()
{
cc.log(
"close"
);
},
this
);
closeItem.setAnchorPoint(cc.p(

.

,

.

));

var
menu = cc.Menu.create(closeItem);
menu.setPosition(cc.p(

,

));

this
.addChild(menu,

);
closeItem.setPosition(cc.p(size.width -

,

));

/////////////////////////////

// 3. add your codes below...

// add a label shows "Hello World"

// create and initialize a label

this
.helloLabel = cc.LabelTTF.create(
"Hello World"
,
"Impact"
,

);

// position the label on the center of the screen

this
.helloLabel.setPosition(cc.p(size.width /

, size.height -

));

// add the label as a child to this layer

this
.addChild(
this
.helloLabel,

);

// add "Helloworld" splash screen"

this
.sprite = cc.Sprite.create(s_HelloWorld);

this
.sprite.setAnchorPoint(cc.p(

.

,

.

));

this
.sprite.setPosition(cc.p(size.width /

, size.height /

));

this
.addChild(
this
.sprite,

);
}
}
);

var
MyScene = cc.Scene.extend(
{
onEnter :
function
()
{

this
._super();

var
layer =
new
MyLayer();

this
.addChild(layer);
layer.init();
}
}
);

 

resource.js

var
s_HelloWorld =
"HelloWorld.png"
;

var
s_CloseNormal =
"CloseNormal.png"
;

var
s_CloseSelected =
"CloseSelected.png"
;

var
g_ressources = [

//image

{
src : s_HelloWorld
},
{
src : s_CloseNormal
},
{
src : s_CloseSelected
}

//plist

//fnt

//tmx

//bgm

//effect

];

 

cocos2d.js

(
function
()
{

var
d = document;

var
c =
{
COCOS2D_DEBUG :

,
//0 to turn debug off, 1 for basic debug, and 2 for full debug

box2d :
false
,
chipmunk :
false
,
showFPS :
true
,
loadExtension :
false
,
frameRate :

,
tag :
'gameCanvas'
,
//the dom element to run cocos2d on

engineDir :
'../cocos2d/'
,

//SingleEngineFile:'',

appFiles : [

'src/resource.js'
,

'src/myApp.js'

//add your own files in order here

]
};

if
(!d.createElement(
'canvas'
).getContext)
{

var
s = d.createElement(
'div'
);
s.innerHTML =
'<h2>Your browser does not support HTML5 canvas!</h2>'
+

'<p>Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.Click the logo to download.</p>'
+

'<a href="http://www.google.com/chrome" target="_blank"><img src="http://www.google.com/intl/zh-CN/chrome/assets/common/images/chrome_logo_2x.png" border="0"/></a>'
;

var
p = d.getElementById(c.tag).parentNode;
p.style.background =
'none'
;
p.style.border =
'none'
;
p.insertBefore(s);

d.body.style.background =
'#ffffff'
;

return
;
}

window.addEventListener(
'DOMContentLoaded'
,
function
()
{

//first load engine file if specified

var
s = d.createElement(
'script'
);

/*********Delete this section if you have packed all files into one*******/


if
(c.SingleEngineFile && !c.engineDir)
{
s.src = c.SingleEngineFile;
}

else

if
(c.engineDir && !c.SingleEngineFile)
{
s.src = c.engineDir +
'platform/jsloader.js'
;
}

else

{
alert(
'You must specify either the single engine file OR the engine directory in "cocos2d.js"'
);
}

/*********Delete this section if you have packed all files into one*******/

//s.src = 'myTemplate.js'; //IMPORTANT: Un-comment this line if you have packed all files into one

d.body.appendChild(s);
document.ccConfig = c;
s.id =
'cocos2d-html5'
;

//else if single file specified, load singlefile

}
);
}
)();

 

main.js

/ this.config['frameRate']);

//load resources
cc.LoaderScene.preload(g_ressources, function ()
{
director.replaceScene(newthis.startScene());
}, this);

return true;
}
}
);

var myApp = new cocos2dApp(MyScene);

需要注意的地方

增加了资源需要手动在resource.js中添加相应的代码。

增加了js文件需要在cocos2d.js中的appfiles数组中增加相应代码。

在myApp.js文件中实现了一个Layer，并且在main.js调用了该Layer加入到启动Scene中。

在main.js中设置启动的scene，是否显示FPS,设置FrameRate，ScreenSize