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

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