Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.

Effects

Introduction

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.

These special actions render any CCNode object (CCLayer, CCScene, CCSprite, 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 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 or a grid-3D grid.

You can improve the quality of the effect by increasing the size of the grid, but the effect's speed will decrease.

A grid of size (16,12) will run fast on most devices but it won't look very good. And a grid of (32,24) will look pretty good, but it won't run fast on an iPhone 1st gen (FIXME)

How they work

Each frame the screen is rendered into a texture (FBO). 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.

For more information about the internals refer to:

For example, if you have an scene or layer that renders this image:

…we can transform that image into this one using the CCRipple3D action. As you can see from the wired image, it is using a grid of 32×24 squares, and the grid is non-tiled (all the squares are together).

…or we can transform it into this one using the CCFadeOutTRTiles action. As you can see from the wired image, it is using a grid of 16×12 squares, and the grid is tiled (all the squares/tiles can be separated).

3D actions

Actions that have the '3D' suffix in their names, means that they produce 3D visual effects by modifying the z-coordinate of the grid.

If you're going to use any '3D' action, you will probably want to use the depth buffer. An easy way to do that is by calling:

// IMPORTANT: Call this function at the very beginning, before running your 1st scene
// Create a depth buffer of 24 bits
// These means that openGL z-order will be taken into account
[[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];

And under some circumstances, you might also want to set an RGBA8888 pixel format. This will let you have effects with transparency.

// IMPORTANT: Call this function at the very beginning, before running your 1st scene
// Use this pixel format to have transparent buffers
[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];

Index of grid effects

Available CCGrid3DAction actions:

Available CCTiledGrid3DAction actions:

  • CCFadeOutBLTiles
  • CCFadeOutTRTiles
  • CCFadeOutUpTiles
  • CCFadeOutDownTiles
  • CCShakyTiles3D
  • CCShatteredTiles3D
  • CCShuffleTiles
  • CCSplitCols
  • CCSplitRows
  • CCTurnOffTiles
  • CCWavesTiles3D

Examples

Some examples:

// execute a Waves action on sprite 1
id waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal:YES vertical:NO grid:ccg(15,10) duration:5];
[sprite1 runAction: [CCRepeatForever actionWithAction: waves]];
 
// and execute a Shaky3D action on sprite 2
id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];
[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];
prog_guide/effects.txt · Last modified: 2013/02/18 02:46 by nihmens
Trace: effects
Dieses Dokuwiki verwendet ein von Anymorphic Webdesign erstelltes Thema.
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0