本节源码下载：
链接: 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中的类的声明方式，内部有：
- extends:cc.Component,
- properties:{
- }
- cc.Class({
- extends:cc.Component,
- properties:{
- btnInfo:{
- default:null,
- type:cc.Button
- },
- btnBack:{
- default:null,
- type:cc.Button
- }
- },
- backToList:function(){
- cc.log("backToListButtonClicked!")
- },
- showReadme:function(){
- cc.log("showReadmeButtonClicked!")
- }
- });
添加完上面的代码之后，我们将该脚本文件添加给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）：
- cc.Class({
- extends:cc.Component,
- properties:{
- label:{
- default:null,
- type:cc.Label
- },
- index:-1
- },
- updateItem(index,name){
- this.index=index;
- this.label.string=name
- },
- itemClickedEvent:function(){
- cc.log(this.index)
- }
- });
上面的代码中，为每一个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）：
- cc.Class({
- extends:cc.Component,
- properties:{
- itemPrefab:{
- default:null,
- type:cc.Prefab
- },
- initItemCount:0,
- scrollView:{
- default:null,
- type:cc.ScrollView
- },
- bufferZone:0,
- itemContents:[]
- },
- init(menu){
- this.menu=menu;
- this.itemContents=this.getMainMenuContent();
- this.initList();
- },
- initList(){
- varcount=this.itemContents.length
- for(leti=0;i<count;i++){
- //通过cc.instantiate方法生成了一个Prefab节点
- letitem=cc.instantiate(this.itemPrefab);
- //获得节点上的名称为mainMenuItem的属性，这里就是该Prefab对象的脚本熟悉
- //因为脚本文件中包含了Prefab内容显示的组件，所以可以通过该脚本属性完成很多事情
- varitemComp=item.getComponent('mainMenuItem')
- //直接调用脚本属性的动态方法，来操作Prefab对象
- itemComp.updateItem(i,this.itemContents[i])
- //下面是通过脚本属性获得显示内容的组件，
- //从而改变组件显示的内容
- //varlabel=itemComp.label
- //label.string=this.itemContents[i]
- this.scrollView.content.addChild(item)
- }
- },
- //自定义的脚本文件，获取场景Scene的列表，
- //cc.game.__sceneInfos可以获取得到
- getMainMenuContent(){
- vararray=["第一个场景","第二个场景","第三个场景","第四个场景","第五个场景","第六个场景"]
- returnarray
- },
- //calledeveryframe,uncommentthisfunctiontoactivateupdatecallback
- //update:function(dt){
- //},
- });
上面的代码中，我们可以看到，当要显示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脚本文件：
- Menu.js代码：
- cc.Class({
- extends:cc.Component,
- properties:{
- btnInfo:{
- default:null,
- type:cc.Button
- },
- btnBack:{
- default:null,
- menuList:{
- default:null,
- type:cc.ScrollView
- }
- },
- //usethisforinitialization
- onLoad:function(){
- //通常只会加载一个场景，当场景发生切换的时候，默认会将原来场景中所有的节点和实例销毁，
- //如果我们需要某个组建进行其他场景的加载，或者在场景之间加载数据，那么就需要将该组件
- //标记为［常驻节点］，使其不被自动销毁，就需要调用cc.game.addPersistRootNode(node)
- //this.node会获得组建所在的节点对象
- cc.game.addPersistRootNode(this.node);
- this.node.zIndex=999
- if(this.menuList&&this.menuList.content){
- this.sceneList=this.menuList.content.getComponent("SceneList");
- this.sceneList.init(this);
- cc.log("加载完成....")
- }
- },
- showReadme:function(){
- cc.log("showReadmeButtonClicked!")
- }
- });
并将ScrollView拖拽到脚本文件的属性框中：
运行项目，可以看到的效果：
发现所有的List-Item全部都叠加到了一起，因为Item都是添加到ScrollView的content子节点中的，所以需要为content子节点设置Layout属性，在［层级管理器］中选中content节点，［属性管理器］中通过 添加组件－添加UI组件－Layout 来添加布局属性，并进行修改：
添加Layout属性之后的效果：