SPRITE: 静的モックアップからエンジン対応ゲームUIへ

SPRITE: From Static Mockups to Engine-Ready Game UI

March 18, 2026

著者: Yunshu Bai, RuiHao Li, Hao Zhang, Chien Her Lim, Ming Yan, Mengtian Li

cs.AI

要旨

ゲームUIの実装では、スタイライズされたモックアップを対話型エンジンエンティティへ変換する必要がある。しかし、既存の「スクリーンショットtoコード」ツールは、ゲームインターフェースに典型的な不規則な幾何学形状や深い視覚的階層構造の処理に課題を抱えている。この課題を解決するため、我々は静的スクリーンショットを編集可能なエンジンアセットへ変換するパイプライン「SPRITE」を提案する。SPRITEはVision-Languageモデル（VLM）と構造化YAML中間表現を統合することで、複雑なコンテナ関係や非矩形レイアウトを明示的に抽出する。ゲームUIベンチマークを用いた評価とプロ開発者による専門家レビューを通じて、再現精度とプロトタイピング効率を検証した。結果、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/