Cocos2d JS Clippingnode Create title Sparkle effect

1.:

Earlier in the "Android high imitation IOS7 IPhone unlock Slide to Unlock" in the production of the text on the shiny moving effect, this time we see how to make a similar effect in Cocos2d JS.

by the way to my company's games to lay ads. https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157?

Mt=8

2. Effect principle

Very easy. It's a white-feathered picture that moves from left to right on the title. But the ordinary movement will wear help. We need to use the title as a template to intercept the white picture. Beyond the title can not be displayed. Clippingnode will come in handy!

3. Code implementation

The following is the implementation of Cocos2d JS 2.2, Cocos2d-x should almost identical.

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);//First add the title, will be fully displayed, because the same size as the template spark.setposition (-size.width/2,0);        Clip.addchild (spark,2);//Will be cut 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);//Repeat actions for left and right movements}, Clipper:function () {//Create a template with the title as the size, and the title portion will be cropped out of var clipper = cc.        Clippingnode.create (); var gametitle = cc.        Sprite.create (S_gametitle); Gametitle.setscale (this.scalerate);        Clipper.setstencil (gametitle);//Create a template with the title as the size 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. Project Download:

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

References:

Clippingnode use

Cocos2d JS Clippingnode Create title Sparkle effect