本节源码下载：
链接: 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开发的第一d中，首先开发一个下面的界面：
[说明]
点击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 extends:cc.Component, propertIEs:{ } 其中，extends表示该类即成自cc.Component组件，propertIEs中声明该类的本地变量，以后可以通过this.propertyname来进行引用。除此之外，一个重要的函数为onLoad方法，当该类被加载的时候，就会调用此方法，可以在其中做一些初始化的 *** 作，我们在 Menu.Js中添加如下的代码： [JavaScript] view plain copy 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）：
[JavaScript] view plain copy 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）：
[JavaScript] view plain copy 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脚本文件：
[JavaScript] view plain copy 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属性之后的效果：
总结以上是内存溢出为你收集整理的Cocos Creator教程 第一d全部内容，希望文章能够帮你解决Cocos Creator教程 第一d所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）