Unity3D之NGUI基础5:UISprite显示图片

时间:2024-04-08 18:57:52

 

前文:https://blog.csdn.net/Jaihk662/article/details/86772807(NGUI图片管理工具AtlasMaker)

一、利用UISprite显示图片

第一步:NGUI→Create→UISprite

第二步:选择图集后选择要显示的图片

Unity3D之NGUI基础5:UISprite显示图片

第三步:调节图片大小

Unity3D之NGUI基础5:UISprite显示图片Unity3D之NGUI基础5:UISprite显示图片

Aspect:图片比例;设置锁定比例缩放

 

二、UISprite面板操作

修改图片大小:

Unity3D之NGUI基础5:UISprite显示图片

Unity3D之NGUI基础5:UISprite显示图片

常用属性:

  • Type:图片的模式(下面有详细解释)
  • Flip:图片翻转(前后翻转、左右翻转、上下翻转)
  • Gradient:图片渐变色调,Top是上方颜色,Bottom是下方颜色
  • Color Tint:图片色调,和上面的 Gradient 差不多

 

三、四种图片模式

Simple:默认模式

Sliced:九宫模式,实现局部放大(防止图片失真),一般用于按钮设计

Unity3D之NGUI基础5:UISprite显示图片点击Edit就会进入下面的界面,想要回去直接再点击一下UISprite物件即可

Unity3D之NGUI基础5:UISprite显示图片Unity3D之NGUI基础5:UISprite显示图片

Tiled:平铺模式,使用该图片平铺 Widget 中 Size 的区域,如下

Unity3D之NGUI基础5:UISprite显示图片

Flip:进度模式,效果直接上图(Invert Fill:是否翻转填充)

Unity3D之NGUI基础5:UISprite显示图片Unity3D之NGUI基础5:UISprite显示图片Unity3D之NGUI基础5:UISprite显示图片