Cocos2d-x 기초 1 - 좌표계, 앵커포인트, 스프라이트

Cocos2d-X 의 기초인 좌표계와 앵커포인트 사용방법입니다.

1. 기본 좌표계

좌표계는 좌하단 (0,0) 이 기준이며 보통의 좌상단이 (0,0) 인 것과 많이 다릅니다. 

위의 그림과 같이 Cocos2d-X 의 좌표는 좌측 하단부터 읽는다고 보시면 됩니다. ( OpenGL API 기반으로 만들어졌기때문 )

간단히 예제로 보면 - Class 폴더의 HelloWorldScene.cpp 를 수정하시면 됩니다.

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    auto spr = Sprite::create("money.png");//Sprite  생성
    spr->setPosition(Point(0,0));//포인트 지정
    this->addChild(spr);
    
    
    return true;
}

위와 같이 0,0 으로 포인터를 잡을경우 이미지의 중앙을 기준으로 (0,0) 에 이미지가 위치하게 됩니다.

예제의 이미지는 아래와 같은 돈 아이콘 입니다.

2. 앵커 포인트

앵커 포인트는 화면 출력이 되는 기준 점을 의미 합니다. 위의 예제의 경우 앵커포인터 지정하지 않아서 디폴트인 ( 0.5 , 0.5 )로 하였기 때문에 좌표 ( 0 , 0 ) 에 이미지의 중앙이 오게 되었습니다. 이제 앵커포인터를 이용해 ( 0 , 0 ) 에 이미지의 ( 0 , 0 ) 을 위치하도록 하겠습니다.

 *Class 폴더의 HelloWorldScene.cpp 를 수정하시면 됩니다.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    auto spr = Sprite::create("money.png");//Sprite  생성
    spr->setAnchorPoint(Point(0,0));//앵커포인터 지정
    spr->setPosition(Point(0,0));//포지션 지정
    this->addChild(spr);
    
    
    return true;
}

3. 스프라이트

 위의 예제에서도 사용했지만 스프라이트 이미지 객체를 사용하여 이미지를 출력합니다. 이 스프라이트에는 Rect() 를 사용하여 이미지를 자른 후 표현할수 있습니다. 간단하게 예제로 보겠습니다.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    auto spr = Sprite::create("money.png",Rect(0, 0, 100, 100));
    spr->setAnchorPoint(Point(0.5,0.5));//앵커포인터 지정
    spr->setPosition(Point(300,200));//포지션 지정
    this->addChild(spr);
    
    
    return true;
}

결과 

 결과를 보시면 아시겠지만 ( 이미지의 배경이 투명이라 재대로 되지 않았내요. ) 이미지가 잘린후 300, 200 포인트로 좌표가 이동된 모습입니다.

 간단하게 좌표계, 앵커포인트, 스프라이트 를 봤습니다. 다른 이미지 파일을 사용하고 값을 바꿔 바면서 한번씩 테스트해 보시기 바랍니다.