본문으로 건너뛰기

트렌딩 - GitHub 인기 레포 & HuggingFace 모델

NO6KIKO/gorest-2d-animation-spritesheet-generator

TypeScript0 / 0

Codex 에이전트로 프롬프트 기반 스프라이트 생성과 씬 합성을 로컬에서 수행하는 TypeScript 웹 앱

TL;DR

로컬에서 바로 실행하는 TypeScript 기반 2D 스프라이트시트 생성 및 씬 에디터입니다. Codex 에이전트를 통해 프롬프트와 레퍼런스 이미지를 입력하면 로컬 엔드포인트에서 투명 PNG 스프라이트시트를 생성하고 에디터에서 합성·미리보기·메타데이터 편집까지 연결됩니다. public/generated에 생성 파일을 저장해 로컬 자산 라이브러리로 재사용할 수 있으며, 호스티드 데모(sprite.gorest.ai)로 설치 없이 기능을 빠르게 확인할 수 있습니다.

핵심 포인트

  • 이 레포지토리는 독립 실행형 툴로 분류되며 TypeScript 기반의 로컬-퍼스트 웹 앱 아키텍처를 사용합니다. 소스 트리에는 App.tsx, server.ts, types.ts 등 프런트엔드 UI와 Express+Vite 서버가 함께 있어 바로 로컬에서 실행해 장면 편집과 스프라이트시트 생성 워크플로우를 테스트할 수 있습니다. 호스티드 버전(sprite.gorest.ai)이 있어 설치 없이도 기능을 확인할 수 있다는 점이 즉시 시도해볼 수 있는 장점입니다.
  • Codex 보조 애셋 에이전트가 핵심 워크플로우이며, 에이전트는 프롬프트와 레퍼런스 이미지를 받아 로컬 엔드포인트를 호출해 게임용 투명 PNG 스프라이트시트를 생성하고 장면에 합성합니다. 리포지토리에는 AGENTS.md와 docs/AGENT_WORKFLOW.md가 포함되어 있어서 에이전트 입력·출력 방식과 프롬프트 템플릿을 코드 수준에서 확인할 수 있으며, README는 GPT-5.5 권장 모델을 명시해 어떤 모델을 염두에 두고 설계되었는지 보여줍니다. 생성물은 public/generated/에 저장되어 로컬 게임 자산 라이브러리로 바로 재사용할 수 있도록 구성됩니다.
  • 에디터는 씬 컴포저, 2D 캔버스, 스프라이트시트 편집, 액션(플레이어 프리뷰) 순의 프로토타이핑 루트를 지원하고, 각 클립에 액션 이름·트리거·게임 상태·루프 모드 등 메타데이터를 저장합니다. 스프라이트시트를 통째로 생성한 뒤 프레임으로 분할하도록 권장하는 저자 규칙을 포함해 프레임 크기·앵커·발 위치 고정 등의 실무 규칙을 명시하고 있어 게임용 자산 일관성 유지에 도움이 됩니다. 또한 Fake 3D 회전 기능처럼 미리 렌더된 뷰를 행렬로 배치해 드래그로 회전하는 경량 워크플로우도 내장되어 있어 2D 게임에 바로 적용 가능한 인터랙티브 미리보기를 제공합니다.
  • 프로젝트 활동성과 라이선스 관점에서 볼 때 스타 1,337개와 포크 190개는 외부 관심이 있는 편이며 소스는 MIT 라이선스로 상업적 사용 가능성을 열어둡니다. 반면 리포지토리는 로컬-퍼스트 설계를 기본으로 하므로 대규모 클라우드 생성 파이프라인 또는 배포형 SaaS 백엔드 통합 같은 기업용 확장 기능은 자체 구현이 필요합니다. 샘플 에셋과 데모 이미지가 포함되어 있어 초기 프로토타입과 실험에는 시간 절약 효과가 크지만, 프로덕션용 대량 에셋 파이프라인을 바로 대체할 정도의 자동화·검증 체계는 README 범위에서 명시되어 있지 않습니다.

이미지 분석

씬 컴포저 화면 스크린샷으로, 중앙에 캐릭터 근접 컷이 배경 신사 입구 위에 합성되어 있고 하단에 밝기·마젠타·글로우·비네트 슬라이더가 보입니다. 좌측에는 레이어 목록이 있고 우측에는 선택된 레이어의 Item Inspector 패널이 있어 잠금, 스케일, 불투명도 같은 변형 조절이 가능하게 보입니다. 이 화면은 장면 합성·레이어 편집·라이팅 조절을 한곳에서 빠르게 반복할 수 있는 UI 흐름을 시각적으로 보여줍니다.
이미지는 씬 단위 합성 작업 흐름을 어떻게 구성하는지 입력(배경·캐릭터·프롭)→처리(레이어 순서·스케일·조명 슬라이더 조정)→출력(실시간 미리보기)으로 명확하게 드러냅니다. 하단의 전역 조명과 효과 슬라이더는 장면 전체 조도를 실시간으로 튜닝할 수 있음을 나타내며, 우측의 Item Inspector는 개별 자산 레벨에서 메타데이터와 변형을 다루는 방식을 보여줍니다. 이 스크린샷을 통해 개발자는 에디터가 단일 창에서 합성·비주얼 튜닝·자산 속성 편집을 모두 처리하도록 설계된 것을 빠르게 파악할 수 있습니다.
사이드스크롤 미리보기 화면으로, 왼쪽에 보이는 보행 애니메이션 캐릭터가 어두운 침실 배경을 횡단하는 정측면 뷰가 캡처되어 있습니다. 상단에 'Cluttered Bedroom - Chinese Horror' 씬 제목과 Scene 탭이 강조되어 있어 이 화면이 씬 프리뷰 모드임을 보여줍니다. 장면이 넓은 월드 좌표에서 뷰포트로 잘라서 재생되는 구조임을 확인할 수 있습니다.
이 이미지는 에디터의 플레이어 블레이드(측면 이동) 미리보기 입력(애니메이션 스프라이트 + 배경)→처리(프레임 재생, 충돌·레이어 순서 유지)→출력(실시간 사이드스크롤 시뮬레이션) 과정을 명확히 나타냅니다. 캐릭터가 월드 좌표에 고정된 채로 뷰포트가 이동하거나 캐릭터가 걷는 형태로 재생되는 점은 side-scroller 테스트에 바로 사용할 수 있는 기능임을 시사합니다. 이 캡처를 보면 씬 크기·뷰포트 분리와 플레이어 이동 검증이 에디터에서 간편하게 가능하다는 장점이 드러납니다.
액션 에셋 편집 패널 스크린샷으로, 가운데 투명 배경의 회전 목마 스프라이트 프리뷰가 있고 오른쪽에는 프레임 인덱스와 재생 컨트롤, 좌측에는 현재 액션 메타데이터(액션 이름, 자산 역할, 트리거 타입, 트리거 값, 게임 상태 등)가 표시되어 있습니다. 하단에는 'Save as Confirmed Asset' 버튼이 보여 생성한 스프라이트시트를 로컬 에셋 라이브러리에 확정 저장할 수 있는 흐름이 존재합니다. 이 화면은 스프라이트시트 프레임 단위로 미세 조정하고 메타데이터를 연동하는 편집 루트를 시각화합니다.
이미지는 단일 스프라이트시트를 액션 단위로 정의하는 입력(스프라이트 PNG + 메타데이터)→처리(프레임 탐색·재생·메타데이터 편집)→출력(확정된 로컬 자산으로 저장) 과정을 보여줍니다. 키보드 트리거나 게임 상태 필드가 눈에 띄어 에셋이 곧바로 게임 로직과 연동되도록 설계된 점이 확인됩니다. 또한 프리뷰 패널과 저장 버튼이 가까이 있어 반복 편집-검증-저장 사이클이 짧은 편임을 알 수 있어 프로토타입 제작 속도를 높이는 데 유리합니다.

1.3k

Stars

190

Forks

+206

Trending

0

조회수

1.3k watchers2 open issuesMIT License

관련 토론

아직 관련 토론이 없습니다.

댓글

댓글을 작성하려면 로그인이 필요합니다.