1.效果图：
之前在《Android 高仿 IOS7 IPhone 解锁 Slide To Unlock》中制作了文字上闪亮移动的效果，这次我们来看下如何在cocos2d js 中做出类似的效果。
顺便给我公司的游戏打下广告。https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157?mt=8
2.效果原理
非常简单，就是一张白色两边羽化的图片在标题上从左往右移动。但是普通的移动会穿帮，我们需要以标题作为模板来截取白色的图片，超出标题的就不能显示出来。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
参考：