코딩으로 애니메이션 연출

게임을 제작하다 보면 많은 연출들을 해야 하는데, 모든 것들을 스프라이트 애니메이션으로

처리하다 보면 많은 리소스로 인한 용량이 늘어나고 최적화를 하기 힘들며 실제로 애니메이션을

제작해야 하는 고통 때문에 더 쉽게 처리 할 수 있는 방법이 없을까 고민하게 됩니다.

게임메이커 스튜디오에서도 유니티의 DoTween 에셋같은 트위닝 애니메이션같은 에셋이 존재하지만

몇 가지의 패턴만 사용할 것인데 플러그인을 사용하는 것도 귀찮기만 합니다.

그래서 실질적으로 쓸만한 패턴들을 직접 코딩하거나 스크립트를 만들어서 이용하는 과정을

소개할까 합니다.

보물상자와 골드로 기본 세팅하기

반드시 보물상자와 골드일 필요는 없겠지만 직관적으로 이해하기 쉽게 하기 위해서 보물상자와 골드를

준비합니다. 보물 상자는 닫힌 상태와 열린 상태 2개의 이미지가 필요하고, 골드 역시 빙글빙글 도는

프레임 애니메이션 이미지가 필요합니다. (골드는 애니메이션이 없어도 큰 문제는 없음)

각각 오브젝트에 이미지를 연결하고 게임메이커 스튜디오 생성 코드에 이미지 속도를 제어하는

image_speed = 0.5; //프레임이 적을 수록 낮은 수치를 입력

그리고 보물상자는 처음부터 애니메이션이 되면 안되기에 image_speed = 0; 으로 설정합니다.

테스트이기에 간단하게 마우스를 클릭하여 보물상자를 열었을 때를 확인하기 위한 변수를 만듭니다.

open = false;

보물상자 오브젝트에서 이벤트를 추가하여 마우스 > 왼쪽 버튼 누름 이벤트 추가.

그곳에서 작성해야 할 코드는 단 두줄입니다.

image_index = 1; // 이미지 인덱스가 0이면 첫번째 프레임 1이면 두번째 프레임

open = true;

이번에는 골드 오브젝트를 만들고 아래와 같이 세팅합시다.

[생성 이벤트]

image_speed = 0.5;
spd = 1;
dir = 0;

[스텝 이벤트]

x += lengthdir_x(spd, dir);
y += lengthdir_y(spd, dir);

spd *= 0.95; // 점점 느려짐
gravity = 0.3;

보물상자를 열면 골드가 부채골로 튀어오르기

보물 상자가 열렸을 때 Step 이벤트에 작성해야 할 코드는 아래와 같습니다.

[보물상자 스텝이벤트]

1
2
3
4
5
6
7
8
9
10
if (open)
{
    for (var i = 0; i < 10; i++) {
        var inst = instance_create_layer(x, y, “Instances”, obj_gold);
        inst.spd = –10 + random(2);
        inst.dir = irandom_range(225, 315);
    }
    open = false;
}
Colored by Color Scripter
cs

룸에 보물 상자를 배치하고 실행하면 아래와 같은 결과를 얻을 수 있습니다.

inst.spd 부분에 값이 마이너스는 위로 플러스 값은 바로 아래쪽으로 떨어지게 되며

inst.dir 부분은 각도값을 설정하도록 해봤습니다. (원하는 값으로 랜덤하게 가능)

그냥 떨어지지 않고 바운딩 되며 사라지게 하기

obj_coin에서 이번에는 생성 이벤트에 아래와 같은 코드를 넣습니다.

[코인 생성 이벤트]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 초기 속도 (랜덤으로 위로 튀기기)
hspeed = irandom_range(–3, 3);
vspeed = irandom_range(–8, –12);
// 중력
grav = 0.45;
// 바운스 힘 감소 비율
bounce_factor = 0.55;
// 바닥 높이(타일/지면 오브젝트가 없다면 직접 지정하기)
floor_y = room_height – 32;
// 회전
image_angle = irandom(360);
image_speed = 0.5 + random(1);
cs

[코인 스텝 이벤트]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 중력 적용
vspeed += grav;
// 이동
x += hspeed;
y += vspeed;
// 바닥 충돌 체크
if (y > floor_y)
{
    y = floor_y;
    // 바운스 (위로 튀김)
    vspeed = –vspeed * bounce_factor;
    // 바운스가 거의 없으면 정지
    if (abs(vspeed) < 1)
    {
        vspeed = 0;
        hspeed = 0;
        image_speed = 0;
    }
}
Colored by Color Scripter
cs

결과는 아래와 같습니다.

코드의 숫자들을 변형해가며 취향대로 연출 할 수 있습니다.

생성 된 후 특정 위치로 이동하게 하기

이번에는 보물 상자를 열면 코인이 보물 상자 위에 뜨고 잠시 뒤에 특정 위치로 이동하는

방식인데 보통 동전이 인터페이스 방향으로 날아가게 하거나 이동하는 방식으로 많이 쓰입니다.

[코인 생성 이벤트]

1
2
3
4
5
6
mx = x + random_range(–60, 60);
my = y – random_range(40, 120);
t = 0;
state = “jump”;
function ease_out_sine(t)   { return sin(t * pi / 2); }
cs

[코인 스텝 이벤트]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (state == “jump”) {
    t += 0.05;
    // 일단 파편처럼 날아감 (Sine 활용)
    x = lerp(x, mx, ease_out_sine(t));
    y = lerp(y, my, ease_out_sine(t));
    if (t >= 1) {
        state = “collect”;
        t = 0;
    }
}
else if (state == “collect”) {
    t += 0.05;
    // 상자 위로 빨려들어감
    x = lerp(mx, other.x, t);
    y = lerp(my, other.y – 20, t);
    if (t >= 1) instance_destroy();
}
Colored by Color Scripter
cs

그외에 다양한 효과들을 스크립트로 만들고 사용하기

개인적으로 써보고 유용하다고 느끼는 공개된 함수들을 검색으로 쉽게 찾아볼 수 있었습니다.

[원의 곡선을 그려주는 함수들]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function ease_in_circ(t) {
    return 1 – sqrt(1 – t * t);
}
function ease_out_circ(t) {
    t –= 1;
    return sqrt(1 – t * t);
}
function ease_inout_circ(t) {
    t *= 2;
    if (t < 1) return –0.5 * (sqrt(1 – t * t) – 1);
    t –= 2;
    return 0.5 * (sqrt(1 – t * t) + 1);
}
Colored by Color Scripter
cs

[바운스 인/아웃 함수]

1
2
3
4
5
6
7
8
9
10
11
12
function ease_in_bounce(t) {
    return 1 – __bounce_calc(1 – t);
}
function ease_out_bounce(t) {
    return __bounce_calc(t);
}
function ease_inout_bounce(t) {
    if (t < 0.5) return (1 – __bounce_calc(1 – t * 2)) * 0.5;
    return (__bounce_calc(t * 2 – 1) * 0.5) + 0.5;
}
Colored by Color Scripter
cs