近期热门
粉丝17
关注 0
获赞 4
【译】PSD2NGUI_官方帮助【中文版】_笨笨20150823

[U3D] 【译】PSD2NGUI_官方帮助【中文版】_笨笨20150823

 !heats_icon! [复制链接]
12438 57 0 1 8年前 举报
本帖最后由 笑虾 于 2015-8-23 20:01 编辑

1.jpg
本文由笨笨翻译于2015-08-23   这是官网的帮助内容。仅介绍PSD2NGUI不对U3D、NGUI做过多说明。本人能力有限,如翻译有错误或不妥望海涵。
简介
感谢您使用 PSD2NGUI
PSD2NGUI 是一款能将PSD文件中的图层自动转换成NGUI 控件的工具。你只要在PSD图层名后简单的加上 label, editbox, button, checkbox, scrollview 等命令就可以快捷的创建NGUI 控件。另外当用户编辑过PSD文件后,它还能直接更新到 Unitiy3D中。一旦你开始使用PSD2NGUI就再也用不着Atlas Maker, Widget, Font tool这些东西了。你只要在PSD图层名后面添加一个 Slice 命令,拼UI和切图的活就可以交给系统来帮你搞定了。总之使用PSD2NGUI能为你节省出大量时间,从而把精力专注在GUI的功能开发上 。
重要提示:支持的NGUI版本(2.2.7 ~ 3.0.2)。(笨笨提示:如果你是旧版看下面的说明。如果你是更新的NGUI去U3D商店看看PSD2NGUI支持到哪了)
注意:使用PSD2NGUI并不需要Photoshop程序本身。(笨笨提示:只要有PSD文件就够了)
注意:PSD2NGUI支持Photoshop 的“智能对象图层”,“栅格图层”,“文字层”。
(笨笨提示:我的环境Unity3d 4.5.5,NGUI是2.6.1d,PSCC的文字层不支持。新版本应该没问题。另外用老版本时安装PSD2NGUI可能出现各种报错,要自已手动修一下。我这个版本安装完PSD2NGUI v2.3在它的根目录下会出现个v.1.2.5的版本,同时有个Read ME First的说明文件。里面说如果你用的是 NGUI 2.2.7~2.7.0之间的版本请导入PSD2NGUI v1.2.5 。双击导一下就行了。)
使用方法打开 Open
a.你可以在PSD文件上右键点击打开PSD2NGUI。
2.jpg

b.你可以从NGUI菜单,打开PSD2NGUI。
3.jpg


添加PSD文件 Add PSD file
a.在PSD图层上添加命令。
(笨笨提示:这些就是添加到PSD图层中的命令,详情看下面的 命令 COMMAND)
4.jpg
运行 Run
a.点击运行按钮“RUN”执行转换。
5.png


菜单简介 About Menu
6.png 7.png
Load 加载
加载 PSD2NGUI 设置。(笨笨提示:如果你之前有存过的话)
Delete 删除
删除 PSD2NGUI 设置。
Save 保存
保存 PSD2NGUI 设置。
Run 运行
将“图层”转换成“NGUI”控件。
NGUI Root  NGUI根节点
当你点击“RUN”进行转的时,如果场景中已有NGUI Root就会自动把东西放进去。如果没有就会自动创建一个。
Camera 摄像机
设置 NGUI摄像机类型。
Target Screen Size 目标屏幕尺寸
设置游戏分辨率。
Add Font 创建字体(笨笨提示:有的版本显示 Font Type)
创建位图字体。
Font Data 字体数据
指定位图字体的索引文件。(笨笨提示:制作位图字体的时候会生成一张PNG图版和一个TXT文本文件)
Font Texture 字体贴图
指定位图字体的文字贴图。
Font Prefab 字体预设
指定NGUI字体文件的位置。
如果你不设置[Font Data] 和 [Font Texture] 是不会创建字体的。你要可以直接指定已有字体给它。
你也可以先设置[Font Data] 和 [Font Texture] 再指定一个已有的字体,来更新已有字体。
Assign Font To All Labels 设置所有文本标签的字体
上面设置的Font Prefab并不会改变项目中已设置过字体的UILabel。如果你想替换所有UILabel的设置,请手动点击Assign Font To All Labels。
Remove Font To All Labels 移除所有UILabel的字体设置
将NGUI节点下所有UILabel的字体设置移除。
Use One Atlas 只使用一个图集
将所有图片打包在同一个图集中。如果取消勾选,将为每个PSD文件分别创建图集。
Keep Old Sprites 保留原有图片
如果取消勾选,旧的图片将会被删除。
Create Controls 创建控件
如果取消勾选,将只创建图集和字体。不会生成NGUI控件。
Remove All 移除全部
从列表中移除所有PSD文件。并不会删除硬盘上的文件。
Add Font All 全都创建字体
在分别为每个PSD创建图集时,都检查字体设置。
Add Font None  全都不创建字体
在分别为每个PSD创建图集时,不逐个检查字体设置。


视频 VIDEO
基本操作  Basic Manual.
http://www.youtube.com/embed/6b3M7-Xqh7k    官方的视频是放在墙外的
命令 COMMAND
*附加参数ub commands:用于在创建abel, Button,ComboBox等控件时进行附加的设置。这是可选项,不加也无妨。(下面介绍附加参数时 :+后面的文字 是说明部分)
(笨笨提示:PSD2NGUI 的工作方式就是通过对PSD文件的图层名称进行判断,然后做相应处理。所以在PSD的图层名中加入下面这些命令,系统就能知道这个图层应该被创建为何种控件。基本格式是这样的:
图层名@控件类型= 或 .  附加参数
ayerName@command=sub command
下面每个控件名后列出了对应的命令,不包括括号
Sprite 精灵图片
命令: layerName
如果图层名称中不添加任何命令,PSD2NGUI将为图层创建同名的UISprite控件。
Slice 九宫格
命令: layerName@slice=(左上)x(右上)x(左下)x(右下)
此命令用于创建UISprite控件,Type为Sliced。UISprite大小等于图层在PSD中的尺寸。
如果你将图层名设置为这样: topBG@slice=2x2
PSD2NGUI将从图层的左上、右上、左下、右下各取2像素生成一张4x4的图片命名为topBG@slice。
如果你将图层名设置为这样: topBG@slice=50%x50%x10%x10%
PSD2NGUI将会自动将百分比换算成像素再执行上面的操作。
如果4个角的值都一样,可以简写成这样: topBG@slice=2
8.png
Panel 面板
命令: groupName@panel
此命令用于创建UIPanel。在PSD文件的组(文件夹)的名称后面添加@panel
Label 文本控件
命令: layerName@label
此命令用于创建UILabel。请在文字层的名称后添加@label  (其实不写也行,因为PSD2NGUI能识别文字层)
附加参数 Sub commands. (设置多个参数时使用相同的图层名即可)
layerName@label@color=ff00ff :  将文字颜色设为紫色
sameLayerName@label@color=black :  将文字颜色设为黑色(建议还是像上面那样写颜色值)
sameLayerName@label@bold=true : 设为加粗
sameLayerName@label@shadow=true : 添加阴影
sameLayerName@label@text=Hello PSD2NGUI : 显示的文本内容(笨笨提示:其实我测试是木效果,文字层的内容是啥U3D里就显示啥,根本不鸟这个参数 -_-||| 不知道是不是版本问题)
sameLayerName@label@align=[topleft, top, topright, left, center, right, bottomleft, bottom, bottomright] : 设置文本的对齐方式
topleft
top
topright
left
center
right
bottomleft
bottom
bottomright
【新】sameLayerName@label@fontsize=14 : 设置字号(笨笨提示:测试的结果发现与PS中的字号显示不一至,不过大小看上去没什么问题)
Button 按钮
命令: layerName@button
此命令用于创建UIButton。请在图层名称后添加@button
如果添加了诸如button.hover 或button.pressed 这类附加参数。PSD2NGUI将创建UIImageButton。
附加参数  Sub commands.
sameLayerName@button.hover : 鼠标悬停时显示的图片
sameLayerName@button.pressed : 鼠标按下时显示的图片
sameLayerName@button.label: 按钮的文字标题
LabelButton 文本按钮
命令: textLayer@button
此命令用于创建一个只有文字部分的按钮。请在文字层名称后添加@button
Toggle(ChcekBox) 开关按钮(复选框)
命令: layerName@toggle, layerName@checkbox
此命令用于创建UIToggle(UICheckBox)。请在图层名称后添加@toggle(@checkbox)
附加参数  Sub commands.
sameLayerName@toggle(checkbox).checked : 开启状态(选中状态)
Input(EditBox) 输入框 (可编辑文本)
命令: textLayer@input, textLayer@editbox
此命令用于创建UIEditBox。请在文字层名称后添加@input(@editbox)
Password 密码输入框
命令: layerName@password
PSD2NGUI will make UIEditBox and switch Password option on.
想要PSD2NGUI创建UIEditBox并且Password选择为on。请在文字层名称后添加@password
ComboBox 组合框
命令: layerName@combobox
此命令用于创建UIComboBox。请在图层名称后添加@combobox
附加参数  Sub commands.
sameLayerName@checkbox.bar : 组合框项选中效果
sameLayerName@checkbox.listbg : 组合框背景图
Slider 滑动条
命令: layerName@hslider or layerName@vslider
此命令用于创建UISlider。请在图层名称后添加@hslider或@vslider
附加参数   Sub commands.
sameLayerName@h(或 v)slider.fg : 滑动条的前景图
ProgressBar 进度条
命令: layerName@hprogressbar or layerName@vprogressbar
此命令用于创建UISlider(Progress Bar)。请在图层名称后添加@hprogressbar或@vprogressbar
附加参数   Sub commands.
sameLayerName@h(或 v)progressbar.fg : 进度条的前景图
ScrollBar 滚动条
命令: layerName@hscrollbar or layerName@vscrollbar
此命令用于创建UIScrollBar。请在图层名称后添加@hscrollbar或@vscrollbar
附加参数   Sub commands.
sameLayerName@h(或 v)scrollbar.fg : 滚动条的前景图
ScrollView 滚动视图
命令: layerName@scrollview
此命令用于创建UIDraggablePanel 和UIDragPanelContents。请在图层名称后添加@scrollview
附加参数   Sub commands.
sameLayerName@scrollview.item : 滚动视图中用于放置其它控件的容器。
sameLayerName@h(或 v)scrollbar.bg : 滚动视图的背景图
sameLayerName@h(或 v)scrollbar.fg : 滚动视图的前景图
9.png
VirtualView 虚拟视图
命令: layerName@virtualview
此命令用于创建PsdLayerVirtualView。它与ScrollView的不同之处在于将UI与数据分离,大量数据时便于处理。
附加参数   Sub commands.
sameLayerName@virtualview.item : 虚拟视图中用于放置其它控件的容器。
sameLayerName@h(或 v)scrollbar.bg : 虚拟视图的滚动条背景图
sameLayerName@h(或 v)scrollbar.fg :  虚拟视图的滚动条前景图
10.png


SpriteFont 美术字
命令: groupName@spritefont
11.png
Animation 动画
命令: groupName@animation@fps=30 or groupName@ani@fps=15
此命令用于创建简单的精灵动画。
Collider 碰撞框
命令: layerName@collider=box
此命令只创建碰撞框(热区)BoxCollider。
Script 脚本
命令: layerName@script
此命令会让PSD2NGUI 在UILabel上挂一个PsdLayerUserScript脚本。它有一个成员变量Data,你可以将文字层中的文本内容作为参数传给它。
Ignore 忽略
命令: layerName@ignore
如果想忽略某个图层不做任何处理。请在图层名后加上@ignore

官方: PSD2NGUI

补上官方视频百度盘
链接: http://pan.baidu.com/s/1c0k9qdM 密码: 258h

另外附上PDF版本带目录,与帖子内容完全一样。只是排版过方便阅读和收藏



补充内容 (2016-8-22 18:17):
插件分享到这里:链接: http://pan.baidu.com/s/1slgqbW5 密码: 6ea4
0
点赞
0
打赏
1
添加到收藏夹

0

点击复制链接

使用微信扫码分享
一次扣10个券
全部评论57
您需要登录后才可以回帖 登录 | 立即注册

有最新版本吗?
3年前
回复

使用道具 举报

IT凡人 来自手机
感谢分享
4年前
回复

使用道具 举报

很棒,很不错!!!下载来看看
5年前
回复

使用道具 举报

我卡卡卡
5年前
回复

使用道具 举报

感谢楼主分享!!!!!!!!!
5年前
回复

使用道具 举报

fff
5年前
回复

使用道具 举报

谢谢
5年前
回复

使用道具 举报

感谢LZ分享
5年前
回复

使用道具 举报

感谢楼主分享,正是我需要的好东西~~谢谢~
5年前
回复

使用道具 举报

谢谢楼主
5年前
回复

使用道具 举报