Cocos2d-JS 特效
来源:互联网 发布:工薪 理财 经验 知乎 编辑:程序博客网 时间:2024/05/16 15:42
Cocos2d-JS提供了很多特效,这些特效事实上属于间隔动作,特效类cc.GridAction类,也称为网格动作,它的类图如下图所示。
网格动作类图
网格动作
cc.GridAction它有两个主要的子类cc.Grid3DAction和cc.TiledGrid3DAction,cc.TiledGrid3DAction系列的子类中会有瓦片效果,如下图所示是Waves3D特效(cc.Grid3DAction子类),如后图所示是WavesTiles3D特效(cc.TiledGrid3DAction子类),比较这两个效果我们会看到瓦片效果的特别之处是界面被分割成多个方格。
Waves3D特效
WavesTiles3D特效
网格动作都是采用3D效果给用户的体验是非常震撼和绚丽,但是也给内存和CPU造成了巨大的压力和负担,如果不启用Open GL的深度缓冲,3D效果就会失真,但是启用的话对于显示性能会造成负面影响。
实例:特效演示
下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜单场景。
特效实例
MyActionScene.js中的ctor构造函数代码如下:
ctor: function (flagTag) {
this
._super();
this
.flagTag = flagTag;
this
.gridNodeTarget = cc.NodeGrid.create(); ①
this
.addChild(
this
.gridNodeTarget);
cc.
log
(
"MyActionLayer init flagTag "
+
this
.flagTag);
var size = cc.director.getWinSize();
var bg =
new
cc.Sprite(res.Background_png);
bg.x = size.width / 2;
bg.y = size.height / 2;
this
.gridNodeTarget.addChild(bg);
var sprite =
new
cc.Sprite(res.hero_png);
sprite.x = size.width / 2;
sprite.y = size.height / 2;
this
.gridNodeTarget.addChild(sprite, 1, SP_TAG);
var backMenuItem =
new
cc.MenuItemImage(res.Back_up_png, res.Back_down_png,
function () {
cc.director.popScene();
},
this
);
backMenuItem.x = 140;
backMenuItem.y = size.height - 65;
var goMenuItem =
new
cc.MenuItemImage(res.Go_up_png, res.Go_down_png,
this
.onMenuCallback,
this
);
goMenuItem.x = 820;
goMenuItem.y = size.height - 540;
var mn =
new
cc.Menu(backMenuItem, goMenuItem);
this
.gridNodeTarget.addChild(mn, 1);
mn.x = 0;
mn.y = 0;
mn.anchorX = 0.5;
mn.anchorY = 0.5;
return
true
;
}
上述代码第①行是创建NodeGrid类型成员变量gridNodeTarget,NodeGrid是网格动作管理类。MyActionScene.js中的onMenuCallback函数代码如下:
onMenuCallback: function (sender) {
cc.
log
(
"Tag = "
+
this
.flagTag);
var size = cc.director.getWinSize();
switch
(
this
.flagTag) {
case
ActionTypes.kFlipX3D:
this
.gridNodeTarget.runAction(cc.flipX3D(3.0)); ①
break
;
case
ActionTypes.kPageTurn3D:
this
.gridNodeTarget.runAction(cc.pageTurn3D(3.0, cc.size(15, 10))); ②
break
;
case
ActionTypes.kLens3D:
this
.gridNodeTarget.runAction(cc.lens3D(3.0, cc.size(15, 10),
cc.p(size.width / 2, size.height / 2), 240)); ③
break
;
case
ActionTypes.kShaky3D:
this
.gridNodeTarget.runAction(cc.shaky3D(3.0, cc.size(15, 10), 5,
false
)); ④
break
;
case
ActionTypes.kWaves3D:
this
.gridNodeTarget.runAction(cc.waves3D(3.0, cc.size(15, 10), 5, 40)); ⑤
break
;
case
ActionTypes.kJumpTiles3D:
this
.gridNodeTarget.runAction(cc.jumpTiles3D(3.0, cc.size(15, 10), 2, 30)); ⑥
break
;
case
ActionTypes.kShakyTiles3D:
this
.gridNodeTarget.runAction(cc.shakyTiles3D(3.0, cc.size(16, 12), 5,
false
));⑦
break
;
case
ActionTypes.kWavesTiles3D:
this
.gridNodeTarget.runAction(cc.wavesTiles3D(3.0, cc.size(15, 10), 4, 120)); ⑧
break
;
}
}
上述代码onMenuCallback函数中是运行特效动作,第①行是使用FlipX3D实现X轴3D翻转特效,cc.flipX3D函数的参数是持续时间。
第②行是使用PageTurn3D实现翻页特效特效,cc.pageTurn3D函数的第一个参数是持续时间,第二个参数是网格的大小。
第③行是使用Lens3D实现凸透镜特效,cc.lens3D函数第一个参数是持续时间,第二个参数是网格大小,第三个参数网透镜中心点,第四个参数是透镜半径。
第④行是使用Shaky3D实现晃动特效,cc.shaky3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数晃动的范围,第四个参数是否伴有Z轴晃动。
第⑤行是使用Waves3D实现3D波动特效,cc.waves3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数波动次数,第四个参数是振幅。
第⑥行是使用JumpTiles3D实现晃动特效,3D瓦片跳动特效,cc.jumpTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数跳动次数,第四个参数是跳动幅度。
第⑦行是使用ShakyTiles3D实现3D瓦片晃动特效,cc.shakyTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数晃动的范围,第四个参数是否伴有Z轴晃动。
第⑧行是使用WavesTiles3D实现3D瓦片波动特效,cc.wavesTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数动次数,第四个参数是振幅。
源引:http://blog.csdn.net/tonny_guan/article/details/44728229
- Cocos2d-JS特效
- Cocos2d-JS 特效
- cocos2d js ClippingNode 制作标题闪亮特效
- Cocos2d-JS 动作、特效和动画
- Cocos2d-JS切换场景与切换特效
- JS特效(鼠标特效)
- js特效
- JS特效
- JS特效
- JS特效
- js 特效
- js特效
- js特效
- js特效
- js特效
- js特效
- JS特效
- js特效
- java执行cmd命令,返回结果中文乱码问题解决
- leetcode[8]:String to Integer (atoi)
- 编译 vlc for ios VLC for iOS 2.3.0
- WinServer2008 R2下部署SQL 2008 群集(Part3)
- 搜索引擎---solr 怎么玩
- Cocos2d-JS 特效
- EasyUI实现二级页面的内容勾选的方法
- SetMatrixZeroes
- 学习笔记之----透彻分析android程序之-------hello world
- java文件处理测试
- 偶尔无法本地粘贴复制到远程主机上面
- 归并排序
- iBatis2 SqlMap中常用sql语句
- 记录:牛牛游戏开发笔记