Introduction to cocos2d's effects

Special thanks to Ernesto Corvi and On-Core for porting all the Effects code from cocos2d-python to cocos2d-iphone.

THANK YOU!

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 CocosNode 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 do: selector. eg:

// Create an sprite
Sprite *grossini = [Sprite spriteWithFile:@"grossini.png"];

// Tell the sprite to execute the Liquid effect
[grossini do: [Liquid actionWithWaves:4 amplitude:20 grid:ccg(10,10) duration:5]];

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:

// create a Lens3D action
id lens = [Lens3D actionWithPosition:cpv(240,160) radius:240 grid:ccg(15,10) duration:8];

// create a Waved3D action
id waves = [Waves3D actionWithWaves:18 amplitude:80 grid:ccg(15,10) duration:10];

// create a sequence an repeat it forever
[grossini do: [RepeatForever actionWithAction: [Sequence actions: waves, lens, nil]]];

The following is the list of the available Grid3D (non-tiled) actions in v0.7:

Shaky3D	Waves3D	FlipX3D	FlipY3D
Lens3D	Liquid	Waves	Twirl
Ripple3D

The following is the list of the available TiledGrid3D (tiled) actions in v0.7:

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

Edit: fixed grammar errors, improved the layout