본문 바로가기

Cocos2d-x

4. 액션(Action)

※ 액션을 적용시킬 스프라이트 초기화

auto Test_Action1 = Sprite::create("Test_Action1.png");
auto Test_Action2 = Sprite::create("Test_Action2.png");
auto Test_Action3 = Sprite::create("Test_Action3.png");

this->addChild(Test_Action1);
this->addChild(Test_Action2);
this->addChild(Test_Action3);

 

※ 모든 Action은 runAction()함수를 통해 적용이 가능합니다.


1. 기초 액션

① Move

· MoveTo : 객체가 어디에 있든 지정한 좌표로 이동합니다.

· MoveBy : 현재 위치에서 지정한 변화량만큼 이동합니다.

create() 의 첫번째 인수는 실행 시간, 두번째 인수는 위치값.

auto MoveToAction = MoveTo::create(1.0f, Vec2(480, 0));
// = 기준 스프라이트의 위치에서 Vec2(480, 0)의 위치까지 1.0초동안 이동해라.

auto MoveByAction= MoveBy::create(1.0f, Vec2(480, 0));
// 현재 스프라이트 위치에서부터 x축 방향 480.0f, y축 0.0f 방향만큼 1.0초 동안 이동해라.

Test_Action1->runAction(MoveToAction);
Test_Action2->runAction(MoveByAction);

② Jump

· JumpTo::Create(실행시간, 위치값, 점프높이, 점프횟수)

: 지정한 좌표로 실행시간 동안 이동하면서 설정한 점프높이의 점프를 N회 실시합니다.

· JumpBy::Create(실행시간, 위치값, 점프높이, 점프횟수)
: 현재 위치에서 지정한 방향만큼 실행시간동안 이동하면서 점프높이의 점프를 N회 실시합니다.

간단하게 MoveTo, MoveBy에 점프를 실행시키는 것과 같습니다. 

auto JumpToAction = JumpTo::create(1.0f, Vec2(200, 0), 50, 3);
// Vec2(200, 0) 좌표로 1초간 이동하면서 높이가 50인 점프를 3회 실행

auto JumpByAction = JumpBy::create(1.0f, Vec2(200, 0), 50, 3);
// X축 방향으로 200.0 만큼 1초간 이동하면서 높이가 50인 점프를 3회 실행

Test_Action1->runAction(JumpToAction);
Test_Action2->runAction(JumpByAction);

③ Rotate

· RotateTo : 어느 방향이 더 빨리 도달하는지 알아서 계산해서 돕니다.

· RotateBy : 무조건 시계방향으로 돕니다.

auto RotateToAction = RotateTo::create(1.0f, 270);
auto RotateByAction = RotateBy::create(1.0f, 270);

Test_Action1->runAction(RotateToAction);
Test_Action2->runAction(RotateByAction);

④ Scale

· ScaleTo : 현재 사이즈에서 지정한 사이즈만큼만 키웁니다.
· ScaleBy : 지정한 크기만큼 계속 키웁니다.

auto ScaleToAction = ScaleTo::create(1.0f, 2.0f);
auto ScaleByAction = ScaleBy::create(1.0f, 2.0f);

Test_Action1->runAction(ScaleToAction);
Test_Action2->runAction(ScaleByAction);

⑤ Tint

※ 아무것도 지정안한 객체는 RGB(255, 255, 255)가 기본값입니다.
· TintTo : 설정한 Color3B(RGB)값으로 색상을 변경합니다.
· TintBy : 현재 색상값(RGB)에서 지정한 색상값만큼 변화를 줍니다.

 

auto TintToAction = TintTo::create(1.0f, Color3B(255, 0, 0));
// 1초동안 RGB(255, 0, 0)의 색으로 변화시킨다.

auto TintByAction = TintBy::create(1.0f, +30, -60, -90);
// 만약 액션을 받는 객체의 RGB값이(100, 100, 100)이라면, 1초동안 RGB의 값을(130, 40, 10)으로 변경한다.

Test_Action1->runAction(TintToAction);
Test_Action2->runAction(TintByAction);

⑥ Place
· Place : 지정된 위치로 이동하는 액션입니다.

auto PlaceAction = Place::create(Vec2(360, 240));
// 액션을 받는 객체의 위치를 Vec2(360, 240)으로 이동시킨다.

Test_Action1->runAction(PlaceAction);

⑦ Blink
· Blink : 객체를 일정 시간동안 점멸하게(깜빡이게) 만듭니다.

auto BlinkAction = Blink::create(1.0f, 10);
// 1초동안 10번 깜박여라

Test_Action1->runAction(BlinkAction);

⑧ Hide & Show
· Hide : 객체를 숨깁니다.

· Show : 객체를 표시합니다.

auto hide = Hide::create();
Test_Action1->runAction(hide);

auto show = Show::create();
Test_Action1->runAction(show);

⑨ Fade

· Fade : 객체를 지정한 시간동안 지정한 밝기로 조절합니다.
· FadeIn : 객체를 지정한 시간동안 점점 밝아지게 합니다.

· FadeOut : 객체를 지정한 시간동안 점점 어두워지게 합니다.

※ 투명도는 0(불투명) ~ 255(투명) 입니다.

auto Fade = FadeTo::create(1.0f, 128);
// 1초동안 밝기를 반투명으로 바꾼다.
Test_Action1->runAction(fade);

auto FadeIn = FadeIn::create(0.5f);
Test_Action2->runAction(fadeIn);

auto FadeOut = FadeOut::create(0.5f);
Test_Action3->runAction(fadeOut);

2. 복합 액션

① Sequence
· Sequence : 2개 이상의 액션을 조합하여 순차적으로 재생하는 액션입니다.

auto SequenceAction1 = Sequence::create(MoveToAction, RotateByAction, nullptr);
auto SequenceAction2 = Sequence::create(TintToAction, Fade, nullptr);

// 동시실행 가능
auto SequenceAction3 = Sequence::create(MoveToAction, RotateByAction, TintToAction, Fade, nullptr);
// 시퀀스 안에 시퀀스 가능 /// 위 아래는 같은 의미입니다.
auto SequenceAction4 = Sequence::create(SequenceAction1, SequenceAction2, nullptr);

// createWithTwoActions : 조합할 액션이 2개인 경우에, NULL을 넣어줄 필요없이 사용가능합니다.
auto TwoActionSequence = Sequence::createWithTwoActions(MoveToAction, RotateByAction);

② Spawn

· Sequence : 2개 이상의 액션을 조합하여 동시에 재생하는 액션입니다.

· 동시에 실행되지만, 동시에 완료되는 것이 아니고 사용방법은  Sequence와 동일합니다.

· Sequence::create 대신에 Spawn::create를 사용하시면 됩니다.


③ Repeat
· Repeat : 사용자가 지정한 횟수만큼 액션을 반복합니다.

// 위에 사용했던 MoveBy액션
auto MoveByAction = MoveBy::create(1.0f, Vec2(480, 0));

// MoveToAction을 3번 반복하라.
auto moveRepeat = Repeat::create(MoveToAction, 3);

Test_Action1->runAction(moveRepeat);

 

· RepeatForever : 액션을 무한 반복합니다.

// 바로 위에 사용했던 Repeat 코드
auto MoveByAction = MoveBy::create(1.0f, Vec2(480, 0));

// Repeat::create()를 RepeatForever::create()로 해주면 간단히 무한반복합니다.
auto moveRepeatForever = RepeatForever::create(MoveByAction);

Test_Action1->runAction(moveRepeatForever);

④ Delay
· DelayTime : 액션을 조합할 때, 일정시간 동안 딜레이를 준 후에 실행합니다.

auto delay = DelayTime::create(1.0f);

auto delayAction = Sequence::create(MoveToAction, delay, RotateByAction, nullptr);

Test_Action1->runAction(delayAction);

3. Ease Actions

① Ease

· EaseIn : 시작이 느리고 끝이 빠름

· EaseOut : 시작이 빠르고 끝이 느림

· EaseInOut : 둘 다 느림

· Ease 액션들은 기초 액션이 필요합니다.

auto MoveByAction = MoveBy::create(2.0f, Vec2(480, 0));

※ 동일한 액션을 여러곳에 사용하고 싶다면 clone()함수를 사용해줘야 합니다.

auto easeIn = EaseIn::create(MoveByAction, 0.2f);
auto easeOut = EaseOut::create(MoveByAction->clone(), 0.2f);
auto easeInOut = EaseInOut::create(move->clone(), 0.2f);

Test_Action1->runAction(easeIn);
Test_Action2->runAction(easeOut);
Test_Action3->runAction(easeInOut);

 

ex) 공부할 때 연습했던 예시입니다. 중력을 받는듯한 점프를 구현해봤었습니다.

// 기초 점프 액션
auto jump = JumpBy::create(1.0f, Vec2(0, -300), 5.0f, 1);
auto jumpdown = JumpBy::create(1.0f, Vec2(0, +150), 5.0f, 1);

// ease 액션
auto ease1 = EaseOut::create(jump, 0.45f);
auto ease2 = EaseIn::create(jumpdown, 0.45f);
auto spawn = Spawn::createWithTwoActions(ease1, ease2);

Character1->runAction(spawn);

② EaseElastic
· 객체에 탄성 액션을 부여하는 액션입니다.
· 두 번째 인수에는 0보다 크고 1보다 작은 값을 사용해야 합니다.

· 기본값은 0.3이며, 제작사에서 권고하는 수치는 0.3 ~ 0.45입니다.
· 단순한 액션에 사용하며, Sequence나 Spawn과 같은 복합 액션에 사용하는것은 비추천합니다.

기초 액션은 동일하고, EaseIn/EaseOut/EaseInOut의 속성도 동일합니다.

auto easeElasticInAction = EaseElasticIn::create(move, 0.3f);
auto easeElasticOutAction = EaseElasticOut::create(move->clone(), 0.3f);
auto easeElasticInOutAction = EaseElasticInOut::create(move->clone(), 3.0f);

Test_Action1->runAction(easeElasticInAction);
Test_Action2->runAction(easeElasticOutAction);
Test_Action3->runAction(easeElasticInOutAction);

③ EaseBounce

· 기초 액션은 MoveByAction으로 동일합니다. EaseIn/EaseOut/EaseInOut의 속성도 동일합니다.

·  공이 통통 튀는듯한 액션을 부여합니다.

auto easeBounceInAction = EaseBounceIn::create(move);
auto easeBounceOutAction = EaseBounceOut::create(move->clone());
auto easeBounceInOutAction = EaseBounceInOut::create(move->clone());

Test_Action1->runAction(easeBounceInAction);
Test_Action2->runAction(easeBounceOutAction);
Test_Action3->runAction(easeBounceInOutAction);

④ Speed
· 액션의 재생속도를 조절합니다.
· 두 번째 인수는 배속입니다.

auto MoveByAction = MoveBy::create(2.0f, Vec2(480, 0));

auto Speed1 = Speed::create(move, 1.0f);
auto Speed2 = Speed::create(move->clone(), 2.0f);
auto Speed3 = Speed::create(move->clone(), 3.0f);

Test_Action1->runAction(Speed1);
Test_Action2->runAction(Speed2);
Test_Action3->runAction(Speed3);

 

'Cocos2d-x' 카테고리의 다른 글

6. 애니메이션(Animation)  (0) 2021.08.28
5. 스케줄(schedule)  (0) 2021.08.18
3. Menu  (0) 2021.08.07
2. Label, Font  (0) 2021.08.06
1. Sprite  (0) 2021.07.24