【Cocos2d-html5】初识Cocos2d-html5

背景与前言

　　现在什么技术火？Android，ios，HTML5，人工智能，云计算……如此多的技术，而且发展非常快，大家都很迷茫，到底要学什么呢？我也很迷茫，只能走一步算一步。

　　但是人总是有理想的是吧。我的理想很简单：一步步实现我的下一个理想。大一的时候，我看了一部电影，叫《社交网络》，那时的理想就是让学校找我写代码。现在大三了，实现了这个理想，给我配了电脑，配了办公室。下一个理想，做出一番事业，然后去母校演讲。

　　做为一个男性，本能里应该对游戏感兴趣。我也很想写一个自己的游戏，想想，走进网吧，大家玩的都是你写的游戏，很有成就感。

　　再学习了android的cocos2d-x之后，又来研究了一下html5的版本，因为这个版本是有专人维护的，所以以后也不用担心更新问题。

从哪开始？

　　很多人学一个技术的时候根本不知道从哪里上手，确实，一个技术最难的应该就是入门了，只要入了门，多花点时间很容易就能掌握，这也正是中国的那句古话：师父领进门，修行在个人。

　　废话了这么多，cocos2d-html5（以后简称cocos2d吧）怎么入门呢？首先可以看官网（http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5），他有一个名叫Getting Started with Cocos2d-html5的文章。一般有一定规模的技术或项目都有这么一个文档，教你怎么快速的上手，那是不是照着这篇文章做就行了呢？在我写这篇日志的时候，那篇文章的教程是一个过时的教程，也就是说看那篇文章是没用的。（一般的项目是可以从这入门的。）

　　虽然教程过时了，但是它还是给我们指明了一个方向，那就是去看Hello World项目。

Hello World

　　我认为好的程序员应该养成这样一个习惯：学习新技术或者开发的时候，从hello world开始。

　　我们下载cocos2d的包，解压之后可以看到一个叫做HelloHTML5World的文件。这里面也就是我们第一个要研究的代码了。

　　这个项目不需要服务器容器，直接打开index.html就能看到效果。效果其实很简单，但是哪个游戏不是通过一系列的简单效果组成的呢？好了，直接看代码吧。

　　我们首先要看的是main.js，为什么首先看这个我后面会说的。

　　它定义了一个cocos2dApp，调用了cc.Application.extend()方法。如果有一定基础的人应该知道extend的意思，也就是继承。这个cocos2dApp继承了cc.Application，关于这个类我们也不多说，用的一般不多，基本只要用到一个方法applicationDidFinishLaunching。看名字就知道，这个方法是在程序加载完成的时候调用的。

　　在这个方法上面还有一个ctor方法，大家可以猜猜这个方法的作用，对了，就是构造函数。

　　好了，我们来一步步的解析代码吧。

　　首先是ctor，构造函数中传进来一个scene，这个scene我们后面就会看到。第一步就是调用父类构造函数，这个是需要注意的，很多错误就是没调用父类的构造函数造成的。下面的代码是一系列的配置，先配置了DEBUG的模式，它是从this.config里取出来的，那这个config是从哪里来的呢？我们会注意到，HelloHTML5World文件夹下还有一个cocos2d.js。这个文件就是配置文件了。继续往下，我们就直接看注释吧。

cc.initDebugSetting();//初始化debug设置
cc.setup(this.config['tag']);//装载页面上的canvas,这个tag就是canvas的id
//当程序资源在读取的时候，显示加载动画
cc.Loader.getInstance().onloading = function () {
cc.LoaderScene.getInstance().draw();
};
//加载完了之后，调用下面的方法(实际是调用的run方法)
cc.Loader.getInstance().onload = function () {
cc.AppController.shareAppController().didFinishLaunchingWithOptions();
};
//提前加载资源
cc.Loader.getInstance().preload(g_ressources);
再看applicationDidFinishLaunching：
// 获得导演
var director = cc.Director.getInstance();
// 设置是否显示FPS
director.setDisplayStats(this.config['showFPS']);
// 设置帧率
director.setAnimationInterval(1.0 / this.config['frameRate']);
// run
director.runWithScene(new this.startScene());
return true;

　　这个cc.Director是一个很重要的类，而且是单例的，每次使用都是getInstance()，这个类我们以后会经常使用，它可以控制游戏的很多东西。这个方法要注意的是最后一定要return true。

　　最后，new一个实例，传入一个开始场景（在myapp.js中），开始程序

　　　　var myApp = new cocos2dApp(HelloWorldScene);

　　同学们又会找HelloWorldScene在哪。不急。我们先看cocos2d.js：

var d = document;
//这个c是一个配置对象，程度很多地方会用到
var c = {
//0表示不开debug，1表示基本debug，2表示debug全开
COCOS2D_DEBUG:2,
/**
* box2d和chipmunk是两个物理引擎
*/
box2d:false,
chipmunk:false,
//显示FPS
showFPS:true,
//帧率
frameRate:60,
loadExtension:false,
//canvas的id
tag:'helloWorld',
//cocos2d的存放地址
engineDir:'http://www.cnblogs.com/cocos2d/',
//单独编译成一个文件的话，就使用下面的配置
//SingleEngineFile:'',
//写的js源文件
appFiles:[
'src/resource.js',
'src/myApp.js'
]
};
window.addEventListener('DOMContentLoaded', function () {
//准备加载引擎文件
var s = d.createElement('script');
/*********加载文件*******/
//如果是打包成了单文件，则加载单文件
if (c.SingleEngineFile && !c.engineDir) {
s.src = c.SingleEngineFile;
}
//否则就启用jsloader，加载所有的引擎文件，并且加载appFiles里的js文件和main.js
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"');
}
//s.src = 'Packed_Release_File.js'; //只有一个打包好的文件，就只写这句就可以了
//将配置存到document的ccConfig里
document.ccConfig = c;
//给script标签加个id
s.id = 'cocos2d-html5';
//将加载文件加到body里
d.body.appendChild(s);
});

　　关于这两个文件，相信大家应该都懂了。但是总觉得，这么复杂的配置，哪里记得住啊，以后要用还得翻以前的旧代码啊。Cocos2d已经想到了这点。解压出来的文件中，应该有一个叫template文件夹，这个文件夹里装的就是cocos2d初始配置的模板。

　　好了，正戏来了，我们来看看那个HelloWorldScene。这个东西就藏在src文件夹下的myApp.js里。HelloWorldScene在这个文件的最下面。继承了cc.Scene这个类我们以后也会经常用，它定义了一个场景，我们要重写onEnter事件。方法里很简单，创建了一个HelloWorld，进行了初始化init() ，然后调用addChild方法，注意，这个方法以后会频繁的使用，作用就是将某个对象加入到当前对象的容器中。

　　我们又得转镜头到Helloworld，它继承自cc.Layer，这个类我们也会经常用到，它定义了一个层。关于层的概念大家可以参考动画片的制作，有背景层，道具层，人物层，做游戏也是这样的，背景一层，建筑一层，人物一层，界面一层，等等。

　　我们直接看代码：

isMouseDown:false,//用于标志鼠标有没有点下
helloLabel:null,//显示的文字
circle:null,//上面创建的圆圈精灵
sprite:null,//一张图片精灵
init:function () {
var selfPointer = this;
//////////////////////////////
// 1. 必须先调用父类构造方法
this._super();
/////////////////////////////
// 2. 增加一个关闭菜单，点击关闭菜单后退出程序
// 通过导演获得窗口的大小
var size = cc.Director.getInstance().getWinSize();
// 加一个关闭按钮
var closeItem = cc.MenuItemImage.create(
"res/CloseNormal.png",
"res/CloseSelected.png",
function () {
history.go(-1);
},this);//点击时调用后退
closeItem.setAnchorPoint(cc.p(0.5, 0.5));
var menu = cc.Menu.create(closeItem);//用按钮创建一个菜单，可以传多个item
menu.setPosition(cc.PointZero());
this.addChild(menu, 1);//加到层里
closeItem.setPosition(cc.p(size.width - 20, 20));
/////////////////////////////
// 3. 加入文字和图片
// 增加一个文字，显示 "Hello World"
// 创建一个label
this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);
// 放在屏幕正中
this.helloLabel.setPosition(cc.p(size.width / 2, 0));
// 加到层中
this.addChild(this.helloLabel, 5);
//LazyLayer是一个很少刷新的层，用于存放类似logo或者地图等不需要经常刷新的层
var lazyLayer = new cc.LazyLayer();
this.addChild(lazyLayer);
// 设置精灵图片
this.sprite = cc.Sprite.create("res/HelloWorld.png");
this.sprite.setPosition(cc.p(size.width / 2, size.height / 2));
this.sprite.setScale(0.5);
this.sprite.setRotation(180);
lazyLayer.addChild(this.sprite, 0);
var rotateToA = cc.RotateTo.create(2, 0);//旋转动画
var scaleToA = cc.ScaleTo.create(2, 1, 1);//缩放动画
this.sprite.runAction(cc.Sequence.create(rotateToA, scaleToA));//运行动画
this.circle = new CircleSprite();//之前写的圆圈精灵
this.circle.setPosition(cc.p(40, size.height - 60));
this.addChild(this.circle, 2);
this.circle.schedule(this.circle.myUpdate, 1 / 60);//刷新的函数和频率
this.helloLabel.runAction(cc.MoveBy.create(2.5, cc.p(0, size.height - 40)));//移动动画
this.setTouchEnabled(true);//！！！设置可以点击，设置了这个才能点击
this.adjustSizeForWindow();//根据窗口的大小调整自己的尺寸
lazyLayer.adjustSizeForCanvas();//根据canvas层调整自己的大小
window.addEventListener("resize", function (event) {
selfPointer.adjustSizeForWindow();//窗口改变大小时，调整大小
});
return true;
}

　　其中的cc.RotateTO,cc.ScaleTo,我们以后再介绍。着重说一下cc.Sprite，这个类是用于创建一个叫精灵的东西，也许大家听到这个词语很奇怪，我怎么没在游戏里看到过精灵？其实，我们控制的玩家本身就是一个精灵，游戏场景的每一个NPC，每个会移动物体都是一个精灵，精灵也是游戏中的最基础的也是最重要的部件了。关于精灵，我以后会专门用一章来讲解它的作用。

　　后面的方法现在还不需要用到，我们就先不了解。

　　src下还有一个resource.js。这是干嘛的？打开来看，我们发现它定义了一系列的资源位置和类型，这些资源在cocos2dApp的构造函数中进行预加载，大家看看就懂，我也就不啰嗦了。

结尾

　　关于这个cocos2d-html5的系列介绍，之后我还计划会讲：

1.解析simple中的一个游戏

2.开发一个简单的游戏

3.物理引擎的介绍

4.开发一个较复杂的游戏