cocos2d html5 mysql_【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。这个文件就是配置文件了。继续往下，我们就直接看注释吧。

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 = newcc.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.开发一个较复杂的游戏