【Cocos2dhtml5】初识Cocos2dhtml5

背景与前言

　　现在什么技术火？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。这个文件就是配置文件了。继续往下，我们就直接看注释吧。

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

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

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

　　　　var myApp = new cocos2dApp(HelloWorldScene);

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

 1     var d = document;
 2     //这个c是一个配置对象，程度很多地方会用到
 3     var c = {
 4         //0表示不开debug，1表示基本debug，2表示debug全开
 5         COCOS2D_DEBUG:2,
 6         /**
 7          * box2d和chipmunk是两个物理引擎
 8          */
 9         box2d:false,
10         chipmunk:false,
11         //显示FPS
12         showFPS:true,
13         //帧率
14         frameRate:60,
15         loadExtension:false,
16         //canvas的id
17         tag:'helloWorld',
18         //cocos2d的存放地址
19         engineDir:'http://www.cnblogs.com/cocos2d/',
20         //单独编译成一个文件的话，就使用下面的配置
21         //SingleEngineFile:'',
22         //写的js源文件
23         appFiles:[
24             'src/resource.js',
25             'src/myApp.js'
26         ]
27     };
28     window.addEventListener('DOMContentLoaded', function () {
29         //准备加载引擎文件
30         var s = d.createElement('script');
31         /*********加载文件*******/
32         //如果是打包成了单文件，则加载单文件
33         if (c.SingleEngineFile && !c.engineDir) {
34             s.src = c.SingleEngineFile;
35         }
36         //否则就启用jsloader，加载所有的引擎文件，并且加载appFiles里的js文件和main.js
37         else if (c.engineDir && !c.SingleEngineFile) {
38             s.src = c.engineDir + 'platform/jsloader.js';
39         }
40         else {
41             alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');
42         }
43         //s.src = 'Packed_Release_File.js'; //只有一个打包好的文件，就只写这句就可以了
44         //将配置存到document的ccConfig里
45         document.ccConfig = c;
46         //给script标签加个id
47         s.id = 'cocos2d-html5';
48         //将加载文件加到body里
49         d.body.appendChild(s);
50     });

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

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

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

　　我们直接看代码：

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

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

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

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

结尾

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

1.解析simple中的一个游戏

2.开发一个简单的游戏

3.物理引擎的介绍

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