번역일: 2019-07-14
주소: https://docs.cocos2d-x.org/cocos2d-x/en/sprites/manipulation.html
Sprite Manipulation · GitBook
No results matching ""
docs.cocos2d-x.org
스프라이트[Sprite]를 생성한 후에는, 값을 변경할 수 있는 여러 속성들에 접근할 수 있습니다.
코드를 한번 보시죠:
auto mySprite = Sprite::create("mysprite.png");
앵커 포인트[Anchor Point]와 위치 | Anchor Point and Position
앵커 포인트[Anchor Point]는 스프라이트[Sprite]의 위치를 지정할 때 해당 스프라이트[Sprite]의 어느 부분을 기준점으로 사용할 것인지를 지정하는데 사용하는 포인트입니다. 앵커 포인트[Anchor Point]는 이동에 관한 속성에만 효과가 있습니다. 거기에 스케일<크기>[Scale], 로테이션<회전>[Rotation], 스큐<비틀림>[Skew; 기울이기]도 포함되죠. 색이나 불투명도는 해당하지 않습니다. 앵커 포인트[Anchor Point]는 왼쪽 바닥 좌표 시스템[a bottom left coordinate system]을 사용합니다. X와 Y 좌표를 지정할 때, 왼쪽 바닥[the bottom left hand corner]을 기준점으로 계산해야 한다는 뜻입니다. 모든 노드 객체는 (0.5, 0.5)를 기본 앵커포인트[Anchor Point] 값으로 갖고 있습니다.
앵커 포인트[Anchor Point]를 설정하는 것은 간단합니다:
// 모든 스프라이트[Sprite]의 기본 앵커 포인트
mySprite->setAnchorPoint(0.5, 0.5);
// 왼쪽 아래
mySprite->setAnchorPoint(0, 0);
// 왼쪽 위
mySprite->setAnchorPoint(0, 1);
// 오른쪽 아래
mySprite->setAnchorPoint(1, 0);
// 오른쪽 위
mySprite->setAnchorPoint(1, 1);
위의 코드가 실제로 보여진다면 이렇게 됩니다:
앵커 포인트[Anchor Point]를 변경할 때 영향을 받는 스프라이트[Sprite]의 속성 | Sprite properties effected by anchor point
앵커 포인트[Anchor Point]는 좌표 이동에 관련된 속성들에만 효과가 있습니다. 스케일<크기>[Scale], 로테이션<회전>[Rotation], 스큐<비틀림>[Skew; 기울이기]가 이런 속성에 포함되죠.
위치 | Position
스프라이트[Sprite]의 위치는 앵커 포인트[Anchor Point]에 영향을 받습니다. 앵커 포인트[Anchor Point]가 위치를 지정할 때 사용되는 시작점이기 때문이죠. 이게 어떻게 적용되는지 직접 보시죠. 빨간 줄을 주목하세요, 그리고 스프라이트[Sprite]의 위치가 빨간 줄에서 어디에 놓이는지도 놓치지 마세요. 앵커 포인트[Anchor Point]를 바꾸면, 스프라이트[Sprite]의 위치도 바뀝니다. 그쵸? 앵커 포인트[Anchor Point] 값을 바꾼 것만으로도 이렇게 바뀐다는 것을 명심하세요. setPosition()을 사용하지 않고도 이런 결과를 얻었답니다:
단지 앵커 포인트[Anchor Point]말고도 위치를 지정하는 방법은 많습니다. 스프라이트[Sprite] 객체는 setPosition() 메소드를 사용해서도 위치를 지정할 수 있지요.
// 스프라이트[Sprite]의 위치를 x = 100, y = 200으로 지정합니다.
mySprite->setPosition(Vec2(100, 200));
로테이션<회전> | Rotation
스프라이트[Sprite]의 회전각은 +/- 값의 각도를 지정하는 것으로 변경합니다. 양수는 스프라이트 객체를 시계방향으로 회전시키고, 음수는 스프라이트를 반시계 방향으로 회전시키죠. 기본값은 0입니다.
// 스프라이트[Sprite]를 +20 도 회전시킵니다.
mySprite->setRotation(20.0f);
// 스프라이트[Sprite]를 -20 도 회전시킵니다.
mySprite->setRotation(-20.0f);
// 스프라이트[Sprite]를 +60 도 회전시킵니다.
mySprite->setRotation(60.0f);
// 스프라이트[Sprite]를 -60 도 회전시킵니다.
mySprite->setRotation(-60.0f);
스케일<크기> | Scale
스프라이트[Sprite]의 크기는 x나 y를 별도로, 혹은 하나의 값으로 x, y값을 동시에 변경할 수 있습니다. 기본값는 x, y 동일하게 1.0입니다.
// X, Y 크기를 동일하게 2.0으로 변경합니다.
mySprite->setScale(2.0);
// X의 크기만 2.0으로 변경합니다.
mySprite->setScaleX(2.0);
// Y의 크기만 2.0으로 변경합니다.
mySprite->setScaleY(2.0);
스큐<비틀기> | Skew
x나 y 방향을 별도로, 혹은 하나의 값으로 x, y를 동시에 동일 수치로 적용하여, 스프라이트[Sprite]에 비틀림을 줄 수 있습니다. 기본값은 x, y 동일하게 0.0입니다.
// X 방향으로 20.0 비틀림을 줍니다.
mySprite->setSkewX(20.0f);
// Y 방향으로 20.0 비틀림을 줍니다.
mySprite->setSkewY(20.0f);
앵커 포인트에 영향을 받지 않는 스프라이트[Sprite]의 속성들 | Sprite properties not affected by anchor point
스프라이트[Sprite] 객체들의 일부 속성들은 앵커 포인트[Anchor Point]의 영향을 받지 않습니다. 왜일까요? 바로 색[Color]이나 불투명도[Opacity] 같은 류의 속성들로서, 이미지 자체의 품질[superfical qualities]만 바꾸기 때문입니다.
색 | Color
스프라이트[Sprite]의 색을 바꿉니다. Color3B 객체를 입력하여 값을 조정합니다. Color3B는 RGB 값으로 구성된 객체입니다. 아직 Color3B를 사용한 적이 없지만요, 그냥 단순히 RGB 값을 지정하는 객체일 뿐입니다. RGB 값은 총 3 바이트의 값으로 0 - 255 값 중 하나의 값을 갖을 수 있습니다. 또한, Cocos2d-x에는 선정의된 색들이 있으니, 필요하시면, 골라 쓰실 수 있답니다. 선정의 된 색을 사용하면, 말 그대로, 선정의 되어 있어서, 조금은 빨라집니다. 몇가지 예시를 보여드리자면; Color3B::White, Color3B::Red, .. 이런 거에요.
// 선정의된 Color3B 객체를 이용하여 색을 지정합니다.
mySprite->setColor(Color3B::WHITE);
// Color3B 객체를 이용하여 색을 지정합니다.
mySprite->setColor(Color3B(255, 255, 255)); // Color3B::WHITE 랑 같습니다.
불투명도 | Opacity
지정된 값을 입력하여 스프라이트[Sprite]의 불투명도[Opacity]를 바꿉니다. 불투명한 객체는 전혀 투명하지 않죠. (깨끗한 양말은 더럽지 않아요..) 불투명도[Opacity]는 0에서 255 사이의 값을 갖게 되며, 255은 완전한 불투명하다는 뜻이고, 0은 완전 투명하다는 뜻입니다. 이렇게 생각해보세요; 0점짜리 불투명이라는 뜻은 안보인다는 뜻이라구요. 그럼 완전히 이해되실 거에요. 기본값은 255 (완전 불투명) 입니다.
// 불투명도를 30으로 설정합니다. 그러면 이 스프라이트[Sprite]의 불투명도는 11.7%가 됩니다.
// (30 나누기 256은, 0.1171875...)
mySprite->setOpacity(30);
