您的位置：首页 > 移动开发 > Cocos引擎

cocos2d-html5模板分析

2013-08-14 18:18 501 查看
结构总览
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(
0
.
5
,
0
.
5
));

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

this
.addChild(menu,
1
);
closeItem.setPosition(cc.p(size.width -
20
,
20
));

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

// 3. add your codes below...

// add a label shows "Hello World"

// create and initialize a label

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

// position the label on the center of the screen

this
.helloLabel.setPosition(cc.p(size.width /
2
, size.height -
40
));

// add the label as a child to this layer

this
.addChild(
this
.helloLabel,
5
);

// add "Helloworld" splash screen"

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

this
.sprite.setAnchorPoint(cc.p(
0
.
5
,
0
.
5
));

this
.sprite.setPosition(cc.p(size.width /
2
, size.height /
2
));

this
.addChild(
this
.sprite,
0
);
}
}
);

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 :
2
,
//0 to turn debug off, 1 for basic debug, and 2 for full debug

box2d :
false
,
chipmunk :
false
,
showFPS :
true
,
loadExtension :
false
,
frameRate :
60
,
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

var cocos2dApp = cc.Application.extend(
{
config : document['ccConfig'],
ctor : function (scene)
{
this._super();
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config['COCOS2D_DEBUG'];
cc.initDebugSetting();
cc.setup(this.config['tag']);
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
},
applicationDidFinishLaunching : function ()
{
// initialize director
var director = cc.Director.getInstance();

var screenSize = cc.EGLView.getInstance().getFrameSize();
var resourceSize = cc.size(800, 450);
var designSize = cc.size(800, 450);

var searchPaths = [];
var resDirOrders = [];

searchPaths.push("res");
cc.FileUtils.getInstance().setSearchPaths(searchPaths);

var platform = cc.Application.getInstance().getTargetPlatform();
if (platform == cc.TARGET_PLATFORM.MOBILE_BROWSER)
{
if (screenSize.height > 450)
{
resDirOrders.push("HD");
}
else
{
resourceSize = cc.size(400, 225);
designSize = cc.size(400, 225);
resDirOrders.push("Normal");
}
}
else if (platform == cc.TARGET_PLATFORM.PC_BROWSER)
{
resDirOrders.push("HD");
}

cc.FileUtils.getInstance().setSearchResolutionsOrder(resDirOrders);

director.setContentScaleFactor(resourceSize.width / designSize.width);

cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

// turn on display FPS
director.setDisplayStats(this.config['showFPS']);

// set FPS. the default value is 1.0/60 if you don't call this
director.setAnimationInterval(1.0 / 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航