【Cocos2d-html5游戏引擎学习笔记(2)】Hello Cocos2d-Html5

上一篇写到搭建开发环境，这篇当然就是传统的Hello World了。

首先在webstorm打开cocos2d-html5引擎目录，选择复制HelloHTML5World文件夹，然后再粘贴到根目录下，并且重新命名一下就可以了，如图

这样就是基本的项目，可以在此基础上进行开发了，当然，你也可以复制里面template文件夹，因为这个文件夹的中文意思就是“模板”，然后重新建立新的项目，只是这个模板要复杂一些，涉及到HD以及跨手机平台的内容，如果仅仅只是想在网页上做个游戏，我们开始复制的文件夹就足矣了。

想看一下效果就运行一下index.html就可以了。需要补充的一点就是一些浏览器可能运行不了，比如IE，谷歌的浏览器，会被阻止，所以就用火狐，safari这些浏览器吧，它们支持的很好，我就是重新安装了火狐的。。。

下面简单分析一下这些代码：

index.html的代码，学过html就不用多说了。

    
      //标题
    
    
    
    
    
    
    



      //画布的大小

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 () {
        if(cc.RenderDoesnotSupport()){
            //show Information to user
            alert("Browser doesn't support WebGL");
            return false;
        }
        // 初始化导演类
        var director = cc.Director.getInstance();

	//下面两行是打开Retian高清屏
        // enable High Resource Mode(2x, such as iphone4) and maintains low resource on other devices.
        //director.enableRetinaDisplay(true);

        // 打开FPS
        director.setDisplayStats(this.config['showFPS']);

        // 设置FPS帧速
        director.setAnimationInterval(1.0 / this.config['frameRate']);

        //加载资源，即一开始会有个百分进度加载就在这里使用的
        cc.LoaderScene.preload(g_resources, function () {
            director.replaceScene(new this.startScene());
        }, this);

        return true;
    }
});
var myApp = new cocos2dApp(HelloWorldScene);  //程序的主入口，游戏画面从这里开始

其实这个和cocos2dx里面那个委托cpp文件内容很相似，就是设置一下基本的配置信息。

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,
        frameRate:60,
        loadExtension:false,
        renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
        tag:'gameCanvas', //the dom element to run cocos2d on
        engineDir:'../cocos2d/',
        //SingleEngineFile:'',
        appFiles:[
            'src/resource.js',
            'src/myApp.js'//如果自己新建的js文件需要在这里进行注册添加
        ]
    };

    if(!d.createElement('canvas').getContext){
        var s = d.createElement('div');
        s.innerHTML = '
Your browser does not support HTML5 canvas!
' +
            '
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.
' +
            '';
        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 = 'Packed_Release_File.js'; //IMPORTANT: Un-comment this line if you have packed all files into one

        document.ccConfig = c;
        s.id = 'cocos2d-html5';
        d.body.appendChild(s);
        //else if single file specified, load singlefile
    });
})();

resource.js

在开始进行加载资源的时候，最好把用到的所有图片声音瓦片地图等等资源文件都写到这里面去，这样在游戏运行过程中就不会出现页面加载资源卡顿的现象了。

每添加一个资源，都还需要在数组中也添加一下

var s_HelloWorld = "res/HelloWorld.png";
var s_CloseNormal = "res/CloseNormal.png";
var s_CloseSelected = "res/CloseSelected.png";

var g_resources = [
    //image
    {src:s_HelloWorld},
    {src:s_CloseNormal},
    {src:s_CloseSelected}

    //plist

    //fnt

    //tmx

    //bgm

    //effect
];

好了，基本的主要文件就这些了，后面我们就要开始真枪实战进行开发了，欢迎继续关注~