cocos2d js ClippingNode 制作标题闪亮特效

时间:2022-09-18 17:41:58

1.效果图:

cocos2d js ClippingNode  制作标题闪亮特效

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

cocos2d js ClippingNode  制作标题闪亮特效

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

mt=8

2.效果原理

cocos2d js ClippingNode  制作标题闪亮特效

很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 制作标题闪亮特效的更多相关文章

  1. Hexo瞎折腾系列(9) - 网页标题崩溃特效

    前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化:并按照文章所说自行修改代码或文件. 为网页添加标题崩溃特效 ...

  2. jQuery - 制作非缘勿扰页面特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  4. Sequence&period;js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  5. 一步一步教你用 Vue&period;js &plus; Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  6. cocos2d js jsb XMLHttpRequest 中文乱码

    1.首先讲下怎样使用XMLHttpRequest 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中. 首先要明确cocos2d js事实上分两个版本号,一个是html5的版本号,另 ...

  7. cocos2d js的一些tip

    cocos2d-js-v3.2-rc0 cc.director.end();//退出app cc.Application.getInstance().openURL("http://www. ...

  8. js判断网页标题包含某字符串则替换

    js判断网页标题包含某字符串则替换,代码如下: var tit=document.title; if(tit.indexOf("afish")>0){ tit=tit.rep ...

  9. 原生js制作标题与内容保持4行的效果

    在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内 ...

随机推荐

  1. 使用C&num;代码部署SharePoint 2013开发包简单总结(一)

    这篇文章将总结下如何将自己开发的列表.Web部件.事件接收器等元素部署到SharePoint的服务器.因水平有限,我的做法未必是最佳实践,会有些错误理解和疏漏,欢迎各位高手批评指正——但一定要能给出更 ...

  2. Win2012 R2 IIS8&period;5&plus;PHP&lpar;FastCGI&rpar;&plus;MySQL运行环境搭建教程

    这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 201 ...

  3. Node&period;js学习&lpar;10&rpar;----文件系统fs

    fs 模块是文件操作的封装,它提供了文件的读取.写入.更名.删除.遍历目录.链接等 POSIX 文件系统操作.与其他模块不同的是,fs 模块中所有的操作都提供了异步的和同步的两个版本, 例如读取文件内 ...

  4. HDU5441 Travel &lpar;离线操作&plus;并查集&rpar;

    Travel Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  5. mysql-定时调用存储过程

    mysql定时调用存储过程,对表数据集表结构进行备份 存储过程实例: BEGIN DECLARE tname varchar(64); set @tname = CONCAT('RENAME TABL ...

  6. MVC无刷新分页

    MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)   我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下 ...

  7. hdu&lowbar;1041&lpar;Computer Transformation&rpar; 大数加法模板&plus;找规律

    Computer Transformation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  8. seaborn使用(样式管理)

    seaborn使用(样式管理) Seaborn是一个在Python中制作具有吸引力和丰富信息的统计图形的库.它建立在matplotlib之上,并与PyData堆栈紧密集成,包括支持scipy和pand ...

  9. 基于Redis的分布式锁两种实现方式

    最近有一个竞拍的项目会用到分布式锁,网上查到的结果是有三种途径可以实现.1.数据库锁机制,2.redis的锁,3.zookeeper.考虑到使用mysql实现会在性能这一块会受影响,zookeeper ...

  10. emWin实现ATM机界面设计,含uCOS-III和FreeRTOS两个版本

    第1期:ATM机配套例子:V6-900_STemWin提高篇实验_ATM机(uCOS-III)V6-901_STemWin提高篇实验_ATM机(FreeRTOS) 例程下载地址:http://foru ...