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 Basic Actions

Actions are like orders given to any CCNode object. These actions usually modify some of the object's attributes like position, rotation, scale, etc. If these attributes are modified during a period of time, they are CCIntervalAction actions, otherwise they are CCInstantAction actions.

Basic Actions

Basic actions are the ones that modify basic properties like:

Position

• CCMoveBy

          Moves a CCNode object x,y pixels by modifying it's position attribute. x and y are relative to the position of the object. Duration is is seconds.

          example:
      [mySprite runAction:[CCMoveBy actionWithDuration:1                                     position:ccp(200, 200)]];

• CCMoveTo

          Moves a CCNode object to the position x,y. x and y are absolute coordinates by modifying it's position attribute.

          example:
      [mySprite runAction:[CCMoveTo actionWithDuration:1 position:ccp(200, 200) ]];

• CCJumpBy

          Moves a CCNode object simulating a parabolic jump movement by modifying it's position attribute.

          example:
      [mySprite runAction:[CCJumpBy actionWithDuration:1 position:ccp(200, 200)  height:100 jumps:5]];

• CCJumpTo

          Moves a CCNode object to a parabolic position simulating a jump movement by modifying it's position attribute.

          example:
      [mySprite runAction:[CCJumpTo actionWithDuration:1 position:ccp(200, 200)  height:80 jumps:5]];

• CCBezierBy

          An action that moves the target with a cubic Bezier curve by a certain distance.

          example:
      ccBezierConfig bezier;
      bezier.controlPoint_1 = ccp(0, 100);
      bezier.controlPoint_2 = ccp(100, 100);
      bezier.endPosition = ccp(200,200);
      [mySprite runAction:[CCBezierBy actionWithDuration:1 bezier:bezier]];

• CCBezierTo

          An action that moves the target with a cubic Bezier curve to a destination point.

          example:
      ccBezierConfig bezier;      bezier.controlPoint_1 = ccp(0, 100);
      bezier.controlPoint_2 = ccp(100, 100);
      bezier.endPosition = ccp(200,200);
      [mySprite runAction:[CCBezierTo actionWithDuration:1 bezier:bezier]];

• CCPlace

          Places the node in a certain position.

          example:
      [mySprite runAction:[CCPlace actionWithPosition:ccp(200, 200)]];

Scale

• CCScaleBy

          Scales a CCNode object a zoom factor by modifying it's scale attribute.

          example:
      [mySprite runAction:[CCScaleBy actionWithDuration:1 scaleX:2.0f scaleY:0.5f]];

• CCScaleTo

          Scales a CCNode object to a zoom factor by modifying it's scale attribute.

          example:
      [mySprite runAction:[CCScaleTo actionWithDuration:1 scaleX:0.5f scaleY:2.0f]];

Rotation

• CCRotateBy

          Rotates a CCNode object clockwise a number of degrees by modiying it's rotation attribute.

          example:
      [mySprite runAction:[CCRotateBy actionWithDuration:1 angle:60]];

• CCRotateTo

          Rotates a CCNode object to a certain angle by modifying it's rotation attribute. The direction will be decided by the shortest angle.

          example:
      [mySprite runAction:[CCRotateTo actionWithDuration:1 angle:90]];

Visibility

• CCShow

          Show the node.

          example:
      [mySprite runAction:[CCShow action]];

• CCHide

          Hide the node.

          example:
      [mySprite runAction:[CCHide action]];

• CCBlink

          Blinks a CCNode object by modifying it's visible attribute.

          example:
      [mySprite runAction:[CCBlink actionWithDuration:4 blinks:8]];

• CCToggleVisibility

          Toggles the visibility of a node.

          example:
      [mySprite runAction:[CCToggleVisibility action]];

Opacity

• CCFadeIn

          Fades In an object that implements the CCRGBAProtocol protocol. It modifies the opacity from 0 to 255. The "reverse" of this action is FadeOut.

          example:
      [mySprite runAction:[CCFadeIn actionWithDuration:1]];

• CCFadeOut

          Fades Out an object that implements the CCRGBAProtocol protocol. It modifies the opacity from 255 to 0. The "reverse" of this action is FadeIn.

          example:
      [mySprite runAction:[CCFadeOut actionWithDuration:1]];

• CCFadeTo

          Fades an object that implements the CCRGBAProtocol protocol. It modifies the opacity from the current value to a custom one.

          example:
      [mySprite runAction:[CCFadeTo actionWithDuration:1 opacity:128]];

Color

• CCTintBy

          Tints a CCNode that implements the CCNodeRGB protocol from current tint to a custom one.

          example:
      [mySprite runAction:[CCTintBy actionWithDuration:1
                                    red:20
                                    green:30
                                    blue:40]];

• CCTintTo

          Tints a CCNode that implements the CCNodeRGB protocol from current tint to a custom one.

          example:
      [mySprite runAction:[CCTintTo actionWithDuration:1
                                    red:20
                                    green:130
                                    blue:240]];

Cocos2d 2.0 Scene Transition

Scene

A scene in Cocos2d is just a special sort of node that acts as the ultimate parent for all other nodes that are visible.

To run with a scene:

[[CCDirector sharedDirector] runWithScene: [MyScene scene]];

To replace a scene:

[[CCDirector sharedDirector] replaceScene: [MyScene scene]];

Cocos2d 2.0 Scene Transition

Fancy transition between scenes is supported with CCTransition*.

Sample code for Scene Transition:

[[CCDirector sharedDirector] replaceScene:

      [CCTransitionFade transitionWithDuration:1.0f scene:[MyScene scene]]];

You may replace CCTransitionFade with:

• CCTransitionFlipAngular
• CCTransitionShrinkGrow
• CCTransitionMoveInB
• CCTransitionMoveInT
• CCTransitionMoveInL
• CCTransitionMoveInR
• CCTransitionFadeTR
• CCTransitionFadeUp
• CCTransitionFlipX
• CCTransitionFlipY
• CCTransitionPageTurn
• CCTransitionCrossFade