[📚정보] [고도4] Part.1 - 10 공격과 피격

[김메가(scw973108)]

이번 시간에는 주인공, 적 캐릭터의 공격 기능과 그에 대응되는 피격을 구현할 것이다.

우선 플레이어의 공격 애니메이션부터 만들자.

1. player씬을 열고 AnimationPlayer노드를 선택한 뒤 attack이라는 이름으로 새 애니메이션을 만든다.

2. Sprite노드의 texture속성에 대한 트랙을 추가한다.

3. attack애니메이션의 총 길이를 0.4로 설정한다. (루프는 활성화시키지 않는다)

4. 키프레임 4개를 0.1초 간격으로 배치한다.

5. graphic/character/main_character폴더의 attack_000.png ~ attack_003.png 이미지들을 각 키프레임에 지정해준다.

공격 애니메이션을 만들었다면 player.gd스크립트를 열고 _process함수의 내용을 스크린샷과 같이 수정해준다.

게임을 실행시키고 Z키를 누르면 공격 애니메이션이 실행된다.

공격 애니메이션이 제대로 작동함을 확인했으면 공격을 맞아줄 적 캐릭터의 피격 애니메이션을 만들자.

1. enemy씬을 열고 AnimationPlayer노드를 선택한 뒤 hit이라는 이름으로 새 애니메이션을 만든다.

2. Sprite노드의 texture속성에 대한 트랙을 추가한다.

3. hit애니메이션의 총 길이를 0.6로 설정한다. (루프는 활성화시키지 않는다)

4. 키프레임 3개를 0.2초 간격으로 배치한다.

5. graphic/character/enemy폴더의 hit_000.png ~ hit_002.png 이미지들을 각 키프레임에 지정해준다.

이제 enemy.gd 스크립트를 연 다음 스크린샷과 같이 새로운 hit함수를 추가해주고

_process함수를 스크린샷과 같이 수정해준다.

이제 player씬으로 돌아가자.

공격 애니메이션의 이미지로부터 공격 판정의 위치를 가늠하기 위하여 attack애니메이션의 2번째 키프레임에 재생 헤드를 맞춰놓자. 그리고 Sprite노드의 하위에 Area2D노드를 생성하고 또 그 하위에 CollisionShape2D노드를 추가해준다.

CollisionShape2D의 shape속성에 RectangleShape2D를 넣어주고 공격 판정의 범위를 조절해준다. 그리고 다른 CollisionShape2D와 헷갈리지 않도록 debug_color를 붉은 색으로 설정하자.

Area2D의 이름을 Attack으로 수정하고

인스펙터에서 Layer속성과 Mask속성을 스크린샷과 같이 지정한다.

player.gd스크립트를 열고 스크린샷의 강조된 부분들을 추가해준다.

또한 새로운 attack함수를 추가로 작성한다.

이제 attack애니메이션의 특정 재생 시점에서 방금 작성한 attack함수가 작동하도록 해야 한다. 이를 위하여 [Add Track]버튼을 클릭하고

메뉴 중에서 [Call Method Track]을 선택한다.

노드를 선택하는 창이 뜨는데, 최상위의 Player노드를 선택하고 OK버튼을 클릭하면 된다.

이렇게 attack애니메이션에 새로운 트랙이 생성되었다. 이 트랙은 생성시 선택한 노드에 포함된 함수를 작동시키는 것이 가능하다. 트랙을 우클릭하면 나타나는 [Insert Key]메뉴를 클릭하자.

그러면 Player에 포함된 함수들을 나열한 목록이 나타나는데, 이 중에서 attack함수를 선택하고 [Open]버튼을 클릭한다.

그럼 이렇게 attack함수에 대한 키프레임이 생성된다.

게임을 실행하고 적에게 다가가 공격하면 적 캐릭터의 피격 모션이 재생될 것이다.

그런데 주인공 캐릭터가 적에게 가려지니 보기가 좀 불편하다. 주인공 캐릭터가 잘 보이도록 가장 앞에 나오게 하고 좋겠는 데, stage_1의 씬 독에서 주인공 캐릭터 씬을 수동으로 드래그하여 노드들 중 가장 아래에 위치시키면 되겠으나, 그러면 노드를 추가할 때마다 이를 신경써줘야한다. 그러니 스크립트를 이용해서 주인공이 항상 가장 앞에 나오도록 만들어보자.

해야할 일은 간단하다. 스크린샷과 같이 player.gd스크립트의 _process함수에 move_to_front함수를 작성해주면 된다.

게임을 실행하고 잘 작동하는지 확인해보자. 이제 주인공의 공격에 적이 반응하는 것이 잘 나타난다.

주인공과 마찬가지로 적 캐릭터에게도 공격을 구현해 줄 시간이다. 적 캐릭터의 공격 애니메이션을 만들자.

1. enemy씬을 열고 AnimationPlayer노드를 선택한 뒤 attack이라는 이름으로 새 애니메이션을 만든다.

2. Sprite노드의 texture속성에 대한 트랙을 추가한다.

3. attack애니메이션의 총 길이를 0.8로 설정한다. (루프는 활성화시키지 않는다)

4. 키프레임 8개를 0.1초 간격으로 배치한다.

5. graphic/character/enemy 폴더의 attack_000.png ~ attack_007.png 이미지들을 각 키프레임에 지정해준다.

주인공 캐릭터의 피격 애니메이션도 제작하자.

1. player씬을 열고 AnimationPlayer노드를 선택한 뒤 hit이라는 이름으로 새 애니메이션을 만든다.

2. Sprite노드의 texture속성에 대한 트랙을 추가한다.

3. hit애니메이션의 총 길이를 0.2로 설정한다. (루프는 활성화시키지 않는다)

4. 키프레임 1개를 0초 시점에 배치한다.

5. graphic/character/main_character폴더의 hit_000.png 이미지를 키프레임에 지정해준다.

주인공 캐릭터의 피격 애니메이션을 제작했으면 player.gd스크립트를 열고 스크린샷과 같이 hit함수를 추가해준다.

그리고 _process함수에 스크린샷에서 강조된 부분을 추가해준다.

다시 enemy씬으로 돌아오자. 주인공의 공격 판정을 만들 때와 마찬가지로 Sprite노드 하위에 Area2D를 생성, 또 그 하위에 CollisionShape2D노드를 생성한다.

Area2D의 이름은 Attack으로 수정해준다.

attack애니메이션의 0.5초 시점에 재생헤드를 놓아 공격 이미지의 위치를 가늠한 다음, CollisionShape2D노드의 shape속성에 RectangleShape2D를 넣고 공격판정의 크기와 위치를 잡아준다. 그리고 구분을 위하여 색상을 붉은 색으로 설정한다.

Attack노드의 인스펙터에서 Layer와 Mask를 설정한다.

enemy.gd 스크립트를 열고 스크린샷에서 강조된 부분을 추가해준다.

_process함수에도 스크린샷에서 강조된 부분을 추가해준다.

_process함수의 내용 중 else문 내부의 &”idle”을 &”attack”로 수정해준다. 스크린샷을 잘 보고 수정하자.

또한 attack함수를 추가하자.

주인공 캐릭터의 공격을 구현할 때와 마찬가지로, enemy씬에서 attack애니메이션에 Call Method Track을 추가하고 attack함수에 대한 키프레임을 추가해준다.

이제 게임을 실행하고 적 캐릭터 가까이 접근하면 적이 공격하는 모습과 주인공 캐릭터가 피격 당하는 모습을 볼 수 있다.