cocos2d-html5学习笔记（一）--游戏入口

cocos2d-html5是一个cocos2d系列的一个新成员，目前最新的版本是v2.0。关于这个游戏引擎的详细介绍我就不说了，想了解的话请到官方网站：cocos2d-html5。这是我第一次接触游戏引擎，今天就对这个游戏引擎进行了一点小探究。

首先简要讲解一些游戏的基本知识：游戏有一个或多个场景（Scene），每个场景又由多个图层组成，每个图层由文本（Label）、图片（Menu、Sprite等）组成。游戏由导演（Director）负责组织和协调这些元素。（详细的请看我转载的一篇博文：cocos2d-html5教程之重要概念）

Helloword讲解

探讨游戏入口之前，我们先新建一个场景。本文将官方的Helloworld示例简化了一下，修改了myApp.js。

//定义（新建）一个图层：Helloworld
var Helloworld = cc.Layer.extend({
    sprite: null,
    helloLabel: null,

    init: function () {
        //
        // 1. 调用父类的同名方法，初始化父类
        this._super();

        /
        // 2. 添加一个关闭菜单（在右下角）
        //
        // 获得画布的大小，其实可以理解为获得游戏的边界大小
        var size = cc.Director.getInstance().getWinSize();

        // 关闭菜单的菜单项
        var closeItem = cc.MenuItemImage.create(
            "res/CloseNormal.png",
            "res/CloseSelected.png",
            this,
            function () {
                history.go(-1);
            });

        //新建一个菜单，菜单有一个菜单项
        var menu = cc.Menu.create(closeItem);
        menu.setPosition(cc.PointZero());   //将菜单放到原点（注意，这里的原点在左下角）
        this.addChild(menu, 1);     //将菜单添加到Helloworld这个层里
        closeItem.setPosition(cc.p(size.width - 20, 20));   //设置菜单项的位置

        /
        // 3. add your codes below...
        // 添加文本“Hello world”到本层里去
        // 新建文本
        this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);
        this.helloLabel.setAnchorPoint(cc.p(0.5,0)); //将锚点设置到：中下
        // position the label on the center of the screen
        this.helloLabel.setPosition(cc.p(size.width / 2, 0));
        // add the label as a child to this layer
        this.addChild(this.helloLabel, 5);


        // 添加一张图片
        this.sprite = cc.Sprite.create("res/HelloWorld.png");
        this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));

        this.addChild(this.sprite, 0);

        return true;
    }
});

//定义(新建)一个场景，里面有一个图层
var HelloWorldScene = cc.Scene.extend({
    //进入场景时
    onEnter:function () {
        this._super();
        var layer = new Helloworld();
        layer.init();
        this.addChild(layer);
    }
});

运行效果:

 

游戏入口

我们已经有一个场景了，那么这个场景是怎样呈现出来的？

首先，将定义HelloWorldScene的js文件加载进来。在cocos2d.js中appFiles中添加

var c = {
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d:false,
        showFPS:true,
        frameRate:60,
        tag:'gameCanvas', //the dom element to run cocos2d on
        engineDir:'../lib/cocos2d/',
        //SingleEngineFile:'',
        appFiles:[
            'src/resource.js',
            'src/myApp.js'//add your own files in order here
        ]
    };

可以看到，这里还加载了resource.js，这个是预加载资源用的。资源开始加载从main.js这一句开始：cc.Loader.shareLoader().preload(g_ressources);

一切从这里开始：var myApp = new cocos2dApp(HelloWorldScene);

 这条语句在main.js最后一行;这一句相当于调用了cocos2dApp这个方法，并将HelloWorldScene作为参数传进去(其实cocos2dApp是一个类)。在cocos2dApp中，ctor是构造函数，初始化一些东西和预加载资源（ch5中的资源一定要预加载，不然会在使用资源的时候出现错误）。初始化和加载完资源后，applicationDidFinishLaunching这个方法就会被调用。在applicationDidFinishLaunching这个方法中，我们重点要看最后这一句：

 

// run
        director.runWithScene(new this.startScene());

这里this.startScene=HelloWorldScene; 就这样，我们的场景就呈现到我们的眼前。

创建我们自己的场景

Allenice.js

var AlleniceLayer = cc.Layer.extend({
    init: function () {
       this._super();
        var winSize=cc.Director.getInstance().getWinSize();

        var label=cc.LabelTTF.create("Allencie","Arial",48);
        label.setPosition(cc.p(winSize.width/2,winSize.height/2));
        this.addChild(label);

        return true;
    }
});

var AlleniceScene = cc.Scene.extend({
    //进入场景时
    onEnter:function () {
        this._super();
        var layer = new AlleniceLayer();
        layer.init();
        this.addChild(layer);
    }
});

加载js文件：

 appFiles:[
            'src/resource.js',
            'src/Allenice.js',
            'src/myApp.js'//add your own files in order here
        ]

修改main.js

var myApp = new cocos2dApp(AlleniceScene);

运行效果：

源码下载：http://t.cn/zlmzhFQ?u=1895120762&m=3504261167868399