캐릭터 스프라이트 메이커 · 하나의 프롬프트, 하나의 완전한 시트

캐릭터 스프라이트 메이커: 한 번의 프롬프트로 완전한 스프라이트 시트

나만의 캐릭터 스프라이트 메이커 만들기

하나의 설명으로 캐릭터 스프라이트를 만드세요 — 대기, 걷기, 공격, 8방향 — 투명 프레임, 깔끔한 그리드, 엔진 사용 가능. 그런 다음 캐릭터를 걸어 다닐 수 있는 3D 월드에 넣으세요.

✦스프라이트
캐릭터 스프라이트 만들기: 창을 든 기사 소녀

캐릭터 스프라이트 메이커는 작성된 설명을 받아 완전한 스프라이트 시트를 반환합니다: 대기, 걷기, 달리기, 공격, 시전, 8방향, 투명 프레임, 고정 그리드, 원점은 발 위치. 체형, 실루엣, 팔레트, 든 무기, 의상 레이어 등 캐릭터를 입력하면, 도구는 손으로 다시 그려야 하는 단 하나의 주인공 프레임이 아니라 그 설명의 모든 포즈를 렌더링합니다.

스프라이트와 스프라이트 시트의 차이는 이미지와 애니메이션 시스템의 차이입니다. 잘 만든 대기 프레임 하나는 그림입니다. 시트는 상태 머신입니다: 엔진이 반복할 수 있는 프레임 수, 인덱싱할 수 있는 방향, 그리고 걷기 사이클이 루프 중간에 형태가 바뀌지 않도록 모든 셀에서 일관된 캐릭터를 제공합니다. Neta Studio는 프롬프트로 전체 시트를 만든 다음, 그 캐릭터를 걸어 다닐 수 있는 3D 월드에 넣을 수 있게 합니다.

하나의 프롬프트로 완전한 캐릭터 시트까지

평범한 언어로 캐릭터를 설명합니다: 종족 또는 신체 구조, 그리드 기준 키, 체격, 머리카락 또는 투구, 의상 레이어, 들고 있는 것, 팔레트 범위, 아트 방향(픽셀, 페인티드, 플랫 벡터). 메이커는 이를 캐릭터 스펙으로 파싱하고 동일한 스펙에서 전체 매트릭스 — 모든 애니메이션, 모든 방향 — 를 렌더링합니다. 출력은 포즈 선택기가 아니라 시트입니다.

프레임 하나만으로는 캐릭터가 게임에서 제대로 작동하는지 거의 알 수 없습니다. 움직이는 순간 세 가지가 유지되어야 합니다: 실루엣은 실제로 그리는 크기에서 읽을 수 있어야 하고, 팔레트는 프레임 간에 바뀌지 않아야 하며, 피벗은 흔들리지 않아야 합니다. 시트는 이러한 제약을 즉시 드러냅니다. 대기 옆의 걷기를 보고, 프레임 1과 프레임 3을 비교하며, 드리프트가 엔진에 도달하기 전에 잡을 수 있습니다.

하나의 설명에서 작업하면 캐릭터를 재현 가능하게 유지할 수도 있습니다. 프롬프트를 바꾸면 — 망토를 판금으로 바꾸고, 팔레트를 두 단계 더 차갑게 이동 — 변경 사항이 모든 곳에 적용된 전체 시트를 다시 생성합니다. 새로운 색상 결정에 맞춰 마흔 개 프레임을 손으로 편집할 필요가 없습니다.

1

01

캐릭터 설명을 작성합니다: 체형, 그리드 단위 키, 체격, 의상 및 들고 있는 아이템, 팔레트, 아트 방향.

2

02

프레임 그리드를 설정합니다: 정사각형 셀, 2의 거듭제곱에 적합, 문서에 애니메이션 행 순서를 명시.

3

03

시트를 생성하고 각 애니메이션의 첫 프레임과 마지막 프레임을 확인합니다 — 서로 인접해야 하며, 동일해서는 안 됩니다.

4

04

확대하지 말고 최종 표시 크기에서 실루엣을 확인합니다.

5

05

문서화된 그리드와 발 위치의 원점을 사용해 투명 PNG 프레임을 내보냅니다.

대기, 걷기, 달리기, 공격, 시전

다섯 가지 애니메이션이 대부분의 2D 캐릭터를 커버합니다: 대기, 걷기, 달리기, 공격, 시전. 대기는 캐릭터가 생애 대부분을 보내는 호흡 루프입니다. 걷기는 이동 루프이며, 보통 발 접지가 가장 잘 보이는 동작입니다. 달리기는 같은 동작을 더 빠르고 상체를 더 기울여 표현합니다. 공격은 예비 동작, 접촉 프레임, 회복이 있는 단발 동작입니다. 시전은 유지가 있는 단발 동작 — 발사체나 AOE가 처리되는 동안 캐릭터가 취하는 포즈입니다.

프레임 수는 사람들이 생각하는 것보다 중요합니다. 게임플레이 크기 — 320×180 또는 640×360 뷰에서 대략 32~64픽셀 높이의 캐릭터 — 에서 걷기 4프레임은 걷기로 읽히고, 6프레임은 더 부드럽게 읽히며, 8프레임은 얻는 것보다 비용이 커지기 시작합니다. 달리기 사이클은 종종 4프레임으로 충분합니다. 대기는 2~4프레임이며, 2프레임은 고전적인 호흡이고, 4프레임은 흔들림이나 무기 흔들림 같은 보조 동작을 줍니다. 공격은 일반적으로 3~5프레임입니다: 예비 동작, 접촉, 팔로스루, 회복. 시전은 유지 프레임을 포함해 4~6프레임입니다.

여기서 실패 모드는 프레임 수가 아니라 타이밍입니다. 프레임 간 지연 없이 내보낸 4프레임 걷기는 엔진 프레임레이트로 재생되어 걸음이 아니라 떨림처럼 보입니다. 시트에는 애니메이션별 권장 fps가 함께 제공되므로 엔진 임포터가 재정의할 수 있는 합리적인 기본값을 갖습니다.

애니메이션프레임루프비고
대기2–4예호흡 또는 흔들림; 첫 프레임과 마지막 프레임이 인접
걷기4–8예짝수 프레임의 발 접지가 가장 깔끔하게 읽힘
달리기4예걷기보다 더 기울고 보폭이 김
공격3–5아니요예비 동작, 접촉, 팔로스루
시전4–6아니요이펙트 발동을 위한 유지 프레임 포함

하나의 설명으로 8방향

8방향은 시트가 N, NE, E, SE, S, SW, W, NW를 포함한다는 뜻입니다 — 45도 단위로 전체 원을 커버합니다. 탑다운 및 아이소메트릭 게임에서는 플레이어가 고정 카메라로 캐릭터를 보고 어느 방향으로든 움직일 수 있으므로 이것이 필요합니다. 4방향(N, E, S, W)은 대각선을 시각적 거짓으로 남깁니다: 캐릭터가 북동쪽으로 걷는데 스프라이트는 동쪽을 향합니다. 8방향은 향하는 방향이 이동 벡터와 일치하게 합니다.

시트는 매트릭스로 배치됩니다: 방향마다 한 행, 애니메이션 내 프레임마다 한 열, 또는 같은 순서로 모든 애니메이션을 포함하는 방향별 블록입니다. 순서가 문서화되어 있으면 어느 쪽이든 작동합니다. Unity의 Sprite Editor는 그리드로 분할합니다; Godot의 AnimatedSprite2D는 개별 region rect 또는 분할된 텍스처를 원합니다; GameMaker의 sprite editor는 그리드와 프레임별 원점을 받습니다. 엔진에서 인덱싱하는 순서는 시트가 렌더링된 순서와 일치해야 합니다. 그렇지 않으면 문워크하는 캐릭터가 나옵니다.

미묘한 부분은 전환 프레임입니다. 여덟 개의 표준 방향만 렌더링하면 이동 벡터가 22.5도 경계를 넘을 때 스프라이트가 방향 사이에서 툭 튀어 보입니다. 두 가지 완화책이 있습니다: 여덟 방향을 렌더링하고 짧은 회전 애니메이션이 경계를 덮게 하거나, 튀는 것을 감수하고 캐릭터 회전을 여덟 방향 중 가장 가까운 쪽으로 스냅하게 유지하는 것입니다. 둘 다 정당하며, 시트는 회전 프레임이 존재한다고 가정하지 않으므로 어느 쪽이든 지원합니다.

전체 세트에서 일관된 캐릭터

스프라이트 작업의 진짜 실패는 드리프트입니다. 첫 번째 캐릭터는 특정 머리-몸 비율, 특정 팔레트, 특정 선 두께로 생성됩니다. 두 번째 캐릭터는 나중에 다르게 표현된 프롬프트로 생성되어 반 머리 더 크고, 더 차가운 피부 톤과 더 두꺼운 외곽선으로 돌아옵니다. 파티 화면에서 나란히 두면 같은 게임에 속한 것처럼 보이지 않습니다.

드리프트는 불충분하게 명시된 프롬프트에서 발생합니다. 첫 프롬프트가 '키가 작고 다부진, 차분한 흙색 팔레트, 32픽셀 셀, 1픽셀 외곽선'이고 두 번째가 '갑옷을 입은 기사'였다면, 세트를 설명한 것이 아니라 서로 무관한 두 가지를 설명한 것입니다. 캐스트 전체에서 스타일 절을 동일하게 유지하고 정체성 절만 바꾸세요: 종족, 체격, 장비, 명시된 팔레트 내의 색상.

Agent Sprite Forge는 그 스타일 절을 일정하게 유지하도록 만들어졌습니다. 공유 스타일 스펙에서 캐스트를 생성하므로 머리 비율, 외곽선 두께, 팔레트 범위는 일정하게 유지되고 개별 캐릭터만 달라집니다. 테스트는 간단합니다: 전체 캐스트의 대기 프레임을 최종 표시 크기로 나란히 놓습니다. 하나라도 다른 게임처럼 읽히면 스타일 스펙이 드리프트한 것입니다.

캐스트 전체에서 하나의 스타일 유지

정체성 프롬프트를 작성하기 전에 스타일 차원을 고정하세요: 셀 크기, 머리-몸 비율, 픽셀 단위 외곽선 두께, 팔레트 범위와 음영 방향, 아트 방향. 이것들을 상수로 취급합니다. 모든 캐릭터 프롬프트는 이를 상속하고 정체성만 추가합니다. 캐릭터가 스타일에서 벗어나 돌아오면, 수정은 거의 항상 정체성 절이 아니라 스타일 절에 있습니다.

엔진에 바로 사용할 수 있는 내보내기

모든 프레임은 투명 PNG로 내보내집니다. 시트에는 문서화된 그리드 — 셀 너비와 높이, 방향당 행, 프레임당 열, 애니메이션 순서 — 가 함께 제공되므로 임포터가 각 셀의 위치를 알 수 있습니다. 원점은 발 위치에 있고 캐릭터의 질량 중심에 수평으로 정렬되므로, 스프라이트를 지면 위치에 놓으면 이미지 중앙이 아니라 발이 지면에 닿습니다.

그 원점 선택은 모든 엔진에서 중요합니다. Unity의 Sprite Editor에서는 사용자 지정 피벗을 설정할 수 있습니다; 문서화된 원점과 일치하도록 하단 중앙으로 설정하세요. Godot의 AnimatedSprite2D는 분할된 텍스처에서 프레임별 region rect를 사용합니다; 슬라이스를 문서화된 그리드에 맞춰 정렬하지 않으면 루프가 한 프레임씩 어긋납니다. GameMaker의 sprite properties는 그리드와 스프라이트별 원점을 받습니다; 동일한 하단 중앙 값을 적용합니다.

내보내기 프리셋은 재정의할 수 있습니다. 게임이 다른 셀 크기로 실행된다면 시트는 정수 배수에서 깔끔하게 확대/축소됩니다; 정수가 아닌 배율이 흐림을 유발합니다. 픽셀 아트에는 포인트 필터링, 페인티드에는 바이리니어를 사용합니다. 투명 알파가 유지되므로 임포트 전에 매트 정리가 필요하지 않습니다.

엔진임포트 경로설정할 항목
UnitySprite Editor하단 중앙에 사용자 지정 피벗; 그리드로 분할
GodotAnimatedSprite2D + SpriteFrames문서화된 그리드로 텍스처 분할; 프레임별 region rect
GameMakersprite properties문서의 그리드 크기; 원점 하단 중앙

캐릭터의 다음 생: 3D 월드

스프라이트 시트는 캐릭터입니다. 월드는 캐릭터가 사는 곳입니다. 시트를 만든 동일한 설명이 3D 게임 빌더에 입력되어 걸어 다닐 수 있는 Three.js 월드로 바뀝니다: 지면, 충돌, 카메라, 그리고 캐릭터가 설 자리. 도구 사이에서 파일을 포팅하는 것이 아니라 설명 자체가 에셋입니다.

브라우저에서 그 월드를 걸어 다닐 수 있습니다. 캐릭터를 넣고 카메라를 조작하며, 월드가 실제로 제시하는 크기에서 스프라이트가 잘 읽히는지 확인합니다. 평면 스프라이트 뷰어에서 맞아 보이던 캐릭터도 원근과 그림자가 개입하면 조명이 있는 3D 바닥 위에서 잘못 보일 수 있습니다. 둘을 동시에 보면 불일치를 일찍 잡을 수 있습니다.

이것은 The Cyclops' Island가 가는 것과 같은 경로입니다 — 하나의 설명, 플레이 가능한 월드 — 그리고 Mini World는 그것의 소규모 버전입니다. 스프라이트 메이커는 같은 파이프라인의 2D 쪽 끝입니다: 무엇인가를 설명하고, 사용 가능한 에셋을 얻은 다음, 돌아다닐 수 있는 곳에 넣습니다.

  • Agent Sprite Forge하나의 캐릭터 설명으로 전체 스프라이트 시트 — 대기, 걷기, 달리기, 공격, 시전을 8방향으로 — 를 생성하며, 투명 PNG 프레임과 문서화된 그리드를 제공합니다.
  • The Cyclops' Island걸어 다닐 수 있도록 생성된 3D 월드로, 손으로 배치하는 대신 설명에서 만들어지며, 스프라이트 메이커에서 만든 캐릭터를 넣을 대상으로 사용됩니다.
  • Mini World전체 장면을 제작하지 않고도 걸어 다닐 수 있는 공간에서 캐릭터를 빠르게 확인하기 위한 소규모 3D 월드 프리셋입니다.
  • 3D 게임 빌더작성된 설명을 실제 플레이 가능한 Three.js 월드로 바꾸고, 캐릭터를 조작 가능한 액터로 넣는 브라우저 기반 빌더입니다.
기사 — 하나의 설명으로 48프레임, 8방향.
The Cyclops' Island — 동일한 캐릭터 파이프라인을 3D로 한 단계 더 확장.

캐릭터가 속한 월드로 걸어 들어가기

스프라이트는 설 곳이 없는 캐릭터입니다. 마지막 단계는 다른 곳에서 제공하지 않는 것입니다: 방금 만든 시트를 누군가 걸어 다닐 수 있는 월드 — 작은 섬, 행성, 비 오는 거리 모퉁이 — 에 넣습니다. 이 사이트의 모든 월드는 하나의 작성된 설명으로 만들어졌고 플레이할 수 있는 페이지로 게시되었습니다.

FAQ

캐릭터 스프라이트 메이커란 무엇인가요? +

캐릭터 스프라이트 메이커는 작성된 설명을 완전한 스프라이트 시트 — 대기, 걷기, 달리기, 공격, 시전, 8방향 — 로 바꾸며, 투명 프레임, 문서화된 그리드, 발 위치의 원점을 제공합니다. 하나의 설명에서 생성하는 단계로 모든 포즈를 손으로 그리는 작업을 대체합니다.

걷기 사이클에는 몇 프레임이 필요한가요? +

4~8프레임입니다. 게임플레이 크기 — 대략 32~64픽셀 높이 — 에서 4프레임은 걷기로 읽히고 8프레임은 더 부드럽게 읽힙니다. 8프레임을 넘으면 추가 프레임은 가독성에서 얻는 것보다 시트 크기와 임포트 시간에서 더 많은 비용을 초래합니다.

왜 4방향 대신 8방향인가요? +

탑다운 및 아이소메트릭 게임은 고정 카메라를 사용하고 어느 방향으로든 이동을 허용하므로, 4방향은 대각선을 시각적 거짓으로 남깁니다. 45도 단위의 8방향은 스프라이트가 향하는 방향을 이동 벡터와 일치시킵니다.

스프라이트는 어떤 형식으로 내보내나요? +

투명 PNG 프레임이며, 발 위치의 원점과 캐릭터에 수평으로 정렬된 상태로 문서화된 그리드에 배치됩니다. 동일한 시트는 피벗 또는 원점을 하단 중앙으로 설정한 후 Unity, Godot, GameMaker에 임포트됩니다.

세트 내 캐릭터가 일관성 없어 보이지 않게 하려면 어떻게 하나요? +

스타일 차원 — 셀 크기, 머리-몸 비율, 외곽선 두께, 팔레트 범위, 음영 방향 — 을 고정하고 캐릭터마다 정체성만 바꾸세요. 드리프트는 거의 항상 정체성 설명이 아니라 불충분하게 명시된 스타일 절에서 발생합니다.

같은 캐릭터를 3D 월드에서 사용할 수 있나요? +

예. 스프라이트 시트를 생성한 동일한 설명이 3D 게임 빌더에 입력되어 걸어 다닐 수 있는 Three.js 월드로 바뀝니다. 브라우저에서 그 월드를 이동하며 월드가 제시하는 크기에서 캐릭터가 어떻게 읽히는지 확인할 수 있습니다.

3D 게임 빌더로 돌아가기

완성된 31개의 3D 월드, 게임, 장면이 한 페이지에 모여 있으며 — 모두 플레이할 수 있습니다.

플랫폼: Neta Studio페이지: 캐릭터 스프라이트 메이커: 한 번의 프롬프트로 완전한 스프라이트 시트다음 읽기: /explore/tool/sprite-sheet-maker · /explore/tool/sprite-animator · /explore/guide/sprite-resource-library
×