cocoscreator文档中第一个游戏的补充-补充开始按钮

cocoscreator文档中有一个摘星星的小游戏demo，可以带领新手初见游戏开发的各个流程，当让细节都不是很完善，重要的是流程和思想，内部的脚本也基本都提供给开发者了，拿来即用；这篇将接着文档demo流程完成后，一些未提到的元素进行补充；

button

文档中提供的demo并没有按钮组件该如何使用及触发事件的说明，现在为小游戏添加一个开始游戏的按钮；本文将延续官方文档的揍性，旨在快速搭建，想要了解更多细节还是到官网扒拉文档的好：button组件参考
层级管理其中对canvas右键创建ui节点，选择button组件，重命名

因为素材中包含了文本信息，所以这里把label禁用了，或者删除也ok；
选中btn节点下的background，在右侧属性管理器中设置图片素材资源，这个官网demo中虽然没有写，但是素材是给了的，直接拖进来就好；

之后选回btn节点，在右侧属性管理器中设置过渡效果，也就是下图所示的transition属性，这里图省事就直接使用scale，要一个缩放效果

之后在click events中为组件添加响应事件；
这里一开始做的时候真的是一头雾水，文档中注明了有两种绑定方式，但是对于脚本的挂载说的不甚清楚，首先说明属性管理器中的event的组成部分。

对应序号	属性	功能说明
1	Target	带有脚本组件的节点。
2	Component	脚本组件名称。
3	Handler	指定一个回调函数，当用户点击 Button 时会触发此函数。
4	CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

1. 就是事件脚本关联的节点，例如btnFn方法写在index脚本中，index脚本绑定在game节点下，那么就把game节点添加到这里；
2. 这里会展示当前节点下所有存在脚本，接1，这里就会出现index脚本
3. 这就是目标方法了，btnFn
4. 这个如果没有传值必要为空就好，应用场景例如菜单做事件代理，指向同一个方法，可以用于区分；

在game中添加startEvent,内容暂时就先把onload中的内容搬运过来就好了；

	startEvent:function(){
        this.timer = 0;
        this.starDuration = 0;
        this.score = 0;
        this.groundY = this.ground.y + this.ground.height / 2;
        this.spawnNewStar();
    },

这时史莱姆还是在瞎蹦跶，所以回到play脚本中，onload时执行了动画，这里先屏蔽掉，拿个方法包装下，方便提供给startEvent开始游戏时的调用；

	onLoad: function () {
        // ...
        // this.node.runAction(this.jumpAction);
    },
    startMove: function () {
        this.node.runAction(this.setJumpAction());
    },

回到game在startEvent中调用；同时在点下开始游戏后将按钮隐藏

	startEvent:function(){
        //...
        this.btnStart.opacity = 0;
        this.player.getComponent('player').startMove();
        //getComponent是获取节点上指定类型的组件，一开始不知道需要这样才能获取脚本折腾了好久
    },

如此，一个开始按钮，以及触发游戏开始的事件绑定就完成了；

总结
难者不会会者不难，难点在与文档关于流程方面什么都没有说，第一次接触真的是毫无头绪，哪怕直接对照着完整版的demo看，也很难分清楚哪些是自定义属性，哪些是api;最后用蠢办法，一行行注释大断点才搞清楚；等了解了之后回过头来看文档，要是给我写的话大概也就写成这个样子了，因为真的是没啥东西（捂脸）