将游戏界面截图自动转为可编辑引擎资产,解决复杂布局转换难题
SPRITE: From Static Mockups to Engine-Ready Game UI

- 用视觉语言模型+结构化YAML表示法解析界面层级关系
- 在专业开发者评测中实现高保真还原与开发效率提升
- 适合游戏美术与程序协作,加速从设计到代码的迭代
游戏用户界面实现需将风格化原型图转化为可交互引擎对象。然而,现有“截图转代码”工具常难以处理游戏界面常见的不规则几何与深层视觉层级。为此,我们提出SPRITE,一种将静态截图转化为可编辑引擎资产的流程。通过融合视觉语言模型(VLMs)与结构化YAML中间表示,SPRITE显式捕捉复杂的容器关系与非矩形布局。我们在自建的游戏界面基准上评估了SPRITE,并邀请专业开发者进行专家评审,以衡量重构保真度与原型制作效率。结果表明,SPRITE通过自动化繁琐编码并解决复杂嵌套问题,显著提升了开发效率。它促进了艺术设计与技术实现之间的无缝衔接,有效模糊了二者边界。项目页面:https://baiyunshu.github.io/sprite.github.io/
原文摘要 · Abstract (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/
Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品;中文卡片由大模型生成,请以原文为准。