Cocos2d 2.0 Grid Effects

Effects are special kinds of actions. 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.


The grids have 2 dimensions: rows and columns, but each vertex of the grid has 3 dimension: x, y and z. So you can create 2d or 3d effects by transforming a grid-3D grid.

A grid-3D of size (3, 2)

Each frame the screen is rendered into a texture. This texture is transformed into a vertex array and this vertex array (the grid!) is transformed by the grid effects. Finally the vertex array is rendered into the screen.

Enable 3D Projection

    [director setProjection:kCCDirectorProjection3D];

Grid 3D Actions

• CCFlipX3D

          Flip the node over X-Axis.

          example:

      id effect = [CCFlipX3D actionWithDuration:3];
      [mySprite runAction:effect];

• CCFlipY3D

          Flip the node over Y-Axis.

          example:
      id effect = [CCFlipY3D actionWithDuration:3];
      [mySprite runAction:effect];

• CCLens3D

          Add 3d lens effect on the node.

          example:
      CGSize winSize = [[CCDirector sharedDirector] winSize];
      id effect = [CCLens3D actionWithPosition:ccp(winSize.width / 2, winSize.height / 2) radius:90 grid:ccg(32, 24) duration:0];

     [mySprite runAction:effect];

• CCLiquid

          Add liquid wave effect to the node.

          example:
      id effect = [CCLiquid actionWithWaves:10 amplitude:5 grid:ccg(32, 24) duration:3];
     [mySprite runAction:effect];

• CCRipple3D

          Add 3d ripple effect to the node.

          example:
      CGSize winSize = [[CCDirector sharedDirector] winSize];
      id effect = [CCRipple3D actionWithPosition:ccp(winSize.width / 2, winSize.height / 2) radius:180 waves:10 amplitude:10 grid:ccg(32, 24) duration:3];
      [mySprite runAction:effect]; 

• CCShaky3D

          Add 2d/3d shaky effect to the node.


          example:
      id effect = [CCShaky3D actionWithRange:3 shakeZ:YES grid:ccg(32, 24) duration:3];
      [mySprite runAction:effect]; 

• CCTwirl

          Add twirl effect to the node.

          example:

      CGSize winSize = [[CCDirector sharedDirector] winSize];
      id effect = [CCTwirl actionWithPosition:ccp(winSize.width / 2, winSize.height / 2) twirls:6 amplitude:2 grid:ccg(32, 24) duration:3];
      [mySprite runAction:effect];

• CCWaves

          Add 2d waves effect to the node.

          example:
      id effect = [CCWaves actionWithWaves:15 amplitude:5 horizontal:YES vertical:YES grid:ccg(32, 24) duration:3];
      [mySprite runAction:effect];

• CCWaves3D

          Add 3d waves effect to the node.


          example:
      id effect = [CCWaves3D actionWithWaves:5 amplitude:15 grid:ccg(32, 24) duration:3];

      [mySprite runAction:effect];