cocos2d js ClippingNode 制作标题闪亮特效

Posted 2020-09-20 mthoutai

1.效果图：

之前在《android 高仿 ios7 IPhone 解锁 Slide To Unlock》中制作了文字上闪亮移动的效果，这次我们来看下怎样在cocos2d js 中做出类似的效果。

顺便给我公司的游戏打下广告。https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157?

mt=8

2.效果原理

很easy。就是一张白色两边羽化的图片在标题上从左往右移动。可是普通的移动会穿帮。我们须要以标题作为模板来截取白色的图片。超出标题的就不能显示出来。ClippingNode 就派上用场了！

3.代码实现

以下是cocos2d js 2.2 的实现, cocos2d-x应该差点儿相同。

var MyLayer = cc.Layer.extend({
    isMouseDown:false,
    helloImg:null,
    helloLabel:null,
    circle:null,
    sprite:null,
    scaleRate:0.8,
	
    init:function () {

        this._super();

        var size = cc.Director.getInstance().getWinSize();

        var clip = this.clipper();
        var clipSize = clip.getContentSize();
        clip.setPosition(cc.p(size.width / 2, size.height / 2));
        var gameTitle = cc.Sprite.create(s_GameTitle);
		gameTitle.setScale(this.scaleRate);
        var spark = cc.Sprite.create(s_Spark);
        clip.addChild(gameTitle, 1);//先加入标题,会全然显示出来,由于跟模板一样大小
        spark.setPosition(-size.width / 2,0);
        clip.addChild(spark,2);//会被裁减
        clip.setScaleY(1.2);
        this.addChild(clip,4);

		var moveAction = cc.MoveTo.create(0.6, cc.p(clipSize.width, 0));
		var moveBackAction = cc.MoveTo.create(0.6, cc.p(-clipSize.width, 0));
		var seq = cc.Sequence.create(moveAction, moveBackAction);
		var repeatAction = cc.RepeatForever.create(seq);
        spark.runAction(repeatAction);//进行左右移动的反复动作

        
    },
	 clipper : function(){  //创建以标题作为大小的模板,超出标题部分都会被裁掉
        var clipper = cc.ClippingNode.create();
        var gameTitle = cc.Sprite.create(s_GameTitle);
		gameTitle.setScale(this.scaleRate);
        clipper.setStencil(gameTitle);//创建以标题作为大小的模板
        clipper.setAlphaThreshold(0);
        clipper.setContentSize(cc.size(gameTitle.getContentSize().width, gameTitle.getContentSize().height));
        return clipper;
    }
});

var MyScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MyLayer();
        this.addChild(layer);
        layer.init();
    }
});

4.项目下载：

http://www.waitingfy.com/?attachment_id=1094

 

參考：

ClippingNode 使用