본문 바로가기

IT 번역/Cocos2d-x 메뉴얼[manual] 번역

스프라이트 | Sprite

모든 게임은 스프라이트[Sprite] 객체가 있습니다. 어떤게 스프라이트[Sprite]인지 알아채셨을 수도 있고, 못하셨을 수도 있지요. 스프라이트[Sprite]는 화면에서 움직이는 객체를 말합니다. 직접 조정하실 수 있다는 것이죠. 만드시는 게임에서 메인 캐릭터가 아마 스프라이트[Sprite]일 겁니다. 그래요, 뭔 생각하시는지 알아요 - 그래픽 객체가 다 스프라이트[Sprite]가 아녀? 라고 물어보고 싶으셨죠? 대답은 "아뇨!!" 입니다. 왜냐구요? 음... 스프라이트[Sprite]는 움직이게 할 때만 스프라이트[Sprite]입니다. 만약 해당 객체를 움직이지 않고 그냥 놔두시면, 걔는 그냥 노드[Node]에요.

이전 글에서 보셨던 이미지를 다시 한번 살펴보고, 뭐가 스프라이트[Sprite]고 어떤게 노드[Node]인지 한번 짚어보겠습니다:

 

스프라이트[Sprite]가 중요하지 않은 게임은 없습니다.  Platformer(?)를 작성하다보면, 여러개의 이미지로 구성된 메인 캐릭터가 있지요? 그게 스프라이트[Sprite]입니다.

스프라이트[Sprite]는 만들기 쉽습니다. 그리고, 위치, 회전, 크기, 투명도, 색 등등 여러가지 속성들을 조절할 수 있습니다.

// 스프라이트[Sprite]를 생성하는 방법입니다.
// This is how to create a sprite
auto mySprite = Sprite::create("mysprite.png");

// 스프라이트[Sprite]의 속성을 변경하는 방법입니다.
// this is how to change the properties of the sprite
mySprite->setPosition(Vec2(500, 0));

mySprite->setRotation(40);

// X와 Y 축 대비 크기를 동시에 동일하게 설정합니다.
// sets both the scale of the X and Y axis uniformly
mySprite->setScale(2.0);

mySprite->setAnchorPoint(Vec2(0, 0));

 

그림을 하나씩 제대로 살펴보지요, 위에 있는 예제 코드를 보시면서 아래의 스크린샷을 확인해보세요:

위의 화면에서 mySprite->setPosition(Vec2(500, 0)); 을 이용하여 위치를 지정하면:

스프라이트[Sprite]의 위치가 원래 위치에서 새로 지정한 위치로 변경된 것을 확인하실 수 있습니다.

거기에 mySprite->setRotation(40); 을 이용하여 회전각을 넣어주면:

보시는 바와 같이 지정한 만큼 스프라이트[Sprite]가 회전합니다.돕니다.돌아버립니다.

여기에 mySprite->setScale(2.0); 을 이용하여 상대 크기 값을 넣어주면:

자, 또 우리가 바꾼대로 스프라이트[Sprite]가 변경되는 것을 보실 수 있지요.

마지막으로, 모든 노드[Node] 객체들은 (스프라이트[Sprite]도 노드[Node]의 하위 클래스 중 하나이니, 모든 노드[Node]라고 해도 이해하시죠?) 앵커 포인트[Anchor Point] 값을 갖고 있습니다. 이 앵커 포인트[Anchor Point]가 뭔지 아직 이야기해드리진 않았죠, 아마 지금이 적절한 때인거 같네요. 이 앵커 포인트[Anchor Point]는, 스프라이트[Sprite]의 위치를 지정할 때 기준 좌표로 사용되는 스프라이트[Sprite]의 한 지점을 특정하는 방법으로 이해하셔도 무방합니다.

지금 활용하고 있는 예제 게임에서 캐릭터를 예시로 삼아서, 아래의 코드를 이용하여 앵커 포인트[Anchor Point]를 0, 0으로 설정합니다:

mySprite->setAnchorPoint(Vec2(0, 0));


그러면, 이 스프라이트[Sprite]의 왼쪽 아래 코너가 setPosition()을 호출할 때 사용하는 기준점으로 사용되는 것을 확인하실 수 있을 겁니다. 이 값의 변화에 따른 차이점을 살짝 보여드릴께요.

각 화면에 빨간 점을 보세요, 그 점이 앵커 포인트[Anchor Point]가 어디에 있는지를 나타내 주는 겁니다!

보시다시피, 앵커 포인트[Anchor Point]는 노드[Node]의 위치를 지정할 때 매우 유용합니다. 게다가 앵커 포인트[Anchor Point]는 게임에서 어떤 효과를 내실 때, 필요에 따라 동적으로 조정하실 수도 있어요.

자, 이제 스프라이트[Sprite]의 모든 요소들을 조정할 수 있게 되었습니다. 그런데 말입니다, 만약 이런 류의 변경을 자동화하고, 시간의 흐름에 따라 적용하고자 한다면 어떻게 할까요? 뭐, 계속 읽으셔야죠...