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(new this.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