跳到主要内容

PIXELSYNC / 游戏界面,始终同步

从美术稿,到游戏界面。
让每次修改,自动抵达。

美术专注设计,技术专注逻辑。PixelSync 基于 OpenRaster,将两端的修改接入同一条自动化链路,让界面从画布一路同步到游戏。

  • OpenRaster
  • FairyGUI
  • Git
  • CI / CD
一份源文件,一条交付链路。

让设计与实现,始终在一起

从熟悉的操作开始
为美术而设计 01

熟悉的手感,
更顺畅的协作。

像使用 Photoshop 一样工作。图层、快捷键、参考线,
都在熟悉的位置;打开浏览器,就能开始。

双向同步 02

两种工具,
同一个进度。

美术改 ORA,技术改 FGUI XML。哪一端有更新,另一端就自动跟上。

ORA美术 · 外观
Git
FGUI技术 · 逻辑
基于上次同步点,三方合并
源文件可 DIFF 03

改了哪里,一目了然。

布局、文本、样式都存为文本文件。
每次修改可逐行审阅,Git 按行自动合并。

  • 文本可审阅
  • PNG 走 Git LFS
texts.yaml+2 −2
  n7_btn_ok:
−   text: "开始游戏"
+   text: "开始旅程"
−   fontSize: 16
+   fontSize: 18
持续集成与交付 04

提交之后,交给流水线。

自动转换、校验、打包和发布。
团队直接在游戏里验收。

  1. 转换
  2. 校验
  3. 发布
职责清晰

协作有边界,修改不越界。

外观和切图归美术,控制器、关联和命名归技术。各自负责的字段,由转换器保护。

一套界面,两方各司其职
所见即所得

画布上的效果,游戏里见。

编辑器只提供 FGUI 能表达的效果。不支持的内容及时提示,减少交付时的意外。

问题在编辑时被发现
兼容既有资产

旧稿能接入,交付有选择。

在 CI 中导入旧 PSD,或按需导出 PSD。仓库始终保留可审阅的 ORA 与 FGUI 源文件。

PSD 是交付产物,源文件更轻盈

工作流程

一次提交,一路向前。

从任何一端开始,沿着同一条链路完成同步与交付。

  1. 01

    保存美术稿

    在网页编辑器中保存,将 ORA 目录提交到 Git。

    技术也可以在 FairyGUI 中提交 XML,启动同一流程。

  2. 02

    识别与合并

    识别变更来源,基于上次同步点进行三方合并。

  3. 03

    转换与校验

    生成对侧文件(ORA 或 FGUI XML),完成规范校验与前后对比图。

  4. 04

    写回与同步

    合并成功后,bot 提交生成物,并更新同步基准。

  5. 05

    发布到游戏

    打包 FGUI,发布到客户端构建或测试环境。

自动化,也保留人工决策。 发生冲突时,流水线输出报告或 MR,交由团队确认后继续。

开放设计

可靠协作,从源文件开始。

开放格式、明确约定,让每一次同步都有据可循。

OpenRaster ⇄ FairyGUI
一份界面的源文件ORA /
ui/login_panel/
├─ stack.xml图层树与变换
├─ meta.yaml稳定 ID 与同步基准
├─ texts.yaml文本与字体
├─ styles.yaml描边、投影等样式
└─ data/PNG · Git LFS
├─ n3_bg.png
└─ n7_btn_ok.png

固定键顺序、固定数值精度、每个属性一行。
文件名携带稳定 ID,改名也不会丢失对应关系。

01

用稳定 ID 连接两端

ORA 图层与 FGUI 节点一一对应。改名或调整层级,不改变映射关系。

02

转换集中在 CI,编辑保持专注

网页编辑器只读写 ORA。格式转换由流水线统一处理,技术字段在编辑器内锁定。

03

只同步必要的改动

跳过 bot 自身的提交;内容哈希没有变化就不提交,避免同步循环。

进一步了解协作约定

字段归属

外观、布局和切图以美术为准;控制器、关联和命名以技术为准。转换时只覆盖对方负责的字段。

导入与交付

PSD 不作为源文件入库。旧 PSD 中的智能对象、调整图层等不支持的内容,在导入时栅格化并给出警告。

冲突与验收

三方合并以最近同步点为基准。冲突输出报告或 MR;校验通过后,发布到游戏客户端构建和测试环境。

减少交接,专注创作。

让创作向前,让同步自动发生。

从第一个像素,到游戏里的每一帧。

回看协作流程