Developers Manual > Cocos2d-x > Advanced Features > Effects

Effects

Introduction

Effects are a special kind of action. Instead of modifying normal properties like opacity, position, rotation, or scale, they modify a new kind of property: the grid property.

A grid property is like a matrix. It is a network of lines that cross each other to form a series of squares or rectangles.

These special actions render any cocos2d-x Node object (Layer, Scene, Sprite, etc.) into the grid and you can transform the grid by moving its vertices.

There are 2 kind of grids: tiled grids and non-tiled grids. The difference is that the tiled grid is composed of individual tiles while the non-tiled grid is composed of vertices.

The following is an example of Ripple3D action, who uses a Grid3D (non-tiled) grid:

and the following is an example of FadeOutTR action, who uses a TiledGrid3D (tiled) grid:

How do I use them ?

Like any other action, it is executed by the runAction. eg:

1
2
3
    // Create an sprite
    Sprite* grossini = Sprite::create("grossini.png");
    grossini->runAction(Liquid::create(2, Size(32,24), 1, 20));
1
2
3
    -- Create an sprite
    local grossini = cc.Sprite:create("grossini.png")
    grossini:runAction(cc.Liquid:create(2, cc.size(32,24), 4, 20))

Liquid, like any other grid action, receives the grid parameter. You can adjust the quality of the effect by increasing the size of the grid. But it also implies less FPS.

The Effects are IntervalAction actions so you can treat them like any other action. eg:

1
2
3
4
5
6
7
8
    // create a Lens3D action
    ActionInterval* lens = Lens3D::create(10, Size(32,24), Vec2(100,180), 150)ļ¼›

    // create a Waved3D action
    ActionInterval* waves = Waves3D::create(10, Size(15,10), 18, 15);

    // create a sequence an repeat it forever
    grossini->runAction(RepeatForever::create((Sequence*)Sequence::create(waves, lens, NULL ) ) );
1
2
3
4
5
6
7
8
    -- create a Lens3D action
   local lens = cc.Lens3D:create(10, cc.size(32,24), cc.p(100,180), 150)

    -- create a Waved3D action
   local waves = cc.Waves3D:create(10, cc.size(15,10), 18, 15)

    --create a sequence an repeat it forever
    grossini:runAction(cc.RepeatForever:create(cc.Sequence:create(waves, lens)))

The following are Grid3D (non-tiled) actions in v2.1.0:

Shaky3D Waves3D FlipX3D FlipY3D
Lens3D Liquid Waves Twirl
Ripple3D

The following are TiledGrid3D (tiled) actions:

ShakyTiles3D ShatteredTiles3D ShuffleTiles FadeOutTRTiles
FadeOutBLTiles FadeOutUpTiles FadeOutDownTiles TurnOffTiles
WavesTiles3D JumpTiles3D SplitRows SplitCols

References

cocos2d-iphone Introduction to cocos2dā€™s effects

tiled_and_nontiled_grid.png (39.2 kB) iven, 2013-01-14 08:00

effect_ripple3d.png (44.1 kB) iven, 2013-01-14 08:03

effect_ripple3d_grid.png (48.8 kB) iven, 2013-01-14 08:04

effect_fadeouttiles.png (9.2 kB) iven, 2013-01-14 08:21

effect_fadeouttiles_grid.png (4.7 kB) iven, 2013-01-14 08:21

IMG_0001.PNG (26 kB) iven, 2013-01-14 10:14

IMG_0002.PNG (22.1 kB) iven, 2013-01-14 10:15

IMG_0003.PNG (19.7 kB) iven, 2013-01-14 10:15

IMG_0004.PNG (17.4 kB) iven, 2013-01-14 10:15

IMG_0005.PNG (28.1 kB) iven, 2013-01-14 10:16

IMG_0007.PNG (24.1 kB) iven, 2013-01-14 10:16

IMG_0008.PNG (22.5 kB) iven, 2013-01-14 10:16

IMG_0011.PNG (22.7 kB) iven, 2013-01-14 10:16

IMG_0002_2.PNG (25.8 kB) iven, 2013-01-14 10:16

IMG_0012.PNG (29.6 kB) iven, 2013-01-15 03:47

IMG_0013.PNG (25 kB) iven, 2013-01-15 03:48

IMG_0014.PNG (19.1 kB) iven, 2013-01-15 03:51

IMG_0015.PNG (18.6 kB) iven, 2013-01-15 03:52

IMG_0016.PNG (21.1 kB) iven, 2013-01-15 03:54

IMG_0017.PNG (20.3 kB) iven, 2013-01-15 03:54

IMG_0019.PNG (22.9 kB) iven, 2013-01-15 03:54

IMG_0020.PNG (21.9 kB) iven, 2013-01-15 03:54

IMG_0021.PNG (23 kB) iven, 2013-01-15 03:55

IMG_0022.PNG (25 kB) iven, 2013-01-15 03:56

IMG_0023.PNG (18.8 kB) iven, 2013-01-15 03:56

IMG_0024.PNG (18.7 kB) iven, 2013-01-15 03:56

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.