Unity UGUI基础之Image

UGUI的Image等价于NGUI的Sprite组件,用于显示图片。


一、Image组件:



Source Image(图像源):纹理格式为Sprite(2D and UI)的图片资源(导入图片后选择Texture Type为Sprite(2D and UI))。

Color(颜色):图片叠加的颜色。

Material(材质):图片叠加的材质。

Raycast Target(射线投射目标):是否作为射线投射目标,关闭之后忽略UGUI的射线检测。

Image Type(图片显示类型)

Simple(基本的):图片整张全显示,不裁切,不叠加,根据边框大小会有拉伸。

Preserve Aspect(锁定比例):针对Simple模式,勾选之后,无论图片的外形放大还是缩小,都会一直保持初始的长宽比例。




Image Type(图片显示类型)

Sliced(切片的):图片切片显示,在Project页面选中图片,切换为Sprite(2D and UI)模式后,点击Sprite Editor进入图片裁切模式,将图片裁切为上图的形状,使用Sliced模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会拉伸5进行填充。

Fill Center(填充中心):勾选后,5显示,反之,5不可见。



Image Type(图片显示类型)

Tiled(平铺的):若图片已经过裁切,则使用Tiled模式后,根据图片边框拉伸,图片的四个角会保持原状,而1和4部分会随着图片的横向拉伸而拉伸,2和3部分会随着图片的纵向拉伸而拉伸,图片的中间部分会用5进行平铺填充。若图片未裁切,则使用Tiled模式后,根据图片边框拉伸,图片保持原大小不做变化,只是用自身平铺填充。

Fill Center(填充中心):(已裁切的图像源才有此选项)勾选后,5显示,反之,5不可见。



Image Type(图片显示类型)

Filled(填充的):根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method(填充方式):分为水平、垂直、90度圆、180度圆、360度圆。

Fill Origin(填充起点):根据填充方式不同有所变化。

Fill Amount(填充比例):0是完全不显示,1是完全显示。



二、使用中的技巧:


《功能1:我想在程序里动态切换图像源,包括我电脑硬盘里任意一张图片》

思路:首先我们要将该图片读入字节流,然后转换为Sprite,就可以直接赋给Image了,代码如下:


传入的参数bytes为图片文件转换的字节数组,至于怎么转,网上一收一大把,这里就不做说明了,texture2d为一个Texture2D变量,返回的_sprite就可以直接赋值给Image的图像源了。


《功能2:我也想给图片添加像文本那样的阴影效果和描边效果》

阴影效果:还是添加阴影特效组件


描边效果:还是添加描边特效组件



### Unity UGUI 基础控件教程 #### Image 控件 `Image` 是用于显示图像的最基本控件之一。通过设置 `Sprite Mode` 和其他属性可以实现不同的视觉效果,比如填充模式、颜色调整等[^1]。 ```csharp using UnityEngine; using UnityEngine.UI; public class Example : MonoBehaviour { public Image imageComponent; void Start() { // 设置图片的颜色 imageComponent.color = Color.red; // 更改 Sprite 图像 imageComponent.sprite = Resources.Load<Sprite>("NewSprite"); } } ``` #### TextMeshPro 文本控件 为了更高效地处理文本渲染,推荐使用 `TextMeshPro` 而不是传统的 `Text` 组件。创建该组件的方法是在 Hierarchy 视图中选择 Create -> UI -> TextMeshPro 来完成[^2]。 ```csharp using TMPro; public class TMPExample : MonoBehaviour { public TextMeshProUGUI textMeshProComponent; void Start() { // 修改文字内容 textMeshProComponent.text = "Hello, World!"; // 改变字体大小 textMeshProComponent.fontSize = 48f; } } ``` #### Button 按钮控件 按钮是交互界面中最常见的元素之一。可以通过在 Hierachy 面板里右键点击并导航到 UI->Button 来快速添加一个按钮对象。每个按钮默认会附带有一个 `Image` 子项以及一个带有文本标签的 `Text` 或者 `TextMeshPro` 的子物体来展示按钮上的说明文字[^3]。 ```csharp using UnityEngine; using UnityEngine.UI; public class ButtonClickHandler : MonoBehaviour { private Button button; void Awake(){ button = GetComponent<Button>(); button.onClick.AddListener(OnButtonClick); } void OnButtonClick(){ Debug.Log("The button was clicked!"); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神码编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值