좌표 시스템

• 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