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( 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