creator摘星星完善练习

文档中摘星星的demo课后练习如下：

1. 加入简单的开始菜单界面，在游戏运行的一开始显示开始按钮，点击按钮后才会开始游戏
2. 为游戏失败加入简单的菜单界面，游戏失败后点击按钮才会重新开始
3. 限制主角的移动不能超过视窗边界
4. 为主角的跳跃动作加入更细腻的动画表现
5. 为星星消失的状态加入计时进度条
6. 收集星星时加入更华丽的效果
7. 为触屏设备加入输入控制
   开始按钮和游戏结束的组件都完成了，继续来搞后边的；

3.限制主角的移动不能超过视窗边界

这个需求想明白的话很容易；

只要在满足上图条件时，把player节点动画的移动速度修改成0就欧克了；
直接在player.js脚本中，在onload中定义需要作为判断依据的场景宽度，update添加判断条件

	onLoad:function(){
		this.maxWidth = this.node.parent.width/2;
	},
	update: function (dt) {
        // ...
        // 限制不出圈
        if (this.node.x > this.maxWidth) {
            this.node.x = this.maxWidth;
            this.xSpeed = 0;
        } else if (this.node.x < -this.maxWidth) {
            this.node.x = -this.maxWidth;
            this.xSpeed = 0;
        }
    },

预览测试一下，pass;

4. 为主角的跳跃动作加入更细腻的动画表现

这个需求，素材就一张史莱姆，想加复杂的也加不了，就直接改一个弹簧的效果，让主角在落地时压缩，做个卟油卟油的感觉；
具体的数值可以先在属性检查器中直接设置看下效果；

这里要记得压缩了之后还要在跳起之后复原，要不就会一直变成这样一坨

直接在player脚本的跳动动画中添加变形；

	setJumpAction: function () {
        // ...
        //变形
        var squash = cc.scaleTo(0.2, 1, 0.6);
        var reSquash = cc.scaleTo(0.2, 1, 1);
        // 不断重复，顺序执行，而且每次完成落地动作后调用回调来播放声音
        return cc.repeatForever(cc.sequence(squash, reSquash, jumpUp, jumpDown, callback));
    },

5. 为星星消失的状态加入计时进度条

这个需求挺蛋疼的，星星消失不是有个渐变的效果了么，添加个进度条不画蛇添足么，真当是为了练习而提的啊；
在文档里搜了一下，ProgressBar 组件参考正好适用，直接在canvas下创建ui节点=》progressBar节点

调整位置，修改颜色等相关属性
在game脚本中新建ProgressBar属性，这里要注意类型一定不要搞成node,是cc.progressBar类型，之后在拖拽关联，不然的话之后无法为其设置progress属性，就是不会动；这破烂玩意也没个error提示，折腾了我好久；

	//game.js
	properties: {
        // ...
        ProgressBar:{
            default: null,
            type: cc.ProgressBar
        }
    },

完成关联后就需要修改动作脚本了，star中正好有现成的逻辑，就是随时间change星星透明度的那里，所以就把进度条的事件一并写在一起了；

	//star.js
	update: function (dt) {
        // ...
        var opacityRatio = 1 - this.game.timer / this.game.starDuration;
        this.game.ProgressBar.progress = opacityRatio;
    },

预览看下效果，稳的一批；
接下来是增加收集星星后的效果，大致思路就是，像预设星星时一样，在销毁是创建另一个预设资源，并在动画执行后自动销毁，其他的暂时还没有头绪，就放到下篇再写了。