Unity UGUI3——三大基础控件

这篇具有很好参考价值的文章主要介绍了Unity UGUI3——三大基础控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Image

​ Image 是图像组件,是 UGUI 中用于显示精灵图片的关键组件
​ 除了背景图等大图,一般都使用 Image 来显示 UI 中的图片元素

Unity UGUI3——三大基础控件

(一)参数介绍

  1. Source Image:图片来源

    图片类型必须是“精灵 Sprite”类型

  2. Color:图像的颜色

  3. Matreial:图像的材质

    一般不修改,会使用 UI 的默认材质

  4. Raycast Target:是否作为射线检测的目标

  5. Maskable:是否能被遮罩

  6. Image Type:图片类型

    1. Simple:普通模式,均匀缩放整个图片

    2. Sliced:切片模式,9 宫格拉伸,只拉伸中央十字区域

      • Pixels Per UnitMultiplier:每单位像素乘数
      • Fill Center:中心填充

      点击 Sprite,点击 Inspector 面板上的 Sprite Editor

    Unity UGUI3——三大基础控件
    Unity UGUI3——三大基础控件
    1. Tiled:平铺模式,重复平铺中央部分

    2. Filled:填充模式

      • Fill Method:填充方式
      • Fill Origin:填充原点
      • Fill Amount:填充量
      • Clockwise:顺时针方向
  7. Use Sprite Mesh:使用精灵网格

    勾选的话 Unity 会帮我门生成图片网格

  8. Preserve Aspect:确保图像保持其现有尺寸

  9. Set Native Size:设置为图片资源的原始大小

(二)代码示例

Image img = this.GetComponent<Image>();
img.sprite = Resources.Load<Sprite>("ui_TY_fanhui_01");

((RectTransform)transform).sizeDelta = new Vector2(200, 200);
img.raycastTarget                    = false;

img.color = Color.red;

二、Text

Unity UGUI3——三大基础控件

(一)参数介绍

  1. Text:文本显示内容

  2. Font:字体

  3. FontStyle:字体样式

    • Normal:普通
    • Bold:加粗
    • Italic:斜体
    • Bold And Italic:加粗 + 斜体
  4. Font Size:字体大小

  5. Line Spacing:行之间的垂直间距

  6. Rich Text:是否开启富文本

    加粗:<b>文本内容</b>

    斜体:<i>文本内容</i>

    大小:<size=10>文本内容</size>

    颜色:<color=red>文本内容</color> 或 <color=#00ff00ff>文本内容</color>

  7. Alignment:对齐方式

  8. Align By Geometry:使用字形集合形状范围进行水平对齐,而不是字形指标

  9. Horizontal Overflow:处理文本太宽无法放入矩形范围内时的处理方式

    • Wrap:包裹模式——字体始终在矩形范围内,会自动换行
    • Overflow:溢出模式——字体可以溢出矩形框
  10. Vertial Overflow:处理文本太高无法放入矩形范围内时的处理方式

    • Truncate:截断模式——字体始终在矩形范围内,超出部分裁剪
    • Overflow:溢出模式——字体可以溢出矩形框
  11. Best Fit:自动适应

    忽略字体大小,始终把内容完全显示在矩形框中,会自动调整大小

    • MinSize:最小字体大小
    • MaxSize:最大字体大小
  12. Color:文字的颜色

  13. Matreial:图像的材质

    一般不修改,会使用 UI 的默认材质

  14. Raycast Target:是否作为射线检测的目标

  15. Maskable:是否能被遮罩

(二)边缘和阴影效果

​ 为 Text 添加边缘线组件 outline 和 阴影组件 Shadow 设置效果

Unity UGUI3——三大基础控件
Unity UGUI3——三大基础控件

  1. Effect Color:效果颜色
  2. Effect Distance:生效位置
  3. Use Graphic Alpha:是否启用透明通道

(三)代码示例

Text txt = this.GetComponent<Text>();
txt.text = "哈哈哈哈哈";

三、RawImage

​ RawImage 是原始图像组件,是 UGUI 中用于显示任何纹理图片的关键组件

​ 它和 Image 的区别是,一般 RawImage 用于显示大图(背景图,不需要打入图集的图片,网络下载的图等等)

Unity UGUI3——三大基础控件

(一)参数介绍

  1. Texture:图像纹理

    可以是任意类型的图片,不必一定是 Sprite

  2. Color:图像的颜色

  3. Matreial:图像的材质

    一般不修改,会使用 UI 的默认材质

  4. Raycast Target:是否作为射线检测的目标

  5. Maskable:是否能被遮罩

  6. UV Rect:图像在 UI 矩形内的偏移和大小

    改变它们,图像边缘将进行平铺拉伸来填充 UV 矩形周围的空间文章来源地址https://www.toymoban.com/news/detail-489603.html

(二)代码示例

RawImage raw = this.GetComponent<RawImage>();
raw.texture = Resources.Load<Texture>("ui_TY_lvseshuzi_08");
raw.uvRect  = new Rect(0, 0, 1, 1);

到了这里,关于Unity UGUI3——三大基础控件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包