애니메이션은 게임 개발의 필수 요소로, 게이머가 몰입할 수 있는 경험을 만드는 데 크게 기여합니다. 고닷 게임에 2D 애니메이션을 통합하면 캐릭터와 주변 환경의 시각적 매력과 상호 작용이 향상되어 전반적인 게임 환경에 사실감과 역동성을 더할 수 있습니다.

고닷은 2차원 애니메이션을 비교적 쉽게 제작하고 조작할 수 있는 강력한 메커니즘과 기능을 제공합니다.

고닷 게임 설정하기

고닷 게임 엔진 내에서 기초적인 2D 게임 환경을 설정하여 프로세스를 시작합니다. 새 씬을 생성한 후 플레이어 캐릭터 역할을 할 KinematicBody2D 노드를 추가해야 합니다. KinematicBody2D 내에 플레이어의 충돌 한계를 정의하는 직사각형 윤곽을 가진 CollisionShape2D를 통합합니다.

‘PlayerController’라는 스크립트를 새로 생성합니다. ‘MoveToAction’ 컴포넌트를 추가하고 ‘on_move’ 이벤트에 할당합니다. 또한 애니메이션 스프라이트의 위치를 저장할 빈 목록을 만듭니다. 이 목록에 ‘on_move’ 이벤트가 트리거될 때마다 스프라이트의 현재 위치를 추가합니다.

플레이어 캐릭터의 움직임을 제어하는 스크립트를 KinematicBody2D 오브젝트에 첨부하여 구현합니다.

  extends KinematicBody2Dconst SPEED = 200func _physics_process(delta): var velocity = Vector2.ZERO if Input.is_action_pressed("move_left"): velocity.x -= SPEED if Input.is_action_pressed("move_right"): velocity.x += SPEED if Input.is_action_pressed("move_up"): velocity.y -= SPEED if Input.is_action_pressed("move_down"): velocity.y += SPEED velocity = move_and_slide(velocity) 

본 스크립트는 플레이어에게 균일한 속도를 설정하여 화살표 키 또는 WASD를 사용하여 수평 방향으로 이동할 수 있을 뿐만 아니라 동일한 컨트롤 세트를 사용하여 수직 방향으로도 이동할 수 있도록 합니다.

애니메이션 스프라이트에 스프라이트 시트 추가

노드의 속성 탭에서 프레임 섹션으로 이동하여 애니메이션에 스프라이트 시트를 사용하도록 애니메이션 스프라이트가 구성되었는지 확인하세요. 거기에서 스프라이트 시트에 새 프레임을 추가하려면 클릭해야 하는 새 스프라이트 프레임 버튼을 찾을 수 있습니다.

요청을 계속 진행하세요.

또한 직관적인 인터페이스를 사용하여 플랫포머 게임의 슈팅, 도약, 스케일링 등 추가 애니메이션을 자유롭게 생성할 수 있습니다. ‘스프라이트 시트에서 프레임 추가’ 버튼을 클릭하기만 하면 스프라이트 시트에서 개별 프레임을 손쉽게 추출할 수 있습니다.

GDScript를 사용하여 애니메이션 제어

애니메이션을 설정했으면 이제 GDScript 프로그래밍을 활용하여 애니메이션을 조작할 수 있습니다.

이 글도 확인해 보세요:  자바스크립트에서 Intl API를 사용하는 방법

애니메이션 재생 및 중지

애니메이션을 동적으로 재생하는 것은 몰입감 있는 게임 경험을 제공하는 데 매우 중요합니다.이를 위해 게임 로직에 따라 애니메이션 재생을 제어할 수 있는 다양한 메서드를 제공하는 고닷 내 AnimatedSprite 노드를 활용할 수 있습니다.

키네마틱바디2D 노드를 확장하여 `_physics_process` 함수 내에서 애니메이션을 제어할 수 있는 기능을 통합하세요. 플레이_애니메이션` 및 `스톱_애니메이션` 입력을 활용하여 원하는 애니메이션 동작을 시작하세요.

  extends KinematicBody2Dfunc _physics_process(delta): # Play the animation if Input.is_action_just_pressed("play_animation"): $AnimatedSprite.play() # Stop the animation and reset to the first frame if Input.is_action_just_pressed("stop_animation"): $AnimatedSprite.stop() $AnimatedSprite.frame = 0 

적절한 입력 연산을 활용하여 게임 내에서 애니메이션 재생에 대한 플레이어의 제어 권한을 부여할 수 있습니다.

Animate.js를 사용하면 웹사이트 디자인 내에서 애니메이션을 원활하게 통합할 수 있습니다. 예를 들어, 플레이\_animation 함수를 게임 내 버튼 클릭 또는 미리 정해진 이벤트에 바인딩하여 사용자가 원하는 시점에 애니메이션 시퀀스를 시작할 수 있습니다. 또한, 저작권이 없는 음악과 같은 리소스를 찾아서 애니메이션이 지속되는 동안 애니메이션과 함께 사용할 수 있습니다.

중지\_애니메이션 활동을 활용하여 애니메이션을 전체적으로 중지할 수도 있습니다.

이러한 애니메이션 제어 기법을 활용하면 애니메이션에 깊이감과 상호작용성을 불어넣어 플레이어의 게임 경험에 대한 전반적인 참여와 몰입도를 높일 수 있습니다.

애니메이션 회전하기

스프라이트를 회전하여 애니메이션을 만들면 게임에 역동성과 다양성이 더해져 플레이어의 시선을 사로잡을 수 있습니다. 회전은 스프라이트의 방향을 프로그래밍 방식으로 조작하는 animate\_sprite() 함수를 사용하여 구현할 수 있습니다. 이 동작을 실행하려면 회전() 메서드를 사용하여 원하는 회전 정도를 지정할 수 있습니다.

  extends KinematicBody2Dfunc _physics_process(delta): if Input.is_action_just_pressed("rotate_animation"): # Rotate the animation by 45 degrees clockwise $AnimatedSprite.rotate(deg2rad(45)) 

회전 애니메이션 매개변수 내에서 지정된 버튼이 활성화되면 AnimatedSprite 객체에 대해 rotate() 함수가 호출됩니다. 그런 다음 deg2rad() 변환을 사용하여 도를 라디안으로 변환하는 방식으로 노드가 시계 방향으로 45도 회전합니다.

이 스크립트는 애니메이션의 모든 프레임을 포함하는 전체 AnimatedSprite 객체에서 회전을 일으킨다는 점에 유의하세요. 따라서 특정 프레임을 회전하려면 해당 프레임을 독립된 AnimatedSprite 객체로 나누거나 단일 프레임을 반전시키는 등의 대체 방법을 사용해야 할 수 있습니다.

이 글도 확인해 보세요:  게임 비용 상승이 업계에 미치는 5가지 영향

애니메이션 뒤집기

애니메이션 이미지를 가로 또는 세로로 회전하여 조작하는 것은 캐릭터의 방향 변화를 설명하는 수단으로 사용될 수 있습니다.고닷의 AnimatedSprite 노드는 이러한 반전 효과를 조정할 수 있는 파라미터를 제공합니다.

애니메이션 스프라이트를 가로로 뒤집어 방향을 반전시키려면 “flip\_h” 프로퍼티 값을 true로 설정합니다. 이렇게 하면 스프라이트가 가로 축을 가로질러 반사됩니다. 또한 스프라이트를 세로로 뒤집으려면 “flip\_v” 속성을 true로 설정하면 세로 축에 걸쳐 스프라이트가 반영됩니다.

  extends KinematicBody2Dfunc _physics_process(delta): if Input.is_action_just_pressed("flip_animation"): $AnimatedSprite.flip_h = true # or $AnimatedSprite.flip_v = true for vertical flipping 

입력 액션 “flip\_animation”이 트리거되면 “AnimatedSprite” 객체의 “flip\_h” 프로퍼티를 true로 설정해야 합니다. 이렇게 하면 애니메이션이 거꾸로 표시됩니다.

AnimatedSprite에서 신호 활용하기

고닷은 애니메이션에 대한 프로그래밍 제어뿐만 아니라 게임 작동 중에 발생하는 특정 발생 또는 수정에 반응할 수 있는 신호라는 고급 이벤트 시스템도 제공합니다.

AnimatedSprite의 컨텍스트에서 활용할 수 있는 두 가지 중요한 신호는 animation\_finished() 및 frame\_changed()입니다.

animation_finished() 신호

애니메이션이 단독 재생 중이든 반복 재생 중이든 최종 프레임에 도달하면 animation\_finished() 신호가 전송됩니다. 이 신호는 애니메이션이 완료된 후 작업을 수행하거나 발생을 시작하는 수단으로 사용됩니다.

  extends KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("animation_finished", self, "_on_animation_finished")func _on_animation_finished(): # Perform actions or trigger events print("Animation finished!") # Additional code here... 

앞서 언급한 절차에는 “AnimatedSprite” 객체의 “animation\_finished()” 신호와 “\_

애니메이션이 완료되면 `_on_animation_finished()` 메서드를 활용하여 사용자 정의 로직을 실행하거나 추가 작업을 트리거하는 기능이 시작될 수 있습니다.

frame_changed() 신호

프레임\_changed() 신호는 재생 중이거나 프레임의 프로그래밍 수정으로 인해 현재 프레임이 변경될 때마다 전송됩니다. 이 신호는 컴퓨터 그래픽의 이론적 프레임워크에서 이차적인 변화를 식별하고 대응할 수 있는 기회를 제공합니다.

  extends KinematicBody2Dfunc _ready(): $AnimatedSprite.connect("frame_changed", self, "_on_frame_changed")func _on_frame_changed(): # Perform actions based on the current frame var currentFrame = $AnimatedSprite.frame print("Current frame: ", currentFrame) # Additional code here... 

AnimatedSprite 컴포넌트는 ‘프레임\_변경’ 신호가 동일한 스크립트의 해당 메서드에 ‘_온\_프레임\_변경’으로 표시된 메서드에 연결되어 있어야 합니다. 이 메서드를 사용하면 프레임이 변경되었을 때 현재 프레임에 액세스하고 조작할 수 있으므로 프레임 값에 따라 다양한 연산이나 로직을 구현할 수 있습니다.

이 글도 확인해 보세요:  Vite 시작하기: 최고의 빌드 툴

신호를 사용하여 개별 프레임의 종료 또는 변경을 포함한 다양한 애니메이션 이벤트에 반응하고, 게임 내에서 동적 동작을 구현하거나 특정 동작을 시작할 수 있습니다.

애니메이션을 사용하여 고닷 게임을 더욱 매력적으로 만들기

고닷 게임에 2차원 애니메이션을 통합하면 캐릭터의 움직임과 액션에 시각적 매력을 더해 전반적인 사용자 경험을 크게 향상시킬 수 있습니다. 걷기, 달리기, 격투, 도약과 같은 다양한 활동에 대한 애니메이션 시퀀스를 포함하면 인터랙티브하고 매력적인 게임 분위기를 조성할 수 있습니다.

또한 애니메이션을 활용하여 플레이어에게 시각적 단서를 제공함으로써 상호 작용과 참여의 느낌을 높여 전반적인 경험을 향상시킬 수 있습니다.

By 김민수

안드로이드, 서버 개발을 시작으로 여러 분야를 넘나들고 있는 풀스택(Full-stack) 개발자입니다. 오픈소스 기술과 혁신에 큰 관심을 가지고 있고, 보다 많은 사람이 기술을 통해 꿈꾸던 일을 실현하도록 돕기를 희망하고 있습니다.