美术兵器谱:NGUI神功修炼秘笈

发表于2015-05-01
评论1 886浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913

:NGUI的基本信息

1.NGUI的导入,双击NGUI 的下载包,导入全部资源.

2.当菜单栏出现NGUI后,表示当前导入完成.如图所示

3.NGUI-Create-2D UI,会在当前视窗创建一个

在你的Game视角中可以调整你的分辨率尺寸

例如iPhone4 960x640 iPhone5 1136x640 等等~~

PS:记得调整分辨率的时候把你的Game视角放到分辨率可容纳的大小

这时你会发现你的sence视角中uiroot下的摄像机过于大,

我的个人习惯就是把各种组件的logo调到最小,到时候建立UI界面的时候不会挡到。

UI Root:2d UI容器,里面的选项特重要,如下图

其中,Scaling Style(缩放类型,包含三种)a.PixelPerfect:像素优先,表示以图片原大小进行渲染b.FixedSize:修正尺寸,以相机的大小为基准进行缩放c.FixedSizeOnMobiles:在移动设备上修正尺寸,对当前图像进行缩放以适合所有移动设备

Camera:

Clear Flags:相机投影的背景,有SkyBox, SoidColor, Depth Only, Don't Clear,选项对应不同的设置Culling Mask:相机遮罩

Projection:相机投影,分为正交(Orthographic),固定可视区域,与透视(Perspective)

Size:正交相机的大小

Clipping Planes:相机剪切大小

Viewport Rect:相机预视窗口的大小

Depth:相机的深度,0表示在最顶层

Rendering Path:渲染路径,影响图片的质量,一般跟平台有关系

Target Texture:相机投影纹理

Occlusion Culling:遮挡剔除(当物体没在相机可视范围内,不进行渲染)

HDR:高光渲染

UICamera(Script):

Event Type:响应事件类型,UI(NGUI自己的事件,World是游戏中的事件,Unity2d是Unity GUi事件

Event Mask:此处影响按钮点击时,只响应当前按钮的事件,不会影响到下层按钮

Debug:

Allow Multi Touch:是否支持多点触控,如果游戏不需要,可反选

Sticky Tooltip:工具提示

Tooltip Delay:提示延时

Raycast Range:射线检测范围

Event Sources:事件来源

Thresholds(视差,表示执行的延时):

Axes and Keys:轴向与按钮,封装了Xbox,PS3等手柄的使用

下面介绍下UIROOT的下的一些组件,点击NGUI-Open-Wight

Wizard(Legacy)

如图所示 以上就是NGUi的各个组件内容,下文会一一解答所用之处,身为一个美术需要的不像程序大爷那么多,用到的无非就是label sprite Texture Button 这些。

 

 

 

 

二:图集的制作方法

在制作图集之前首先我们要拿到UI部门出的各种图集元素,

例如 在损失像素的情况下 能切多小就多小吧~~为了图集的空间问题。在存储的模式上我们在ps里选择这种

选择PNG-24 模式。记得背景是透明的哦~~

在说明下图集里的九宫模式是怎么回事吧~在接到UI的图的时候可能会遇到很大的图例如

这种,这时候我们需要在ps里把他精简话做成这个样子,把中间部分全部裁切掉因为是纯色部分并且没有渐变所以可以最大限度的横向纵向压缩。

 

下面开始制作图集

在你的Assets目录下随便找个地方新建一个Folder,取个名字这个就是你以后放图集的位置

点击这个位置 就会出现图集的选项

在箭头标注位置我们可以给图集命名,点击Greate就建立好你的图集了~~

如果你想吧图集放在那个文件夹下你就先选择那个文件夹在点击Greate哦~这时候你会发现直接生成2个文件一个mat文件和一个prefab文件。

下一步把你从ui拿来的png小元素拽到你生成这两个文件的地方

Like this,直接拖拽进来就好。这时候需要选中你要放在图集里的png

在信息栏里选择GUI 模式 然后一下,然后你会发现你图集的面板就有了点击它你就会看见你的目录下有多出了 2个文件一个是一个是

这时候我们把需要切九宫的图选择

按照所需要的切成九宫。

以上就是基本图集的制作方法了。

 

三:图集的应用

在你的UIRoot新建一个空挂点

把位置和大小什么的都重置下,

在add component地方点击增加一个uipanel

这个地方就是调整你这个UI界面的层级深度的地方,OK选中你这个空挂点把之前ngui-open下的这个组件调出来

选择sprite也就是精灵,然后点击add to,这时候你就能发现你的工程文件变成了这样在空挂点下多了一层Sprite,选中Sprite在信息面板你能看见这些

 

Sprite的应用方式

Spirit Type表示要创建的Spirit平铺方式,包括Simple,Sliced,Tiled,Filled等

Simple模式

Sliced模式

Tiled模式

Filed模式

由上几个图所示一般情况下我们常用到的只有 simple(平铺),Sliced(九宫)这两个模式.

下面在讲解下sprite的信息面板

 

在图集引用位置我们点取Atlas键

有时我们会看不见所有的图集,这时候我们需要点击下 show all 按钮

加载所有图集。

点击选取精灵位置的sprite键

我们就可以选择相应的图集中的元素。

Label的应用方式

同sprite的调取方式一样      

Add To点击这时你的sence视角呈现出来的就是默认的字体状态

Label需要一个字体才能正常工作并且显示。这个字体是动态的Dynamic,默认直接选择Unity字体

下面我看看下label的信息面板

Shrink Content 里面的文字信息会自动被缩小到适应区域,也就是你设置的长宽像素值,让字体变小,而不是缩放内容。

Clamp Content如果文字信息没有适应,就直接截断。

Resize Freely选项让label的大小通过文本来控制,你不能自己修改大小。

Resize Height将在必要的时候增加label的高度,但会保持宽度是不变的。

Spacing 可以让你调整字符间的距离。正负数都可以,单位是像素。

Max Line 可以让你控制你最大想要多少行,0的话是不限制。

在Effect字体效果方面 一定要注意 shadow和Outline慎用。

在字体模式上加粗斜体之类也要慎用

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台