CocosCreator之KUOKUO带你做个按钮移动光效

引擎版本

CocosCreator v2.0.9

实现效果

按钮的移动光效
CocosCreator之KUOKUO带你做个按钮移动光效_第1张图片

实现思路

遮罩,半透明单色精灵,runAction

实现过程
  • 先来个粉嫩的背景CocosCreator之KUOKUO带你做个按钮移动光效_第2张图片

  • 然后新建个空节点,起名为root,并添加Mask组件,选择图片遮罩模式,把图片拖进去。对了,root的Size要调整到图片大小哦。我的是215*215。
    CocosCreator之KUOKUO带你做个按钮移动光效_第3张图片

  • 好了,添加图片,添加一个单色,透明度为120,X斜切为30,高度250,这些参数都是可调,看你喜欢多少。
    CocosCreator之KUOKUO带你做个按钮移动光效_第4张图片

  • 最后给Canvas挂个脚本。
    CocosCreator之KUOKUO带你做个按钮移动光效_第5张图片

给出代码
cc.Class({
    extends: cc.Component,

    properties: {
        // 白色半透明
        white: cc.Node
    },

    onLoad () {
        this.white.x = -300;
    },

    start () {
        let action = cc.moveBy(1, 600, 0);
        let callfun = cc.callFunc(function () {
            this.white.x = -300;
        },this);
        let s = cc.sequence(action,cc.delayTime(1),callfun);
        this.white.runAction(cc.repeatForever(s));
    },

});

好了,大功告成!
O(∩_∩)O~~

加我QQ群:(博客里面的项目,群文件里都有哦)
706176551
我们一起学习!
O(∩_∩)O~~

你可能感兴趣的:(CocosCreator,游戏开发)