SPRITE: 정적 목업에서 엔진 적용 가능한 게임 UI로의 전환

초록

게임 UI 구현은 스타일이 적용된 목업을 상호작용이 가능한 엔진 개체로 변환하는 과정을 필요로 합니다. 그러나 현재의 '스크린샷-투-코드' 도구들은 게임 인터페이스의 전형적인 특징인 불규칙한 기하학적 구조와 깊은 시각적 계층 구조를 다루는 데 종종 어려움을 겪습니다. 이러한 격차를 해소하기 위해, 우리는 정적 스크린샷을 편집 가능한 엔진 에셋으로 변환하는 SPRITE 파이프라인을 소개합니다. Vision-Language Models(VLM)과 구조화된 YAML 중간 표현을 통합함으로써, SPRITE는 복잡한 컨테이너 관계와 비직사각형 레이아웃을 명시적으로 포착합니다. 우리는 선별된 게임 UI 벤치마크를 대상으로 SPRITE를 평가하고, 재현 정확도와 프로토타이핑 효율성을 평가하기 위해 전문 개발자들과의 전문가 리뷰를 수행했습니다. 우리의 연구 결과는 SPRITE가 지루한 코딩 작업을 자동화하고 복잡한 중첩 구조를 해결함으로써 개발 과정을 효율화한다는 것을 보여줍니다. 엔진 내 빠른 반복 작업을 용이하게 함으로써, SPRITE는 게임 개발에서 예술적 디자인과 기술적 구현의 경계를 효과적으로 흐리게 합니다. 프로젝트 페이지: https://baiyunshu.github.io/sprite.github.io/

English

Game UI implementation requires translating stylized mockups into interactive engine entities. However, current "Screenshot-to-Code" tools often struggle with the irregular geometries and deep visual hierarchies typical of game interfaces. To bridge this gap, we introduce SPRITE, a pipeline that transforms static screenshots into editable engine assets. By integrating Vision-Language Models (VLMs) with a structured YAML intermediate representation, SPRITE explicitly captures complex container relationships and non-rectangular layouts. We evaluated SPRITE against a curated Game UI benchmark and conducted expert reviews with professional developers to assess reconstruction fidelity and prototyping efficiency. Our findings demonstrate that SPRITE streamlines development by automating tedious coding and resolving complex nesting. By facilitating rapid in-engine iteration, SPRITE effectively blurs the boundaries between artistic design and technical implementation in game development. Project page: https://baiyunshu.github.io/sprite.github.io/

SPRITE: 정적 목업에서 엔진 적용 가능한 게임 UI로의 전환

SPRITE: From Static Mockups to Engine-Ready Game UI

초록

Support