防止不记得

矫情吗；* 2022-08-21 07:42 11阅读 0赞

**一、介绍**

效果是一种特殊种类的行为。它不是修改常规的属性，比如透明度，位置，旋转或者变形，而是修改一种新的属性，网格属性。

网格属性就像是一个个交叉形成的一系列的矩形。

任何CCNode对象（Layer，Scene，Sprite等等）都具有这种特殊的属性，你可以通过移动他们的顶点来变换这些网格。

有两种类型的网格：平铺的网格和非平铺的网格。他们两者的区别是平铺的网格由单个的网格组成，而非平铺的网格是由顶点组成。

如下是一个涟漪3D动作，就是用了Grid3D（非平铺网格）：

![effect_ripple3d.png][]![effect_ripple3d_grid.png][]

如下是一个渐变动作，用了TiledGrid3D（平铺网格）：  
![effect_fadeouttiles.png][]![effect_fadeouttiles_grid.png][]

**二、那么我们如何用他们呢？**

和其他的动作一样，它也是用runAction函数来执行，比如：

**\[cpp\]** [view plain][] [copy][view plain]

1.  // 创建一个精灵
2.  CCSprite\* grossini = CCSprite::create("grossini.png"); 
3.  grossini->runAction(CCLiquid::create(4, 20, ccg(10,10), 5));

Liquid：像一些其他的网格动作一样可以接收一些参数。你可以通过调整网格的大小来调整效果的质量。但是也暗示着将会有更少的FPS。

这种效果是间隔刷新的动作，你能够把它跟其他动作等同处理。例如：

**\[cpp\]** [view plain][] [copy][view plain]

1.  // 创建一个Lens3D 动作
2.  CCActionInterval\* lens = CCLens3D::create(ccp(240,160),240,ccg(15,10),8); 
3.  
4.  // 创建一个 Waved3D 动作
5.  CCActionInterval\* waves = CCWaves3D::create(18,80,ccg(15,10),10); 
6.  
7.  // 创建一个能够一直执行的动作
8.  grossini->runAction(CCRepeatForever::create((CCSequence\*)CCSequence::create(waves, lens, NULL ) ) );

如下就是一系列现有的Grid3D动作（非网格化）：

<table style="line-height:26px; border:1px solid rgb(187,187,187); border-collapse:collapse; margin-bottom:1em; padding:4px; color:rgb(72,72,72); font-family:Verdana,sans-serif; font-size:12px"> 
 <thead> 
  <tr> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_0_0" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Shaky3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_0_1" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Waves3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_0_2" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FlipX3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_0_3" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FlipY3D&nbsp;</a>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1580/IMG_0001.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1581/IMG_0002.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1582/IMG_0003.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1583/IMG_0004.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
  </tr> 
 </tbody> 
</table>

<table style="line-height:26px; border:1px solid rgb(187,187,187); border-collapse:collapse; margin-bottom:1em; padding:4px; color:rgb(72,72,72); font-family:Verdana,sans-serif; font-size:12px"> 
 <thead> 
  <tr> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_1_0" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Lens3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_1_1" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Liquid&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_1_2" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Waves&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_1_3" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">Twirl&nbsp;</a>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1584/IMG_0005.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1585/IMG_0007.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1586/IMG_0008.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1587/IMG_0011.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
  </tr> 
 </tbody> 
</table>

如下是一系列现有的TiledGrid3D动作（网格化的）：

<table style="line-height:26px; border:1px solid rgb(187,187,187); border-collapse:collapse; margin-bottom:1em; padding:4px; color:rgb(72,72,72); font-family:Verdana,sans-serif; font-size:12px"> 
 <thead> 
  <tr> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_3_0" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">ShakyTiles3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_3_1" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">ShatteredTiles3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_3_2" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">ShuffleTiles&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_3_3" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FadeOutTRTiles&nbsp;</a>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1593/IMG_0012.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1594/IMG_0013.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1595/IMG_0014.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1596/IMG_0015.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
  </tr> 
 </tbody> 
</table>

<table style="line-height:26px; border:1px solid rgb(187,187,187); border-collapse:collapse; margin-bottom:1em; padding:4px; color:rgb(72,72,72); font-family:Verdana,sans-serif; font-size:12px"> 
 <thead> 
  <tr> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_4_0" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FadeOutBLTiles&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_4_1" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FadeOutUpTiles&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_4_2" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">FadeOutDownTiles&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_4_3" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">TurnOffTiles&nbsp;</a>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1597/IMG_0016.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1598/IMG_0017.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1599/IMG_0019.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1600/IMG_0020.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
  </tr> 
 </tbody> 
</table>

<table style="line-height:26px; border:1px solid rgb(187,187,187); border-collapse:collapse; margin-bottom:1em; padding:4px; color:rgb(72,72,72); font-family:Verdana,sans-serif; font-size:12px"> 
 <thead> 
  <tr> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_5_0" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">WavesTiles3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_5_1" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">JumpTiles3D&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_5_2" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">SplitRows&nbsp;</a>&nbsp;</th> 
   <th style="border:1px solid rgb(187,187,187); padding:4px"><a href="http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Effects#Sort_5_3" title="Sort by this column" style="color:rgb(42,86,133); text-decoration:none" rel="nofollow">SplitCols&nbsp;</a>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1601/IMG_0021.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1602/IMG_0022.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1603/IMG_0023.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"></td> 
   <td style="padding:4px; border:1px solid rgb(187,187,187)"><img src="http://www.cocos2d-x.org/attachments/1604/IMG_0024.PNG" alt="" style="border:none; max-width:100%; vertical-align:middle"><br> </td> 
  </tr> 
 </tbody> 
</table>

[effect_ripple3d.png]: http://www.cocos2d-x.org/attachments/1576/effect_ripple3d.png
[effect_ripple3d_grid.png]: /images/20220724/bd4cf09bf7d14fc29f498bc151651ecd.png
[effect_fadeouttiles.png]: http://www.cocos2d-x.org/attachments/1578/effect_fadeouttiles.png
[effect_fadeouttiles_grid.png]: /images/20220724/94f8b0649f91488f94c1d651cd434272.png
[view plain]: http://blog.csdn.net/qinning199/article/details/11586639#