[cocos2d-x]#2 Sprite와 Action을 알아보자

 

지난 시간에는 Scene과 그 안에 Sprite를 어떻게 추가하는지 배웠다. 그런데 Cocos2dx에서 Sprite는 뭘까?

 

Sprite는 색상, 애니메이션, 크기, 회전 등 다양한 속성을 가진 2D 이미지다. 쉽게 말해, Unity의 2D Object와 비슷하다고 보면 된다.

 

Sprite 만들기

Sprite를 만드는 방법은 정말 간단하다. 같이 한번 만들어보자!

    Sprite* sp = Sprite::create("HelloWorld.png");
    addChild(sp);

 

사용한 Sprite의 주소만 있으면 Sprite를 생성할 수 있다. 중요한 점은 사용하려는 이미지 파일이 Resource 폴더에 등록되어 있어야 한다는 것이다.

이렇게 하면 원하는 이미지를 쉽게 불러와서 Sprite로 사용할 수 있다!

 

 

Cocos2dx에서는 모든 리소스를 리소스 파일에서 관리해야 한다. 그래서 이미지 파일을 리소스 폴더에 등록하고 사용해야 한다는 점을 기억하자.

그리고 현재 Scene에 Sprite를 그리려면 addChild를 꼭 호출해야 한다. 이를 통해 Sprite가 화면에 제대로 나타날 수 있다.

 

 

Sprite의 속성들 가지고 놀기

Sprite에는 다양한 속성들이 있다.

대표적으로 크기, 회전, 위치, 투명도 등을 조정할 수 있다.

 

Position

말 그대로 Sprite의 위치를 설정해주는 값이다. 그런데 중요한 점은, 위치가 AnchorPoint를 기준으로 설정된다는 것이다. 즉, Sprite의 위치를 설정할 때는 AnchorPoint에 맞춰서 위치를 지정해야 한다.

 

 sp->setPosition(Vec2(100,100));

 

AnchorPoint

AnchorPoint는 기준점을 어디로 잡을지에 대한 속성이다.

 

{0, 0}은 Sprite의 왼쪽 아래를 기준으로 설정된다.
{0.5, 0.5}는 Sprite의 중심을 기준으로 하고,
{1, 1}은 오른쪽 끝을 기준으로 설정된다.

AchorPoint

Position은 AnchorPoint를 기준으로 설정되기 때문에 이 속성을 조정할 때 AnchorPoint를 잘 고려해야 한다.

그렇지 않으면 예상치 못한 위치에 Sprite가 나타날 수 있다. 그래서 이 속성은 신중하게 다뤄야 한다.

 

Scale

 sp->setScale(1);
 sp->setScaleX(1);
 sp->setScaleY(1);

 

SetScaleX와 SetScaleY는 각각 X축과 Y축으로 개별적으로 크기를 조정한다.

즉, SetScaleX는 X축 방향으로만 SetScaleY는 Y축 방향으로만 크기를 늘리거나 줄일 수 있다.

 

 SetScale은 X와 Y 방향 모두 동시에 같은 비율로 크기를 늘리거나 줄인다. 이 방법을 사용하면 비율을 유지한 채 Sprite의 크기를 조정할 수 있다.

 

따라서 X축과 Y축을 각각 독립적으로 조정하려면 SetScaleX와 SetScaleY를 사용하고 비율을 유지하면서 크기를 조정하려면 SetScale을 사용하면 된다.

 

Color 및 Alpha

생삭및 불투명도에 대한 값이다.

sp->setColor(Color3B(255,255,255));
sp->setOpacity(255);//0~255

 

Opacity는 Sprite의 투명도를 조절하는 속성이다. 이 값은 0에서 255 사이로 설정할 수 있다.

0은 완전히 투명한 상태

255는 완전히 불투명한 상태

 

따라서, Opacity 값을 조정하면 Sprite의 투명도를 조절할수 있다!

 

 

Action

다음으로 알아볼 것은 Action이다.

Unity에서 많이 사용되는 Dotween과 비슷하다고 생각하면 이해하기 쉽다.

 

Action은 Sprite나 다른 객체에 대해 애니메이션 효과나 동작을 주는 데 사용된다. 예를 들어, 위치 이동, 회전, 크기 변화 등을 부드럽게 처리할 수 있게 도와준다. Dotween처럼 여러 가지 동작을 체인 형태로 이어붙여서 복잡한 애니메이션을 만들 수도 있다

좀 더 구체적으로 말하자면 Action은 Node를 상속받은 모든 오브젝트에서 사용할 수 있다 즉 Sprite Layer Scene 등 Node를 상속받은 객체들은 모두 Action을 활용하여 다양한 동작을 부여할 수 있다.

 

Action은 여러 가지 종류가 있으며 각각의 Action을 조합하여 더 복잡한 애니메이션을 만들 수 있다

 

 

To와By

To는 절대값을 설정한다 예를 들어 Sprite의 위치를 (100 200)으로 정확하게 이동시키는 경우 이동할 목표 지점을 지정하는 것이다.

 

반면 By는 상대적인 값을 설정한다 예를 들어 현재 위치에서 (100 200)만큼 이동시키는 경우 현재 상태를 기준으로 변화하는 값이다.

 

auto moveTo = MoveTo::create(2, Vec2(50, 10));//(50,10)의 위치로 이동한다.
mySprite1->runAction(moveTo);

auto moveBy = MoveBy::create(2, Vec2(20,0));x로 20만큼 이동한다.
mySprite2->runAction(moveBy);

 

By는 현재값에서 얼만큼 바뀔지를 정한다고 생각하면 된다.

모든 Action은 To와 By가 있으니 현재 상황에서 무엇을 사용해야 할지 잘 생각해보고 사용하자.

 

이제 대표적인 Action 몇 가지를 소개하도록 하겠다!

 

MoveTo/MoveBy

auto moveBy = MoveBy::create(2,Vec2(10,10));
sp->runAction(moveBy);

현재 위치를 기준으로 x는 10만큼 y도 10만큼 2초 동안 움직이는 Action을 만들고

그걸 Sprite에 넣어준것이다.

 

   auto moveTo = MoveTo::create(2,Vec2(10,10));
   sp->runAction(moveTo);

(10,10)으로 2초동안 이동하는 코드이다.

 

 

RotateTo/RotateBy

 

Cocos2dx에서는 z값을 기준으로 회전한다.

때문에 float값 하나만 써도 회전이 가능하다.

auto ro = RotateBy::create(2, 40);
sp->runAction(ro);

현재 각도를 기준으로 2초동안 40도 만큼 회전한다.

 

auto ro = RotateTo::create(2, 40);
sp->runAction(ro);

2초동안 40도로 회전한다.

 

 

Cocos2dx는 Opengl좌표계를 사용하고 있기 때문에 각도는 다음과 같이 설정 된다.

 

 

만약 x축과 y축을 회전 시키고 싶다면

 

Vec3를 이용해서 값을 설정 시켜주면 된다.

 auto ro = RotateTo::create(2, Vec3(40,40,40));
 sp->runAction(ro);

 

 

ScaleTo/ScaleBy

auto se = ScaleTo::create(2, 2);
sp->runAction(se);

 

2초 동안 x와 y의 크기를 2로 바꾼다.

 

auto se = ScaleBy::create(2, 2);
sp->runAction(se);

2초동안 x와 y의 크기를 2만큼 늘린다.

 

근데 만약 한축으로만 크기를 늘리고 싶다면 이렇게 해주면 된다.

 

auto se = ScaleBy::create(2, 2,1);
sp->runAction(se);

두번째 인자가 x의 크기고 3번째 인자에다가 y의 크기를 넣어주면 된다.

 

FadeIn/FadeOut

FadeIn/FadeOut는 by와To없이 하나의 클래스로 이루어져 있다.

auto fadeIn = FadeIn::create(1.0f);//1초동안 알파값이 255로 증가한다.
mySprite->runAction(fadeIn);

auto fadeOut = FadeOut::create(2.0f);2초동안 알파값이 0으로 줄어든다.
mySprite->runAction(fadeOut);

 

만약 알파값을 지정한 값만큼 변경 하고 싶다면 FadeTo/FadeBy 라는 액션을 사용해야 한다.

 

TintTo/TintBy

RGB값을 변경 시켜주는 액션이다.

 

첫번째 인자가 시간,

두번째 인자가 R,

세번째 인자가 G,

4번째 인자가 B이다.

 

auto tintTo = TintTo::create(2.0f, 120.0f, 232.0f, 254.0f);
mySprite->runAction(tintTo);

auto tintBy = TintBy::create(2.0f, 120.0f, 232.0f, 254.0f);
mySprite->runAction(tintBy);

 

 

이제 To와 By에 대한 감이 조금 잡히는가?

다시 한번 정리해 주자면 이렇다.

To	By
절대적인 값으로 설정	현재 값을 기준으로 상대적으로 조정

 

다음시간에는 여러가지 Action을 조합하고 활용 하는 방법에 대해 알려주도록 하겠다.