Cocos2D 2.0 Tiled 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 tiled-grid-3D grid.

A tiled-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];

Tiled Grid 3D Actions

• CCFadeOutBLTiles

          Fades out the tiles in a Bottom-Left direction.

          example:

      id effect = [CCFadeOutBLTiles actionWithSize:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCFadeOutDownTiles

          Fades out the tiles in downwards direction.


          example:
      id effect = [CCFadeOutDownTiles actionWithSize:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCFadeOutTRTiles

          Fades out the tiles in a Top-Right direction.


          example:
      id effect = [CCFadeOutTRTiles actionWithSize:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCFadeOutUpTiles

          Fades out the tiles in upwards direction.


          example:

      id effect = [CCFadeOutUpTiles actionWithSize:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCFadeIutDownTiles

          Fades out the tiles in downwards direction.


          example:

      id effect = [CCFadeOutDownTiles actionWithSize:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCJumpTiles3D

          A sin function is executed to move the tiles across the Z axis.


          example:

      id effect = [CCJumpTiles3D actionWithJumps:6 amplitude:20 grid:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCShakyTiles3D

          Shaky the tiles.


          example:

      id effect = [CCShakyTiles3D actionWithRange:2 shakeZ:YES grid:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCShatteredTiles3D

          Shatter the tiles.


          example:

      id effect = [CCShatteredTiles3D actionWithRange:2 shatterZ:YES grid:ccg(9, 9) duration:3];

      [mySprite runAction:effect];

• CCShuffleTiles

          Shuffle the tiles.


          example:

    id effect = [CCShuffleTiles actionWithSeed:1 grid:ccg(32, 24) duration:3];

     [mySprite runAction:effect];

• CCSplitCols

          Split the node in columns.

          example:
      id effect = [CCSplitCols actionWithCols:20 duration:3];

      [mySprite runAction:effect];

• CCSplitRows

          Split the node in rows.

          example:
      id effect = [CCSplitRows actionWithRows:6 duration:3];

      [mySprite runAction:effect];

• CCTurnOffTiles

          Turn off the tiles

          example:
      id effect = [CCTurnOffTiles actionWithSeed:3 grid:ccg(32, 24) duration:3];

      [mySprite runAction:effect];

• CCWavesTiles3D

          Add 3d waves effect to the tiles.

          example:
      id effect = [CCWavesTiles3D actionWithWaves:10 amplitude:6 grid:ccg(32, 24) duration:3];

      [mySprite runAction:effect];