Effects

• Effects
  • Introduction
  • How do I use them ?
  • References

소개.

Effects는 action의 한 종류이다.. 투명도를 조절하거나 회전 혹은 크기 변경 등 일반 속성을 수정할수있다, grid라는 속성을 수정합니다.

grid 속성은 matrix와 비슷한데, it is a network of lines that cross each other to form a series of squares or rectangles.

These special actions render any CocosNode object (Layer, Scene, Sprite, etc.) into the grid, and you can transform the grid by moving its vertices.

2가지 종류의 grid가 있는데 하나는 타일 그리드이고 나머지 하나는 non-tiled 그리드입니다. 

차이점은 타일 그리드는 각각의 타일이 정점으로 구성되는데 반해  non-titled그리드는 4개의 정점으로 구성됩니다.

(non-tiled) grid:
 

타일그리드
 

사용하는 방법

다른 Action과 마찬가지로 runAction에서 실행됩니다.

1// Create an sprite
2CCSprite* grossini = CCSprite::create("grossini.png");
3grossini->runAction(CCLiquid::create(4, 20, ccg(10,10), 5));

Liquid,다른 grid 와 마찬가지로 grid 피라메터를 받는다. 원하는 그리드의 크기를 증가시킴으로써 이펙트의 품질을 조정할 수있다. 그러나 FPS가 떨어질수있음..

당신이 다른 어떤 Action처럼 취급 할 수 있도록 효과 IntervalAction 작업입니다. 예를 들면 :

1// create a Lens3D action
2CCActionInterval* lens = CCLens3D::create(ccp(240,160),240,ccg(15,10),8);
3
4// create a Waved3D action
5CCActionInterval* waves = CCWaves3D::create(18,80,ccg(15,10),10);
6
7// create a sequence an repeat it forever
8grossini->runAction(CCRepeatForever::create((CCSequence*)CCSequence::create(waves, lens, NULL ) ) );

(non-tiled) 액션

Shaky3D	Waves3D	FlipX3D	FlipY3D

Lens3D	Liquid	Waves	Twirl

Ripple3D

타일 그리드 액션

ShakyTiles3D	ShatteredTiles3D	ShuffleTiles	FadeOutTRTiles

FadeOutBLTiles	FadeOutUpTiles	FadeOutDownTiles	TurnOffTiles

WavesTiles3D	JumpTiles3D	SplitRows	SplitCols

References

Director Scene Layer and Sprite

• Director Scene Layer and Sprite
  • Scenes
  • Director
  • Layers
    • Multiple Layers Example:
  • Sprites
  • References

Scenes

Cocos2d-x에서 씬은 하나의 게임을 그 기능과 성격에 따라 여러 부분으로 나눌 때 사용하는 개념이다. 어떤 개발자들은 씬을 스크린이나 스테이지라고도 부르는데 모두 같은 개념이다. 

씬은 게임의 흐름으로부터 매우 독립적이다. 보통 여러 개의 씬이 모여 하나의 게임을 이루는데 한순간에 하나의 씬만 활성화된다. 각각의 씬은 서로 연결될 수 있기는 하지만 독립된 프로그램으로 생각해도 무방하다.

예들 들어, 만들어진 하나의 게임은 인트로(Intro), 메뉴(Menu), 레벨(Level) 1, 컷씬(Cutscene) 1, 레벨(Level) 2, 승리 결과 화면(Winning cutscene), 패배 결과 화면(Losing cutscene), 랭킹(High score) 등의 씬을 갖게 된다. 

좀더 자세히 설명하면, 게임이 시작되고 인트로 씬이 끝나면 메뉴 씬으로 이동한다. 다음으로 레벨 1 씬으로 전환된 뒤 컷씬이 종료되면, 사용자의 승패 여부에 따라 승리 또는 패배 결과 화면으로 씬이 전환된다. 

cocos2d CCScene 은 하나이상의 CCNode로 구성되며 Scene의 자식으로 더해집니다.

CCLayer 및 CCSprite(CCNode를 상속받는)는 모양과 동작을 Scene에 더해준다. 

일반적으로, CCLayer와 CCScene의 빈 인스턴스로 너의 Scene은 구성됩니다.

CCNodes로 다른 그래픽과 게임 객체를 구현하고 사용자가 만든 CCLayer에 자식으로 추가합니다.

Scene는 CCNode의 하위 클래스이므로, 이들은 수동 또는 CCActions을 사용하여 변환 될 수있다. 자세한 내용은 작업을 참조하십시오.

CCTransitionScene 클래스로 구현 전환이라고 CCScene 클래스의 가족이 있습니다. 그래서, 예를 들어 퇴색 측면에서의 슬라이딩, 그리고 - 다른 하나의 장면에서 전환 할 때 이러한 특수 전환 효과를 만들 수 있습니다.

Director

CCDirector는 OpenGL을 ES를 초기화 할 책임이 있습니다.

Layers

CCLayer가 터치 이벤트를 처리할수있는 CCNode입니다. CCLayer 자체를 그리는 방법을 아는 플레이어가 그들 뒤에 다른 레이어를 볼 수 있도록 반투명 수 있습니다. CCLayers은 게임의 모양과 동작을 정의하는 데 매우 유용합니다, 그래서 당신은 당신이 필요로 할 CCLayer의 서브 클래스를 코딩 프로그래밍 많은 시간을 소비 할 것으로 예상해야한다.

TCCLayer는 터치 이벤트 핸들러를 정의하는 곳이다.터치 이벤트 (ccTouchBegan, ccTouchMoved, ccTouchEnded 또는 ccTouchCancelled) 중 하나를 처리하는 방법을 구현함으로써 CCLayer는 플레이어의 상호 작용에 반응 할 수있다. 일부 Layer은 이벤트를 포착하고 그것을 받아 들일 때까지 이러한 터치 이벤트는, 앞에서 뒤로, 장면 내의 모든 계층에 전파됩니다.

복잡한 응용 프로그램을 사용자 정의 CCLayer 서브 클래스를 정의 할 필요가 동안,적인 Cocos2D는 미리 정의 된 여러 레이어를 제공합니다. 몇 가지 예는 CCMenu (간단한 메뉴 Layer), CCColorLayer (색깔을 그릴수 있는 Layer), 그리고 CCLayerMultiplex (CCLayer를 하나만 쓰고 싶을때) 등이 있습니다.

레이어 CCSprites, CCLabels, 심지어 다른 CCLayer 개체를 포함하여, 아이로 어떤 CCNode를 포함 할 수 있습니다. 층 CCNode의 하위 클래스이므로, 이들은 수동 또는 CCActions을 사용하여 변환 될 수있다. 자세한 내용은 작업을 참조하십시오.

Multiple Layers Example:

 1    CCLayerGradient* layer1 = CCLayerGradient::create(ccc4(255, 0, 0, 255), ccc4(255, 0, 255, 255));
 2    layer1->setContentSize(CCSizeMake(80, 80));
 3    layer1->setPosition(ccp(50,50));
 4    addChild(layer1);
 5
 6    CCLayerGradient* layer2 = CCLayerGradient::create(ccc4(0, 0, 0, 127), ccc4(255, 255, 255, 127));
 7    layer2->setContentSize(CCSizeMake(80, 80));
 8    layer2->setPosition(ccp(100,90));
 9    addChild(layer2);
10
11    CCLayerGradient* layer3 = CCLayerGradient::create();
12    layer3->setContentSize(CCSizeMake(80, 80));
13    layer3->setPosition(ccp(150,140));
14    layer3->setStartColor(ccc3(255, 0, 0));
15    layer3->setEndColor(ccc3(255, 0, 255));
16    layer3->setStartOpacity(255);
17    layer3->setEndOpacity(255);
18    ccBlendFunc blend;
19    blend.src = GL_SRC_ALPHA;
20    blend.dst = GL_ONE_MINUS_SRC_ALPHA;
21    layer3->setBlendFunc(blend);
22    addChild(layer3);

Sprites¶

Cocos2D의 CCSprite는 다른 게임 엔진에서 찾을 스프라이트 유사합니다. 그것은, 회전, 이동 조정, 애니메이션 및 기타 변환을받을 수있는 2D 이미지입니다. (CCSprite 클래스를 사용하여 구현) 스프라이트는 어린이와 같은 다른 스프라이트를 할 수 있습니다. 부모가 변형 될 때, 모든 아이들은 물론 변환됩니다. 스프라이트 CCNode의 하위 클래스이므로, 이들은 수동 또는 CCActions을 사용하여 변환 될 수있다. 자세한 내용은 작업을 참조하십시오.

좌표 시스템

• Coordinate System
  • Introduction of Different Coordinate Systems
    • Cartesian Coordinate System
    • UI Coordinate System
    • Direct3D Coordinate System
    • OpenGL and Cocos2d Coordinate System
  • Parent and Childrens
  • Anchor Point
  • getVisibleSize, getVisibleOrigin vs getWinSize
  • How to convert co-ordinates
    • convertToNodeSpace：
    • convertToWorldSpace：
    • convertToWorldSpaceAR，
    • Sample code：
  • References

기존과 다른 좌표 시스템을 도입.Introduction of Different Coordinate Systems

직교 좌표 시스템(데카르트 좌표)

너는 아마 기하학 수업에 사용되는 좌표를 알고 있을 것이다.

모바일에서는 보통 3가지 정도의 좌표 시스템이 있다.

UI 좌표 시스템

안드로이드나 아이폰에서의 좌표 시스템

• 좌측 상단이 (0,0) 이다.
• X 축은 왼쪽에서부터 오른쪽으로 갈수록 증가한다.
• Y 축은 화면 상단에서 부터 아래로 내려 갈수록 증가한다.

looks like this

Direct3D 좌표 시스템

DirectX 에서는 왼손좌표계를 사용한다.

OpenGL 그리고 Cocos2d 의 좌표시스템

openGL과 cocos2d는 오른손 좌표계를 사용한다.

우리는 2d게임에서 오직 x,y축만 사용합니다. 

• 좌측 하단이 (0,0) 좌표이고 오른손 좌표계를 사용합니다.
• X 축은 왼쪽에서부터 오른쪽으로 갈수록 증가합니다.;
• Y 축은 아래부터 시작하며 위로 갈수록 증가합니다.

좌표 시스템을 좀더 이해하기 쉽도록 아래 사진이 준비되어있음

다이렉트x나 일반적 ui시스템과 다른 좌표시스템이다.

Parent and Childrens

CCNode를 상속받는 모든 클래스는 anchorPoint 속성을 가지고 있습니다.

CCNode를 상속받는 객체를 그릴때(sprite, layer, 기타등등) , cocos2d-x는 anchorpoint와 position를 결합합니다. 또한 물체를 회전할때 Anchorpoint를 기준으로 회전하게됩니다.

우리는 회색배경의 부모 클래스를 만들었고 파란색 배경의 자식클래스를 만들었습니다. 부모의 좌표는((100,100)이고 자식의  anchor point는 중앙입니다.

 1    CCSprite* parent = CCSprite::create("parent.png");
 2    parent->setAnchorPoint(ccp(0, 0));// Anchor Point
 3    parent->setPosition(ccp(100, 100));
 4    parent->setAnchorPoint(ccp(0, 0));
 5    addChild(parent);
 6
 7    //create child 
 8    CCSprite* child = CCSprite::create("child.png");
 9    child->setAnchorPoint(ccp(0.5, 0.5));
10    child->setPosition(ccp(0, 0));
11    parent->addChild(child);//add child sprite into parent sprite.

자식의 위치가 (0,0) 이고 부모의 위치가 (100,100)일때 아래 그림과 같다.

Anchor Point

앵커 포인트의 위치와 개체를 회전 모두에 사용됩니다.앵커 포인트의 좌표는 일반적으로 개체 내 지점에 해당하는 상대 좌표입니다. 예를 들어, 앵커 포인트 CCP (0.5, 0.5)는 객체의 중심에 대응한다.물체의 위치를 설정할 때, 객체는 앵커 포인트로 setPosition () 호출에 지정된 좌표에있을 것이다되도록 위치된다.객체를 회전시킬 때 마찬가지로, 그 기준점에 대해 회전된다.

예를 들어 sprite가 앵커포인트 와 위치가 0,0일때

그 결과 sprite는 하단 왼쪽 모서리에 배치됩니다.

1// create sprite
2CCSprite* sprite = CCSprite::create("bottomleft.png");
3sprite->setAnchorPoint(ccp(0, 0));// Anchor Point
4sprite->setPosition(ccp(0,0));
5addChild(sprite);

예를 들어 sprite가 앵커포인트는 (0.5,0.5) 이고 위치가 0,0일때

1// create sprite
2CCSprite* sprite = CCSprite::create("center.png");
3sprite->setAnchorPoint(ccp(0.5, 0.5));// Anchor Point
4sprite->setPosition(ccp(0,0));
5addChild(sprite);

위와 같이 sprite의 중심이 좌표 0,0에 위치합니다. 앵커포인트는 화소값이 아닌 노드에 상대적인 크기입니다. 0~1 까지 존재함.

getVisibleSize, getVisibleOrigin vs getWinSize

• getVisibleSize
• getVisibleOrigin
• getWinSize

VisibleSize 은 OpenGL상에서 보여지는 크기를 리턴합니다.이 값은  CCEGLView::setDesignResolutionSize()이 함수를 호출하지 않으면 getWinSize와 같습니다.

getVisibleOrigin은 OpenGL상에서 보이는 x,y의 좌표를 반환합니다.

How to convert co-ordinates

convertToNodeSpace：

convertToNodeSpace will be used in, 예를 들어 타일 기반 게임에서, 너가 큰 맵을 가지고 있을때. convertToNodeSpace는 너의 OpenGL 터치 좌표를 큰맵에 있는 좌표계를 기준으로 변형해줍니다.

Example:

다음그림은 보여줍니다. node1의 앵커포인트(0,0)이고 node2의 앵커포인트(1,1)입니다.

우리가  호출하면CCPoint point = node1->convertToNodeSpace(node2->getPosition()); convert node2의 스크린 좌표계는 node1의 좌표계를 기준으로 구해지게 되며 그 결과 node2 의 좌표는 (-25，-60) 이 됩니다.

convertToWorldSpace：

convertToWorldSpace(const CCPoint& nodePoint) coordinates.convertToWorldSpace 항상 우리의 스프라이트의 화면 위치를 반환합니다 당신은 당신의 스프라이트에 탭을 캡처 할하지만 레이어를 확장 / 이동해야하는 경우 매우 유용 할 수 있습니다 화면에 노드 좌표입니다 변환합니다.

일반적으로, 자식 노드의 위치와 부모 노드 호출이 방법은 결과로 아이의 세계의받은 위치를 반환합니다. 호출자가 부모가 아닌 경우이 메서드를 호출 아무 의미도하지 않습니다 것 같다 ...

Example:

1CCPoint point = node1->convertToWorldSpace(node2->getPosition()); 

위의 코드는 화면의 좌표로 노드 2의 좌표를 변환합니다.

예를 들어, 노드 1의 앵커 위치 (0, 0)이 화면에 필요없는 노드 1의 왼쪽 하단 모서리, 그러나되는 경우. 이 화면에 점의 (-5, -20) 좌표 노드 1에 대해 (이 경우)가 (15, 20입니다) (-20, -5)는 노드 2의 위치를 ​​변환합니다.결과는 다음 그림에서 보여줍니다

convertToWorldSpaceAR，

convertToWorldSpaceAR 지점을 고정하는 relatevely 위치를 반환합니다, 그래서 우리의 장면 경우 - 루트 층은 CCP의 앵커 포인트 (0.5F, 0.5F)이 - 기본, convertToWorldSpaceAR은 상대적으로 화면 중앙에 위치를 반환해야합니다.

convertToNodeSpaceAR -. convertToWorldSpaceAR와 동일한 논리

Sample code：

 1
 2CCSprite *sprite1 = CCSprite::create("CloseNormal.png");
 3
 4sprite1->setPosition(ccp(20,40));
 5
 6sprite1->setAnchorPoint(ccp(0,0));
 7
 8this->addChild(sprite1);
 9
10CCSprite *sprite2 = CCSprite::create("CloseNormal.png");
11
12sprite2->setPosition(ccp(-5,-20));
13
14sprite2->setAnchorPoint(ccp(1,1));
15
16this->addChild(sprite2);
17
18CCPoint point1 = sprite1->convertToNodeSpace(sprite2->getPosition());
19
20CCPoint point2 = sprite1->convertToWorldSpace(sprite2->getPosition());
21
22CCPoint point3 = sprite1->convertToNodeSpaceAR(sprite2->getPosition());
23
24CCPoint point4 = sprite1->convertToWorldSpaceAR(sprite2->getPosition());
25
26CCLog("position = (%f,%f)",point1.x,point1.y);
27
28CCLog("position = (%f,%f)",point2.x,point2.y);
29
30CCLog("position = (%f,%f)",point3.x,point3.y);
31
32CCLog("position = (%f,%f)",point4.x,point4.y);
33

Result：

 1
 2position = (-25.000000,-60.000000)
 3
 4position = (15.000000,20.000000)
 5
 6position = (-25.000000,-60.000000)
 7
 8position = (15.000000,20.000000)
 9