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

来源：互联网发布：知乎东南亚女人编辑：程序博客网时间：2024/04/29 21:41

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

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

Helloword讲解

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

[javascript] view plaincopy

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

[javascript] view plaincopy

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这个方法中，我们重点要看最后这一句：

[javascript] view plaincopy