cocos2d js ClippingNode 製作標題閃亮特效

標籤：tun   chm   app   相同   lock   label   osi   nes   att   

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 使用

cocos2d js ClippingNode 製作標題閃亮特效