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

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

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

Helloword讲解

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

//定义（新建）一个图层：Helloworldvar 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