PNG를 투명 달리기·점프 애니메이션으로 만드는 방법

캐릭터 일러스트를 달리고 점프하고 착지하게 만들면서 게임 배경 위에서도 사용하고 싶으신가요?

AnimGen에서는 실제 투명도가 있는 PNG에서 시작해 투명 애니메이션 모드로 동작을 생성하고 필요한 프레임을 선택한 뒤 알파 지원 형식으로 내보냅니다. 동작 미리보기와 최종 투명 에셋은 별도 단계입니다.

YouTube 달리기·점프 데모 보기. 출시 영상은 청록 캐릭터의 흐름을 보여 줍니다. 이 글은 전체 달리기를 느리게 하지 않고 점프 자세에 시간을 더하는 방법 등 선택의 이유를 설명합니다.

사용 가능한 투명 이미지로 시작

머리, 손, 발이 이미지 안에 여유 있게 들어와야 합니다. 점프용 머리 위 공간과 달리기용 팔다리 주변 공간을 남기세요. 너무 빽빽하게 자르면 동작 공간이 줄어듭니다.

캐릭터가 이미 대부분을 차지해도 외부 편집기에서 여백을 만들 필요는 없습니다. 업로드 후 생성 전에 캔버스 확장을 켜세요. 파일을 따로 수정·저장·재업로드하지 않고 공간을 더할 수 있습니다.

피사체 크기 80%부터 시작하세요. 더 필요하면 67%, 50%를 사용하세요. 낮을수록 원본 주변 공간이 넓어집니다. 9방향 격자로 점프 방향에 더 많은 공간을 배치하세요. 투명 모드는 추가 영역을 투명하게 유지하고 원본 업로드를 덮어쓰지 않습니다.

왼쪽 만들기 패널의 첫 프레임 이미지 아래에 있습니다. 중국어 로컬 데모 화면이며 위 스위치, 피사체 크기, 9방향 격자 순서로 조작합니다.

여백이 많으면 생성 프레임에서 캐릭터가 작아지므로 동작에 필요한 만큼 사용하세요. 이미 잘린 손·발을 복원하지는 않으며 생성 결과의 잘림도 확인해야 합니다. 입력 캔버스 가이드에 컨트롤 설명이 있습니다.

프리셋·배치 비교와 파란 홈페이지 캐릭터의 실제 동작은 달리기·점프·공격의 캔버스 확장을 참고하세요.

직접 따라 하려면 자신의 분리된 캐릭터 또는 공개 투명 달리기 PNG를 사용하세요. 예제 라이브러리의 연습 에셋이며 출시 영상과 같은 생성 결과를 보장하지 않습니다.

투명도 지원 편집기에서 밝고 어두운 배경 위에 놓으세요. 빈 영역은 아래 배경을 드러내야 합니다. 체크무늬가 그림에 그대로 남으면 이미지에 그려진 것입니다.

.png 이름만으로 투명도가 입증되지는 않습니다. 투명 워크플로에는 유의미한 원본 알파가 필요합니다. 일반 배경이 있으면 먼저 분리하거나 장면을 유지하는 일반 워크플로를 선택하세요. 투명 애니메이션 가이드가 입력 요건을 설명합니다.

동작을 설명하고 카메라 고정

스튜디오에 로그인해 업로드하고 투명 애니메이션을 선택하세요. 현재 제공되는 모델, 길이, 해상도를 고르고 생성 전 크레딧을 검토하세요.

데모의 짧은 동작 설명은 다음과 같습니다.

Run, jump, land, then keep running. Side view, fixed camera.

행동 순서와 시점을 명확히 합니다. 자신의 캐릭터에는 “전체 캐릭터를 보이게 유지하고 원래 디자인을 보존” 같은 조건을 추가할 수 있습니다. 모델 지시로 취급하고 결과는 직접 확인하세요.

복합 동작은 움직임 탐색에 유용합니다. 플레이 가능한 캐릭터에는 게임이 필요할 때 각각 발동할 수 있도록 달리기·점프 클립을 분리하는 편이 실용적입니다. 다음을 시작점으로 수정하세요.

달리기:

The character runs in place, facing right in side view.
Fixed camera. Keep the whole body visible and preserve the character design.

점프:

The character crouches, jumps upward, then lands with bent knees.
Side view, fixed camera. Keep the whole body visible throughout the jump.

권장 프롬프트이지 특정 결과를 보장하는 기록된 설정은 아닙니다. 게임이 캐릭터를 레벨 안에서 이동시키면 제자리 달리기가 출발점으로 좋습니다. 점프는 게임 이동·상태 전환에 맞춰야 합니다.

출시 영상은 대기·편집 과정을 압축했습니다. 실제 생성 시간은 모델, 대기열, 설정에 따라 달라집니다.

내보내기 전에 동작 검토

투명 워크플로의 초기 동영상에 초록·자홍 배경이 있을 수 있습니다. 임시 키 색상 중간 결과이며 적절한 내보내기에서 알파가 만들어집니다.

이 단계에서는 움직임에 집중하세요.

• 달리기: 보폭이 읽히고 몸 형태·방향이 일관적인가요?
• 점프: 준비, 도약, 공중 자세, 착지가 보이나요?
• 구도: 발, 손, 머리가 캔버스 밖으로 나가나요?
• 연속성: 형태가 갑자기 바뀌거나 원치 않는 디테일이 생기나요?

전체 영상을 그대로 쓰지 말고 깨끗한 구간을 고르세요. 원하는 동작이 없거나 중요한 자세가 심하게 왜곡됐다면 입력·프롬프트를 수정해야 할 수 있습니다. 프레임 선택은 불필요한 내용을 제거하지만 손상된 자세를 다시 그리지는 않습니다.

달리기 루프는 반복해서 마지막→첫 프레임의 발, 실루엣, 체감 속도를 확인하세요. 루프 스위치는 반복할 뿐 양 끝 자세를 자동 연결하지 않습니다.

프레임 편집으로 점프에 짧은 유지 시간 추가

데모의 한 편집은 공중 자세를 조금 더 오래 보여 주는 것입니다.

준비된 동영상의 애니메이션 다듬기를 열고 원본 프레임에서 필요한 항목을 애니메이션 시퀀스에 삽입·드래그하세요. 출력 재생으로 순서·타이밍을 확인하세요.

편집기는 원본과 구성 중인 시퀀스를 구분합니다. 화면은 작업 공간을 보여 주며 아래 작은 예제가 데모의 타이밍 편집을 설명합니다.

데모는 변화를 쉽게 보이도록 다음 원본 프레임 라벨을 사용합니다.

Before: F042 F046 F050 F054      F058 F064 F070
After:  F042 F046 F050 F054 F054 F058 F064 F070

출력의 F054를 선택해 복제하면 옆에 같은 자세가 들어갑니다. 예시의 8FPS에서 7프레임·0.875초가 8프레임·1초가 되어 0.125초 유지가 추가됩니다.

이 라벨은 데모 에셋용이므로 자신의 클립에서 대응 자세를 찾으세요. 작은 예제로 조작을 익힌 뒤 실제 동작에 충분한 중간 프레임·FPS를 선택하세요. 자세 반복은 표시 시간을 바꿉니다. FPS 증가는 속도를 바꾸지만 새 중간 자세를 만들지 않습니다. 긴 정지는 동작을 멈춘 듯 보이게 하므로 유지 시간을 짧게 하고 착지를 확인하세요.

이 예제는 기존 프레임과 전체 캔버스 배치를 다루며 모든 프레임을 자동 정렬하지 않습니다. 최신 편집·이미지 수정 기능과 전체 절차는 고급 편집기 가이드를 참고하세요. 내보내기 전 저장됨을 기다리세요.

사용할 환경에 맞춰 내보내기

목적에 따라 출력 형식을 고르세요.

일반 MP4는 이 워크플로의 알파 결과물이 아닙니다. 가벼운 참고용으로 사이트·영상에 쓰인 512 × 512·4초 공개 투명 동작 WebM을 받을 수 있습니다. 위 8프레임 타이밍과 별도의 재생 확인용 예제입니다.

엔진에서는 Godot 4, Unity, Unreal Paper2D, Cocos Creator를 따르세요. 패키지는 에셋·가져오기 정보를 제공하지만 이동, 충돌, 상태 전환은 게임 프로젝트에서 구현합니다.

실제로 필요한 출력과 권한·견적을 검토하세요. 프로덕션 형식을 정하기 전 PNG 검사가 유용합니다. 고급 형식·상업 이용 조건은 현재 요금제 및 내보내기 권한을 확인하세요.

대상 배경에서 확인

밝은 배경, 어두운 배경, 실제 사용할 장면에서 전체 움직임을 확인하세요. 빠른 손·발, 가는 디테일, 착지에 주의하세요.

PNG는 정상인데 동영상이 검으면 재생성 비용 전에 플레이어의 알파 지원을 조사하세요. 모든 출력에 같은 배경이 있으면 원본, 투명 워크플로, 출력 캔버스를 다시 보세요. 형식 호환성, 내보내기 문제 해결을 참고하세요.

분리된 캐릭터 하나, 명확한 동작, 대상 형식이 있으면 시작할 수 있습니다. AnimGen에서 캐릭터 움직이기 또는 투명 워크플로·다운로드 예제 살펴보기로 이어가세요.