캐릭터 이미지 한 장으로 조작 가능한 2D 캐릭터 만들기

방향키를 눌러 달리고, 놓아서 멈추고, 펀치를 한 번 한 뒤 다시 움직여 보세요. 애니메이션을 입력에 연결하면 동작이 바뀔 때의 크기 차이, 발 위치, 공격을 마무리하는 시간이 더 잘 보입니다.

지난 예제에서는 주황색 로봇 영상 하나에서 펀치와 앞차기를 나눴습니다. 이번에는 같은 이미지로 가드를 유지하는 대기와 제자리 달리기를 추가해 투명 애니메이션 네 개를 작은 장면에 연결했습니다. 모두 24 FPS로 재생합니다.

브라우저 데모에서 방향키 또는 A/D로 이동하고, J로 펀치, K로 앞차기를 해 보세요. 휴대전화에서는 방향 버튼을 길게 누릅니다. 처음에는 정지 상태이며 시작 또는 조작 버튼을 누르면 움직입니다.

네 동작에 같은 캐릭터 이미지 사용하기

원본 로봇 PNG를 재사용해 갑옷 색상, 신체 비율, 오른쪽을 향한 시점을 유지했습니다. 동작마다 캐릭터를 새로 그리는 변수를 줄이기 위해 모든 요청을 이 이미지에서 시작합니다.

구도도 이전 공격과 같습니다. 4:3 캔버스, Expand Canvas 80%, 위치 X 0.35와 Y 0.5로 오른쪽에 주먹과 발이 뻗을 여백을 남겼습니다. 큰 움직임에 필요한 여백은 Expand Canvas 사례에서 볼 수 있습니다.

왼쪽을 볼 때는 같은 이미지를 좌우 반전합니다. 글자나 한쪽에만 있는 무기가 없는 이 로봇에 편리한 방법입니다. 방패나 옷의 글자가 있는 캐릭터라면 반전된 모습도 확인해야 합니다.

조용한 대기와 제자리 달리기를 따로 생성하기

대기 프롬프트는 두 발을 고정하고 가드를 유지하면서 가슴과 어깨만 조금 움직이도록 요청합니다. 방향키를 놓을 때마다 발을 구르거나 큰 몸짓을 시작하지 않도록 한 설정입니다.

달리기는 오른쪽을 향해 제자리에서 계속 달리고, 카메라와 캐릭터 크기를 고정하도록 요청했습니다. 팔과 다리의 움직임, 몸의 오르내림은 프레임에 남기고 장면 안의 수평 이동은 코드로 제어합니다.

두 요청 모두 Seedance 2.0 Fast, 4초, 480p, 4:3, Alpha Key를 사용했습니다. 실제 생성 비용은 각각 36크레딧, 합계 72크레딧입니다. 투명 PNG 시퀀스와 ProRes 4444 내보내기는 0크레딧이었습니다. 펀치와 앞차기는 이전 720p 자료를 재사용해 추가 생성 비용이 없습니다. 2026년 10월 3일의 기록이므로 직접 생성할 때는 요청 전 견적을 확인하세요.

실제 대기 프롬프트, 달리기 프롬프트와 키 컬러 배경이 있는 대기 원본, 달리기 원본을 내려받을 수 있습니다. 반환 영상은 모두 752 × 560, 97프레임, 24 FPS로 약 4.04초입니다. 요청한 해상도 등급, 반환 영상 크기, 실행용 캔버스는 서로 다른 단계의 값입니다.

대기와 달리기는 반복하고 공격은 끝까지 재생하기

4초 영상에서 호흡이나 달리기의 한 주기를 고르고 여러 번 재생한 뒤 마지막과 첫 프레임의 연결을 확인했습니다. 아래 구간은 모두 연속 프레임입니다. 원본 번호는 0부터 시작하며 양 끝을 포함합니다.

달리기는 한 주기를 남기고 원본 59번에서 44번으로 돌아갑니다. 24 FPS를 유지했고 연결용 프레임을 추가 생성하지 않았습니다. 선택 과정은 걷기 루프 글, 공격의 준비와 회수 동작은 지난 두 동작 사례를 참고하세요.

전환 전에 캔버스와 기준점 맞추기

모든 실행 프레임을 512 × 384 투명 캔버스에 놓고 종횡비를 유지했습니다. 새 대기와 달리기는 752 × 560 전체 프레임을 512 × 381로 비례 축소한 다음 캔버스에 배치해 늘어짐을 방지합니다.

자세와 발 위치를 비교한 뒤 대기 전체에 X −2, Y +3픽셀, 달리기 전체에 X −24, Y +3픽셀을 고정 이동했습니다. 공격 위치는 이전 그대로입니다. 네 동작 모두 왼쪽 위에서 잰 (224, 321)을 기준점으로 사용하며 장면에서는 0.85배로 표시합니다.

이 값은 이번 로봇에 맞춘 것입니다. 다른 캐릭터는 머리, 발, 몸통 위치를 비교해 조정하세요. 클립 전체를 일정하게 이동하면 몸의 자연스러운 오르내림이 남습니다. 프레임마다 윤곽에 맞춰 바짝 자르면 재생 중 위치가 튈 수 있습니다. 캔버스와 피벗 가이드에서 차이를 설명합니다.

공격이 끝나면 현재 방향 입력 읽기

상태는 idle, run, punch, kick 네 가지입니다. 공격 중이 아닐 때 방향을 누르면 달리고 놓으면 대기합니다. 양쪽 방향을 동시에 누르면 이동이 상쇄됩니다.

J나 K를 누르면 공격을 한 번 마칠 때까지 수평 이동과 방향을 고정합니다. 그동안 들어오는 새 공격은 무시합니다. 끝날 때 방향키가 눌려 있으면 달리기로, 놓였으면 대기로 돌아갑니다. 공격키를 계속 눌러도 반복하지 않으며 다음 공격은 놓았다가 다시 눌러야 합니다.

Godot 예제는 AnimatedSprite2D.animation_finished로 공격 완료를 처리합니다. 대기와 달리기는 반복하고 펀치와 앞차기는 반복을 끕니다. 반복 애니메이션에서는 이 완료 신호가 발생하지 않습니다. Godot 공식 문서

func _attack_finished() -> void:
    if _attacking():
        completed[state] += 1
        _locomotion()

_locomotion()은 현재 방향을 읽어 run 또는 idle을 선택합니다. 다운로드에 전체 구현이 있으므로 이 함수 조각만으로 컨트롤러를 구성할 필요는 없습니다. 장면은 이동과 애니메이션 전환을 다루며 적, 명중 판정, 피해 계산은 포함하지 않습니다.

Godot에서 조작하고 이동 속도 따로 맞추기

Godot 예제 프로젝트를 풀고 Godot 4에서 project.godot을 가져온 뒤 F5를 누르세요. 네 투명 시트와 character.json의 프레임 영역으로 SpriteFrames를 만들며 플러그인은 필요 없습니다. 첫 영상은 macOS의 Godot 4.7.2, Compatibility 렌더러에서 녹화했습니다.

기본 이동 속도는 280 px/s이고 애니메이션은 24 FPS입니다. 조절 가능한 시연 값이므로 캐릭터나 표시 배율을 바꾼 뒤에는 발이 땅에 닿아 있을 때 얼마나 미끄러지는지 확인하세요. 브라우저 슬라이더의 범위는 60–600 px/s이며, Godot에서는 assets/character.json의 defaultSpeed로 변경합니다. 재생률을 고정한 채 이동 속도를 조절하면 걸음과의 차이를 판단하기 쉽습니다.

달리면서 펀치하기, 공격 중 반대 방향 누르기, 공격이 끝나기 전에 모든 키 놓기를 시험해 보세요. 공격을 마친 뒤 현재 입력에 따라 움직여야 합니다. 페이지를 숨기거나 창이 포커스를 잃으면 누른 입력을 지우고 일시 정지하므로 돌아온 뒤 이전 방향으로 계속 달리지 않습니다.

자료를 내려받아 자신의 캐릭터로 바꾸기

투명 스프라이트 팩에는 PNG 네 장, 프레임 영역, 재생률, 선택·정렬 레시피가 있습니다. 시트 끝의 빈칸을 재생하지 않도록 JSON의 프레임 수를 사용하세요. 브라우저와 Godot은 투명 이미지, 본문 MP4는 감상용 배경이 있는 영상입니다.

여러 동작을 다루는 컨트롤러와 패키지는 실제 내보내기 자료로 만든 튜토리얼 예제입니다. Godot 가져오기 가이드로 자신의 자료를 확인하고 네 시트와 프레임 정보를 교체하세요. 크기, 해시, 비용, 내보내기 검사는 미디어 기록에 있습니다.

멈추기, 돌아서기, 공격 한 번의 흐름을 먼저 시험한 뒤 다음 동작을 정하세요. 추가할 때는 AnimGen에서 같은 캐릭터 이미지, 카메라 시점, 캔버스 여백을 유지하면 됩니다.