2011. 4. 1. 23:49 cocos2d 메뉴얼(번역)
cocos 2d : Effects(번역)
Effects
소개
Effects는 특별한 종류의 action이다. opacity, position, rotation, scale 같은 일반적인 프로퍼티를 변경하는 대신 새로운 프로퍼티(gridproperty)를 변경한다.
그리드 프로퍼티는 행렬과 같다. 여러개의 정사각형 또는 직사각형 형태를 서로 교차하는 선들의 네트웍이다.
이 특별한 action은 그리드로 어떤 CCNode object(CCLayer, CCScene, CCSprite, 등)도 렌더링하며 그리드의 꼭지점을 움직여 그리드를 변형할 수 있다.
다음 2종류의 그리가 있다 : tiled 그리도 와 non-tiled 그리드. 차이점은 tiled 그리드는 개별 타일의 집합이며 non-tiled 그리드는 꼭지점의 집합이다.
* 그리드가 2차원(행, 열)이라도 각각의 꼭지점은 3차원이다(x,y,z)
그리드는 2차원이다 : 행과 열 하지만 각 꼭지점은 3차원이다 : x,y,z. 그리고 tiled-grid-3D의 변형을 통해 2d 또는 3d를 만들 수 있다.
그리드의 크기를 늘리면 효과의 질은 높아진다. 하지만 효과의 시간은 줄어든다.
그리드의 크기(16,12)는 대부분의 단말기에서 빠르게 동작한다. 하지만 별로 좋아보이지 않는다. 그리드(32,24)는 매우 좋지만 1세대 아이폰에서는 빨리동작하지 않는다.
How they work
각각의 화면 프레임은 텍스처(FBO)로 렌더링 된다. 이 텍스처는 꼭지점 배열로 바뀌고 이 꼭지점 배열(grid)는 그리드 효과에 의해 변형된다. 마지막으로 꼭지점 배열은 화면에 렌더링된다.
내부에 관한 더 자세한 정보는 다음을 참조:
- CCTiledGrid3D and CCTiledGrid3DAction for tiled grids
- CCGrid3D and CCGrid3DAction for non-tiled grids
예를 들어 다음 이미지를 렌더링한 scene이나 layer가 있다면
...CCRipple3D action을 사용하여 이 이미지를 변형할 수 있다. 와이어 이미지가 보여주는 바와같이 32x24정사각형의 그리드를 사용였고 이 그리드는 non-tiled이다(모든 사각형은 연결되어있다).
...또한 CCFadeOutTRTiles action을 사용하여 변형할 수 있다. 다음 와이어 이미지에 보이는것처럼 이 그리드는 16x12 사각형을 사용하였고 이 그리드는 tiled이다(모든 사각형/타일은 분리되어있다).
3D actions
이름에 '3D'접미사가 분은 action은 그리드의 z좌표를 수정하여 3D 비주얼 효과를 제공한다.
만일 어떠한 '3D' action을 사용한다면 아마도 깊이 버퍼를 사용하길 원할것이다. 간단한 호출을 통해 그렇게 할 수 있다.
// 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];
그리고 어떤상황에서는 RGBA8888 픽셀 포멧을 사용해야 되는 경우가 있다. 이는 투명효과를 가지게 해준다.
// 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:
CCFadeOutBLTilesCCFadeOutTRTilesCCFadeOutUpTilesCCFadeOutDownTilesCCShakyTiles3DCCShatteredTiles3DCCShuffleTilesCCSplitColsCCSplitRowsCCTurnOffTilesCCWavesTiles3D
Examples
Some examples:
// execute a Waves action on sprite 1id 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 2id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];
