cocos2d js ClippingNode 制作标题闪亮特效

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图：

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

顺便给我公司的游戏打下广告。就派上用场了！

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.项目下载：

参考：

​​ClippingNode 使用​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。