cocos2d-js（一）引擎的工作原理和文件的调用顺序

Cocos2d-js可以实现在网页上运行高性能的2D游戏，实现原理是通过HTML5的canvas标签，该引擎采用Javascript编写，并且有自己的一些语法，因为没有成熟的IDE，一般建立工程是通过WebStorm手动创建文件与文件夹，实现将引擎跑起来，下面详解一下运行过程。

首先，用户最先访问到的是index.html页面，在index.html中引入引擎的启动文件CCBoot.js和自己编写的游戏的启动文件main.js。除此之外，还需要在工程的根目录下写一个project.json，来描述工程，引擎会自动读入这个文件，确定工程的类型、功能设置、引入的模块、自己的js文件列表等。

一般是将cocos2d的引擎拷贝到自己的工程目录下，使用frameworks/cocos2d-html5这个目录下的引擎文件。

下面的流程图说明了cocos2d的基本工作流程：

下面我们以frameworks/cocos2d-html5/template为例分析一下这个工程。

工程的运行结果为在屏幕上显示Hello、屏幕分辨率、logo等内容。

首先分析一下index.html这个文件。

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <Meta name="viewport" content="width=321,user-scalable=no" />
    <Meta name="apple-mobile-web-app-capable" content="yes"/>
    <Meta name="full-screen" content="yes"/>
    <Meta name="screen-orientation" content="portrait"/>
    <Meta name="x5-fullscreen" content="true"/>
    <Meta name="360-fullscreen" content="true"/>
    <style>
        body,canvas,div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0,0);
        }
    </style><pre name="code" class="html"><script src="../CCBoot.js"></script>
<script src="main.js"></script>
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="1920" height="1920"></canvas>
</body>

Head中的大部分标签都是用于说明一些显示的属性，如果是手机网页应用则需要设置这些，如果是普通的网页应用则不必设置，可以省略成如下这样：

<head>
    <title>Title</title>
    <Meta name="viewport" content="user-scalable=no"/>
    <Meta charset="utf-8"/>
</head>

最重要的是js的引入和canvas标签：

<script src="../CCBoot.js"></script>
<script src="main.js"></script>

这个工程在body中还载入了loading.js，这个只是启动时的loading动画，可以不加。

<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="1920" height="1920"></canvas>
</body>

要特别注意canvas的id，在json中需要声明它，供引擎使用。

接下来，通过CCBoot.js，引擎会去加载和解析project.json，注意把它放在工程的根目录下，下面我们来看看这个json文件的内容：

{
    "debugMode" : 1,"noCache": true,"showFPS" : true,"frameRate" : 60,"id" : "gameCanvas","renderMode" : 0,"engineDir":"../","modules" : ["cocos2d"],"jsList" : [
        "src/resource.js","src/myApp.js"
    ]
}

按照json的标准格式，这个文件说明了工程的调试模式、是否缓存、是否显示帧率、最大帧率、canvas的id、渲染模式、还有引擎的路径，注意引擎路径这里，因为这个模版工程是寄生在frameworks之内的，因此它的上一层目录就是引擎，对于一般的工程一定要找到引擎的正确位置，在frameworks/cocos2d-html5。

其中，jList是要加载的js文件列表，在这里加载后，以后在任何文件的任何位置都可以访问这些js文件。

下面我们看一下工程的目录结构：

src中一般用于存放自己的js文件，也就是jsList中要加载的那些文件，而资源文件一般放到res中，为了保证性能，资源文件不应当在一开始就全部加载到工程中，而应当进行懒加载，即使用时才加载，为了方便加载资源，一般会写一个resource.js来对资源路径和分类进行封装，下面我们来看看resource.js的内容：

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

var g_resources = [
    //image
    s_HelloWorld,s_CloseNormal,s_CloseSelected

];

当前工程只有三种图片，HelloWorld的logo、一个按钮的两种状态，首先定义变量存储图片路径，然后用一个数组存储一次性要用到的所有资源，因为这个模版只有一个场景，因此只需要一个资源数组，这个资源数组可以在main.js中进入场景时传入，实现在场景切换完成后同时实现资源的加载。

由于index.html中包含了main.js，因此会运行main.js，下面我们看main.js的内容：

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js,please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    var designSize = cc.size(480,800);
    var screenSize = cc.view.getFrameSize();

    if(!cc.sys.isNative && screenSize.height < 800){
        designSize = cc.size(320,480);
        cc.loader.resPath = "res/Normal";
    }else{
        cc.loader.resPath = "res/HD";
    }
	
    cc.view.setDesignResolutionSize(designSize.width,designSize.height,cc.ResolutionPolicy.SHOW_ALL);

    //load resources
    cc.LoaderScene.preload(g_resources,function () {
        cc.director.runScene(new MyScene());
    },this);
};
cc.game.run();

这里用到了cc.game这个类，重写了它的onStart方法，在cocos2d-js中，所有的API都是以cc开头，全部使用点语法，在调用cc.game.run()方法之后，cc.game会自动调用onStart方法，从而实现工程设置与场景的加载。

注意最后一句：

//load resources
    cc.LoaderScene.preload(g_resources,this);

用到了cc.LoaderScene的preload方法来切换场景，这个方法的参数如下：

cc.LoaderScene.preload(resources,cb,target)

其中第一个参数是在切换场景时要加载的资源，这里的g_resources是在上述的resource.js中定义的；第二个参数是要加载的内容，用大括号包围，其内写上切换的代码；第三个参数是目标，一般都是填写this。

要实现切换场景，使用的是cc.director的runScene方法，director的含义是导演，这个类的命名十分的形象，说明这个类是控制场景切换和游戏走向的，可以从中获取场景的一些数据和切换场景。

传入的参数是一个场景的实例，MyScene这个类是在哪里定义的呢？注意到jsList中还有一个文件myApp.js没被提到过，它便是定义MyScene类的文件。

它的代码如下：

var MyLayer = cc.Layer.extend({
    helloLabel: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.getWinSize();

        // add a "close" icon to exit the progress. it's an autorelease object
        var closeItem = new cc.MenuItemImage(
            s_CloseNormal,s_CloseSelected,function () {
                cc.log("close");
            },this);
        closeItem.setAnchorPoint(0.5,0.5);

        var menu = new cc.Menu(closeItem);
        menu.setPosition(0,0);
        this.addChild(menu,1);
        closeItem.setPosition(size.width - 20,20);

        /////////////////////////////
        // 3. add your codes below...
        // add a label shows "Hello World"
        // create and initialize a label
        this.helloLabel = new cc.LabelTTF("Hello","Impact",38);
        // position the label on the center of the screen
        this.helloLabel.setPosition(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 = new cc.Sprite(s_HelloWorld);
        this.sprite.setAnchorPoint(0.5,0.5);
        this.sprite.setPosition(size.width / 2,size.height / 2);
        this.sprite.setScale(size.height / this.sprite.getContentSize().height);
        this.addChild(this.sprite,0);
    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});

首先第一行可以看到对MyLayer类的定义，这里先提一下，cocos2d-JS中对类的继承是通过调用extend方法实现的，传入的为类的具体内容，例如要继承CCLayer类，则按第一行代码写var MyLayer = cc.Layer.extend({...});

再看最后几行代码，定义了一个继承自Scene的类，这里之所以有两个类，是因为切换场景时接收的是Scene，而为了实现用户输入，应到使用Layer，因此一个常用的用法是先定义一个Layer，再定义一个Scene，在Scene中实现把Layer加入到Scene中，然后在Layer中写代码。

CCLayer与CCScene都是继承自CCNode 的类，其中CCLayer比CCScene多了用户输入的功能。

这时候我们再回到上面的preload代码，在那里实例化MyScene，场景在实例化时会调用onEnter方法，只要重写onEnter方法，在场景中加入一个Layer即可。

接下来，在Layer中写主要代码即可，有关cocos2d-js的具体语法详见下一篇。

cocos2d-js（一）引擎的工作原理和文件的调用顺序

猜你在找的Cocos2d-x相关文章