PSD转换UGUI的方案研究(1):介绍

在UI做好美术界面到程序拼界面这一流程中,美术切图加批注以及程序拼界面都是很占用时间的工作,为此我们想缩短这个时间来节省时间,所以想利用代码去实现这一步骤,借鉴其他的大佬提供的已有的方案上去修改为自己项目中可以用的方案(文末附上参考链接)。

介绍

项目已接近尾声,我们这套方案也在项目中得到了应用,优点很明显,但也有很多的不足的之处:

优点

  • 美术方面减去了切图批注的流程
  • 程序方面减去了拼界面的流程

总结来说,就是实现了从psd一键生成prefab预制体,生成即用,整个过程仅需3-10分钟,程序可以专注于业务逻辑。

缺点

  • 转换过程需要一定时间
  • 由于这套方案很依赖从命名上提取信息,所以需要很规范的命名,对美术来说,理解程序规范并不容易
  • 如果修改或更新效果图,把对应修改更新到prefab上,没有这个功能,暂不支持
  • 需要达到转换标准的psd,由于把很多图层转成了智能对象,美术的复用性并不是很好
  • 工具这部分代码是放在项目中,而实际游戏打包时不需要这部分代码,需要删掉来减小包的大小
  • 对psd插件的开发,有一定的难度,如果想对项目支持的更好,增加了工具对项目的耦合的同时,对工具的开发更新,也需要大量时间

还有很多的不足,此处列举的可能不够全面。

综上所述,本套方案实用性是有的,但缺点同样明显,在未来项目开发中,可以考虑类似的另一种方案,或者优化本方案,让它更成熟。

解决方案概览

使用方式

ps插件:PsdStandard

  1. 安装方式(PsdStandard.zip)
  2. 解压安装包到:C:\Program Files\Common Files\Adobe\CEP\extensions (如果没有对应目录请自行创建)
  3. 解压好后重新打开PS:image
  4. 界面如下:image

备注:
如果遇到以下未正确签署的提示,
解压压缩包(csxs.reg.zip)到任意目录,双击每个reg文件一次,导入到注册表:
image

Unity工具:Psd2UIForm Editor

  1. 打开工具:image
  2. 选择需要转换的的psd文件,点击Create Parse,等待生成,过程时长可能因psd大小而异
  3. 生成的Parse,以RechargeVip_psd_layers_parsed为例:image image

备注:
将TexturePacker放到路径D:TP文件夹下,确保TexturePacker.exe路径为
D:\TP\bin\TexturePacker.exe
如需要单独对某个文件夹打图集,如下图所示
其他任意位置的文件夹打图集同理,
图集导出位置可以修改,直接粘贴路径即可
image

Psd中各种组件的结构

阅读前须知:
除了图片的命名可以不分大小写,如:img_bg_xxx.img,c_xxx.img等等。
其他所有的文件、文件夹名,组件名(图层、编组名称)都以英文命名,
文件、文件夹名必须使用大驼峰法(Upper Camel Case),
例如:RechargeShop.psd,NewFeatures
每个单词首字母大写,单词之间不以空格断开或连接号(-)、底线(_)连结。
图层、编组名称不可以有空格,但可以在首字母大写的情况下加下划线,
例如:BtnAdd.btn,Btn_Add.btn都可。

Text(文本)

image
image

Button(按钮)

image
一般按钮上的文本不需要变化,所以用Text.txt就行。

Slider(进度条/滑动条)

image

InputField(输入框)

image

TableMenu(菜单/标签)

image

TableView(列表)

image

参考

psd插件参考:https://blog.cutterman.cn/2021/09/18/photoshop-plugin-types/

Unity工具参考:https://blog.csdn.net/final5788/article/details/130114695

posted @   Phopen  阅读(366)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示