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