您的位置:首页 > 产品设计 > UI/UE

FastGUI

2015-09-26 19:42 253 查看
1、定义:FastGUI是NGUI的附带插件(所以必须先安装NGUI),

用于把PhotoShop制作的PSD(二维界面)生成Unity能识别的prefab,

实质是读文件(PSD)->写文件(prefab)的过程

2、最佳学习方法:实践+源代码研究(总共才3000行代码左右,值得去研究学习)

3、环境搭配:项目中先导进NGUI插件,再导进FastGUI插件,

此时在NGUI菜单列表中能找到FastGUI菜单项

4、源代码目录分析

/Defaults For Import

/Documentation:帮助文档

/Examples:一些符合规范的PSD例子,供你模仿

/Importer:源代码目录,共3000行代码左右,它最终会用到NGUI代码

/Photoshop Plugin:一些插件,FastGUI Importer Photoshop Plugin.jsx

5、导出PSD步骤

【photoShop导出】

1)双击打开该PSD

2)在PS上,选择文件->脚本->浏览,找到FastGUI下的PhotoShop Plugin的文件

3)选择后在弹出的界面中选择Export Layers->选择导出路径

(通常在unity工程的Assets目录下,方便下一步unity导入),

产物为一个文件夹,里面包括Images文件夹+NPSD_Data.xml,缺一不可

【unity导入】

4)在unity上,选择NGUI-FastGUI-Import NGUI Screen

5)在界面上填写三大参数:

Import Common Atlas:当PSD用到公共图集资源时,把公告图集拖到该选项中

Imported PSD Folder:把3)的文件夹拖到该目录

Parent Panel:把有UIPanel组件的GO拖到该选项,没有就NGUI-Create-2D UI

6)import it按钮,在文件夹中多出了Output和Source两个文件夹,Prefab和图集已经在该目录中

6、重要控件的“组”的命名和内部结构规范(以《勇者联盟》为参考例子)

1)图片有四种类型:基本simple,切片sliced,瓦片Tiled,填充Filled

它们的结构都是:组Group - 图层资源

基本图片的组命名任意;

切片图片,命名为slc_name

瓦片图片,命名为til_name

填充图片,命名为fil_name

2)按钮

组的命名为btn_name,内部包括子组:disabled-图层资源,pressed-图层资源,idel-图层资源

3)文本

组的命名为txt_name,内部结构是组Group - 图层资源

7、关键难点

1)PSD内各个“组”的命名和内部结构:必须严格遵守,否则会导出失败

2)指定common图集:通过组件命名判断它是否使用了公共图集

8、参考博客
http://blog.sina.com.cn/s/blog_7cbd10170102v6lt.html http://game.ceeger.com/forum/read.php?tid=5259
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: