Cocos Creator教程 第一弹

本节源码下载：

链接: http://pan.baidu.com/s/1jIPYHOM  密码: 5zae

触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似，使用CocosCreator开发2d游戏变得更加便捷快速，之后半年利用做毕业设计的闲暇之余学习使用Cocos Creator开发2d的游戏，主要是看触控科技官方提供的ExampleProject的源码来大致的模仿实现：

Cocos Creator官方文档： http://www.cocos.com/

Cocos Creator开发文档： http://www.cocos.com/docs/creator/

Cocos Creator的ExampleProject项目下载文档：https://github.com/cocos-creator/example-cases （也可以直接在Cocos Creator新建项目那选择 新建范例工程）

Cocos2d-JS开发的第一弹中，首先开发一个下面的界面：

[说明]

点击Menu的按键（绿色按键）会有事件相应，点击List的某一Item会有相应的事件相应。

项目的结构：

          

（一）绘制背景Sprite（［层级管理器］中的background组件）

background为一个Sprite，在［层级管理器］中 创建Sprite精灵，选中该Sprite精灵之后，在［属性检查器］中修改Sprite的属性：

（1）将选中的背景图片（e.g. singleColor.png）从［资源管理器］中通过拖拽的方式添加到Sprite的［Sprite Frame］属性框中；

（2）在［添加组件］处为Sprite添加Widget属性（添加组件－添加UI组件－Widget）：

［说明］Widget的作用是为了使得组件更好的适配父节点的大小，其中的Left，Top，Right和Bottom分别为该组件相对于父节点左边缘，上边缘，右边缘和下边缘的距离，可以使用px直接指定，也可以使用10%这样来制定是父节点长/宽度的百分比，这四项中打勾的表示该项起作用，下边的Horizontal Center和Vertical Center将会相对于父节点的横向置中，和垂直置中。

经过上面的步骤，就完成了背景Sprite的绘制。

（二）绘制选项节点（［层级管理器］中的Menu组件）

（1）在Canvas节点中建立Menu组件（为Sprite组件，并设置Widget属性，让其铺满父节点Canvas）,并在［属性管理器］中Sprite的Sprite Frame属性框中设置为None：

这样Menu铺满父节点Canvas，但不会覆盖父节点的背景。

（2）在Menu节点中新建两个Button节点（［层级管理器］中的btnBack和btnInfo），Button组件默认带一个Label子节点，选中Label组件，可以在［属性检查器］中Label-String属性处修改 按键上文字内容：

选中Button组件之后，在［属性检查器］中可以看到一个Button组件默认有Sprite属性和Button属性，那么可以通过从［资源管理器］中拖拽图片的方式，添加到Button组件的Sprite属性的Sprite Frame属性框中，从而改变Button组件的背景图片：

拖拽图片到Button的Sprite属性的Sprite Frame框后，可以看到Button的背景图片改变了，但是Button的边框出现模糊，这是因为Button的尺寸大于图片的尺寸，从而出现了模糊现象，此时我们展开［资源管理器］中Texture文件夹中对应的图片文件，双击可以打开［Editor Window］对话框处理图片：

拖拽［Editor Window］中图片上的四条绿色的线，来设置图片的属性，｛完成这一修改之后，一定要点击［Editor Window右上角绿色的对号进行属性保存］｝，至于为什么要这么修改，其实就和Android开发中的9patch图片的原理一直，当组件的尺寸大于图片尺寸的时候，要对图片进行拉伸，这四条线表示只拉伸四条线围成矩形框内的像素点，矩形框外部的像素点不会被拉伸，只会保持原来图片的像素。

完成上面的操作之后，还需要将Button组件的Sprite属性的Type属性选项修改为SLICED：

这样，我们的按键的效果看起来就舒服多了：

（3）完成上述操作之后，分别为两个Button节点在［属性检查器］中添加Widget属性（添加组件－添加UI组件－Widget），将两个Button组件放置在界面的左上角 和 右上角，以［查看说明］Button为例（在界面的左上角）：

（4）为Button添加点击效果

完成上面所有的操作之后，运行，在网页上点击发现按键并没有点击效果，如何做到点击的时候会有点击效果，选中Button组件，在［属性检查器］中Button属性下面可以看到：

上图一中，Button属性的Transition属性选择框，有None，SPRITE，COLOR，SCALE四个选项，可以设置Button被点击的效果，None表示没有点击效果（默认），SPRITE表示点击效果使用Sprite精灵来展示，COLOR表示点击效果使用颜色变化来展示，SCALE表示Button被点击的时候改变其大小，下面以COLOR为例：

上图中，Normal表示常态Button的颜色，Pressed表示Button被按下的颜色，Hover表示鼠标移动到该Button上之后Button的显示状态，按需求点击颜色选择条进行颜色设定。

（5）为Button添加点击相应事件_需要js脚本

首先在［资源管理器］中assets/Script文件下新建一个名为Menu.js的脚本文件，新建完成之后，打开脚本文件会发现，文件根是一个cc.Class，这是cocosJS中的类的声明方式，内部有：

[javascript] view plain copy

1. extends: cc.Component,  
2.   
3. properties: {  
4.           
5. }  

其中，extends表示该类即成自cc.Component组件，properties中声明该类的本地变量，以后可以通过this.propertyName来进行引用。除此之外，一个重要的函数为onLoad方法，当该类被加载的时候，就会调用此方法，可以在其中做一些初始化的操作，我们在 Menu.js中添加如下的代码：

[javascript] view plain copy

1. cc.Class({  
2.     extends: cc.Component,  
3.   
4.     properties: {  
5.         btnInfo: {  
6.             default: null,  
7.             type: cc.Button  
8.         },  
9.         btnBack: {  
10.             default: null,  
11.             type: cc.Button  
12.         }  
13.     },  
14.   
15.     backToList: function(){  
16.         cc.log("backToList Button Clicked!")  
17.     },  
18.   
19.     showReadme: function(){  
20.         cc.log("showReadme Button Clicked!")  
21.     }  
22. });  

添加完上面的代码之后，我们将该脚本文件添加给Menu节点：

［方法一］：在［层次管理器］中点选中Menu节点，此时［属性检查器］中显示Menu节点的属性，从［资源管理器］中拖拽Menu.js脚本到［属性管理器］进行脚本添加；

［方法二］：在［层次管理器］中点选中Menu节点，此时［属性检查器］中显示Menu节点的属性，点击 添加组件－添加用户脚本组件，便可以看到 已经在［资源管理器］中添加的所有的脚本文件，点选需要添加的Menu.js文件：

从［层级管理器］中拖拽对应的组件到上图中的 Btn Info属性框和Btn Back属性框中进行数据添加：

接下来，在［层级管理器］中点选中btnBack组件，在［属性检查器］中修改按键的属性，在Button属性栏中，首先将Click Events属性框修改为1，表示为Button绑定一个Click事件，此时就会出现 [0]事件编号，将［层级管理器］中的Menu节点拖拽添加到第一个属性框中（cc.Node）,点击后面第一个下拉菜单，可以看到Menu节点上绑定的所有脚本，选中Menu.js的脚本，再继续点选后面的下拉框，可以看到Mneu.js脚本文件中已经添加的函数，选择事先写好的Btn Back的Click相应函数，这样就为［层级管理器］中的btnBack按键绑定了Click事件：

（三）绘制MenuList节点

首先给Canvas节点添加一个ScrollView组件，可以看到，ScrollView包含两部分，一个scrollbar，另一个是content，即为List内容显示部分，为了让ScrollView组件能够更好的适配父节点的大小，通过为ScrollView，子节点view以及content设置Widget属性控制其大小，让组件铺满整个父节点：

需要说明，view节点是ScrollView显示区域，一般的要和ScrollView的大小一致，或比ScrollView稍小，以便能够看到List中的全部内容，view的字节点content是ScrollView将要显示的全部内容，其大小可以大于ScrollView和view，也可以小于，大于父节点大小之后，便可以通过拖拽来查看view之外的部分，所以一般不勾选content的Widget属性中Bottom属性项。

（1）首先绘制ListItem，并制作Item－Prefabs

在［场景绘制器］中绘制MenuList中单个Item，在content添加一个Sprite字节点，通过拖拽修改Sprite的Sprite Frame中的背景图片，为了让图片不出现失真的情况，需要对图片进行Editor：

为了让Item可以显示 文字信息，可以为其 添加一个Label字节点，并在［属性检查器］中修改 Label的Color，修改文字颜色，为Label添加Widget属性，让Label适配父节点，需要注意的是，要修改Label的的Overflow属性为CLAMP，Label才能够铺满父节点：

完成上面的步骤之后，在［层级管理器］中可以看到Item的结构：

将上面的mainMenuItem拖拽到［资源管理器］中assets/Prefabs文件夹下，同时删除［层级管理器］中mainMenuItem节点：

这样就完成了Prefab的制作，下面再为Prefab添加一个控制脚本，为不同index的Item设置不同的内容（mainMenuItem.js）：

[javascript] view plain copy

1. cc.Class({  
2.     extends: cc.Component,  
3.   
4.     properties: {  
5.         label: {  
6.             default: null,  
7.             type: cc.Label  
8.         },  
9.         index: -1  
10.     },  
11.   
12.     updateItem(index, name){  
13.         this.index = index;  
14.         this.label.string = name  
15.     },  
16.   
17.     itemClickedEvent: function(){  
18.         cc.log(this.index)  
19.     }  
20. });  

上面的代码中，为每一个Prefab设置了两个property属性，一个是显示内容的Label组件，另外一个是该Prefab-Item的index，实例化Prefab-Item之后，调用对象的updateItem方法来显示内容，并定义了Item被点击的响应事件，在［资源管理器］中双击选中assets/Prefabs/mainMenuItem，并将上面的脚本文件mainMenuItem.js拖拽添加到mainMenuItem-Prefab的属性管理器中，并将mainMainItem的字节点labelContent拖拽到脚本文件的Label属性框中：

为了让每一个Item有点击事件，还需要给每个Item－Sprite添加一个Button属性，并修改Click Events属性设置，在［资源管理器］中双击选中assets/Prefabs/mainMenuItem，在［资源管理器］中通过 添加组件－添加UI组件－Button  来添加：

（2）为ScrollView动态的添加Item

ScrollView中显示的Item都是添加到其content节点中的，所以需要编写js脚本文件，进行动态添加（SceneList.js）：

[javascript] view plain copy

1. cc.Class({  
2.     extends: cc.Component,  
3.   
4.     properties: {  
5.         itemPrefab: {  
6.             default: null,  
7.             type: cc.Prefab  
8.         },  
9.         initItemCount: 0,  
10.         scrollView: {  
11.             default: null,  
12.             type: cc.ScrollView  
13.         },  
14.         bufferZone: 0,  
15.         itemContents: []  
16.     },  
17.   
18.     init(menu) {  
19.         this.menu = menu;  
20.         this.itemContents = this.getMainMenuContent();  
21.         this.initList();  
22.     },  
23.   
24.     initList(){  
25.         var count = this.itemContents.length  
26.         for (let i = 0; i < count; i++){  
27.             // 通过cc.instantiate方法生成了一个Prefab节点  
28.             let item = cc.instantiate(this.itemPrefab);  
29.             // 获得节点上的名称为mainMenuItem的属性，这里就是该Prefab对象的脚本熟悉  
30.             // 因为脚本文件中包含了 Prefab 内容显示的组件，所以可以通过该脚本属性完成很多事情  
31.             var itemComp = item.getComponent('mainMenuItem')  
32.             // 直接调用脚本属性的动态方法，来操作Prefab对象  
33.             itemComp.updateItem(i, this.itemContents[i])  
34.   
35.             // 下面是通过脚本属性获得 显示内容的组件，  
36.             // 从而改变组件显示的内容  
37.             // var label = itemComp.label  
38.             // label.string = this.itemContents[i]  
39.             this.scrollView.content.addChild(item)  
40.         }  
41.     },  
42.   
43.     // 自定义的脚本文件，获取 场景Scene的列表，  
44.     // cc.game.__sceneInfos可以获取得到  
45.     getMainMenuContent(){  
46.         var array = ["第一个场景", "第二个场景", "第三个场景", "第四个场景", "第五个场景", "第六个场景"]  
47.         return array  
48.     },  
49.   
50.     // called every frame, uncomment this function to activate update callback  
51.     // update: function (dt) {  
52.   
53.     // },  
54. });  

上面的代码中，我们可以看到，当要显示ScrollView中内容的时候，需要实例化该cc.Component组件，并调用自定义的init方法来初始化列表，在initList方法中，使用了cc.instantiate方法实例话一个item-Prefab对象，并通过addChild方法将这个实例化之后的item添加给ScrollView的content节点中。

接下来，将上面的脚本SceneList.js添加到ScrollView的content上，并从［层级管理器］中通过拖拽添加相应的属性项：

（3）在Menu中初始化List数据：

我们想在Menu被初始化的过程中同时初始化MenuList数据，就需要在Menu的onLoad函数中实例化SceneList，并调用对象的自定义方法init来初始化List，修改Menu.js脚本文件：

[javascript] view plain copy

1. Menu.js 代码：  
2. cc.Class({  
3.     extends: cc.Component,  
4.   
5.     properties: {  
6.         btnInfo: {  
7.             default: null,  
8.             type: cc.Button  
9.         },  
10.         btnBack: {  
11.             default: null,  
12.             type: cc.Button  
13.         },  
14.         menuList: {  
15.             default: null,  
16.             type: cc.ScrollView  
17.         }  
18.     },  
19.   
20.     // use this for initialization  
21.     onLoad: function () {  
22.         // 通常只会加载一个场景，当场景发生切换的时候，默认会将原来场景中所有的节点和实例销毁，  
23.         // 如果我们需要某个组建进行其他场景的加载，或者在场景之间加载数据，那么就需要将该组件  
24.         // 标记为［常驻节点］，使其不被自动销毁，就需要调用cc.game.addPersistRootNode(node)  
25.   
26.         // this.node 会获得组建所在的节点对象  
27.         cc.game.addPersistRootNode(this.node);  
28.         this.node.zIndex = 999  
29.   
30.         if (this.menuList && this.menuList.content){  
31.             this.sceneList = this.menuList.content.getComponent("SceneList");  
32.             this.sceneList.init(this);  
33.             cc.log("加载完成....")  
34.         }  
35.     },  
36.   
37.     backToList: function(){  
38.         cc.log("backToList Button Clicked!")  
39.     },  
40.   
41.     showReadme: function(){  
42.         cc.log("showReadme Button Clicked!")  
43.     }  
44. });  

并将ScrollView拖拽到脚本文件的属性框中：

运行项目，可以看到的效果：

发现所有的List-Item全部都叠加到了一起，因为Item都是添加到ScrollView的content子节点中的，所以需要为content子节点设置Layout属性，在［层级管理器］中选中content节点，［属性管理器］中通过 添加组件－添加UI组件－Layout  来添加布局属性，并进行修改：

添加Layout属性之后的效果：