Unity UGUI Image 中文详解-Chinar

最新推荐文章于 2024-07-15 00:18:03 发布
最新推荐文章于 2024-07-15 00:18:03 发布
阅读量8k 收藏 29
点赞数 21
分类专栏： Unity 3D UGUI 文章标签： unity ugui image ugui image image组件 unity image unity image中文
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChinarCSDN/article/details/90312137
版权
Unity 3D 同时被 2 个专栏收录
178 篇文章 270 订阅
订阅专栏
UGUI
15 篇文章 14 订阅
订阅专栏

Chinar blog ：www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI Image 组件

本文提供全流程，中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新！

助力快速掌握 Unity UGUI中 Image 组件的使用

为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：
在这里插入图片描述

文章目录

全文高清图片，点击即可放大观看 (很多人竟然不知道)

1

Presentation —— 介绍


Image 组件是 UGUI 中最常用的组件。作用：控制/显示图片

1.1 Attribute —— 属性

我们创建一个 Image 组件看一下它的属性：

在 Unity 的 Hierarchy 面板上右键–>UI–>Image
举个例子
在这里插入图片描述

选中我们创建的 Image 对象，在 Inspector 面板上查看属性

在这里插入图片描述
下面看一下每个属性的详细功能

属性功能
Source Image需要显示图片来源（文件引用）
Color图片的颜色
Material渲染图像的材质
Raycast Target能否接收到射线检测
Image Type图片的排列类型 Simple (普通模式)，Sliced (九宫格)，Tiled (平铺),Filed (填充)
Preserve Aspect使图片保留现有尺寸
Set Native Size将图像尺寸设置为原始图片的像素大小

1.2 Texture Import Setting —— 图片导入设置

为了在 Image 组件上使用我们想要的图片，我们需要将纹理类型改为：Sprite/精灵，才可正常使用。

选中导入后的图片，在 Inspector 面板上可以进行设置

点击 Texture Type 将其设置为 Sprite(2d and UI) 然后点击 Apply 应用
举个例子
在这里插入图片描述
然后我们可以将转换过的精灵图片，通过拖动的方式，添加到 Image 组件当中(直接点击添加也行)
在这里插入图片描述

2

Image Type —— 图片类型详解

2.1 Simple —— 简单模式

先介绍 Simple 模式

simple模式下只有一个选项：

Use Sprite Mesh：是否使用图片网格

勾选-此选项，我们的图片使用 Unity 帮我们生成的图片网格

2.2 Sliced —— 九宫格模式

Sliced九宫切图。效果：保证(除中间部分)，其他切图部分被拉伸不变形

我们先看一张，没有经过九宫切图且带边框的图片

随着图片宽高的变化，边框也会跟着变粗。这不符合我们对 Button 和其他UI的设计需求，我们需要保持边框不变
在这里插入图片描述

如何九宫切图 ？

首先设置图片的九宫格：

点击图片，点击Sprite Editor
在这里插入图片描述
弹出编辑窗口
在这里插入图片描述
像这样
在这里插入图片描述
点击右上角的 Apply 应用

然后将 Image 组件的 Image Type 类型改为 Sliced 模式
效果
在这里插入图片描述

看下对比图：
在这里插入图片描述

Sclied 类型下有一个 Fill Center (是否填充中心)，意思为是否将九宫格中心格子进行填充
看下效果:
在这里插入图片描述
可以看到取消勾选后仅取消中心区域的填充效果，四周的填充效果不会改变

2.3 Tiled —— 平铺模式

Tiled 平铺，没什么好说的,看个效果

在这里插入图片描述

2.4 Filed —— 填充模式

Filed 填充，这个适合做技能冷却效果

在这里插入图片描述
这个模式也很容易理解，来个动图看一下：

在这里插入图片描述

至此：您已完美征服了 UGUI - Image

其他组件请继续学习，贴心的 Chinar 为您准备了 UGUI 全套教程

Unity UGUI 完整系列教程 (Chinar中文图解)

支持

May Be —— 开发者，总有一天要做的事！


拥有自己的服务器，无需再找攻略

Chinar 提供一站式《零》基础教程

使有限时间 具备无限可能！

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

Chinar
END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址

Chinarcsdn
关注
专栏目录
UGUI源码学习之初涉Image（一）
攀大小熊猫的专栏
03-01 8936
UGUI源码学习之初涉Image（一）近几天开始ugui源码学习之旅，也算是自己第一次开始学习比较系统的源码^^。而由于源码涉及内容较多，所以我打算呢分节讲解，毕竟如果一节能够讲清楚一件事情就已经很不错了（所以还是希望自己能够讲清楚^^）。原文链接：http://blog.csdn.net/a237653639/article/details/50774207ps:1.对整个ugui类图的总览请自行
unity UGUI Image之扩展
文刀雨田
01-19 1304
      由于ngui对新版的unity的兼容性越来越不好了，现在逐步转向unity的亲儿子---ugui。尝试着搭了几个ui之后，发现image的图片操作不是太方便（例如 我想在slice模式下，按照比例去放大图片），我每次都算一边。        用了ngui的我联想到能不能模仿者ngui UISprite的方式去扩展呢。哈哈，最终被我搞成了。先看效果         用过ngui的朋...
【实用技巧】Unity中的Image组件
Richard_shen的博客
06-04 718
Unity中的Image组件是UI系统的核心部分，用于显示图像和纹理。通过运用这些技巧，你可以更有效地使用Unity的Image组件，创建出既美观又高效的用户界面。
UGUI优化篇（更新中）
最新发布
2301_76618920的博客
07-15 1336
UGUI优化
Unity UGUI -- Image
z2014z的博客
08-13 1803
Unity UGUI – Image Image控件 Image控件向用户显示非交互式图像。这可以用于装饰、图标等，图像也可以从脚本更改来反映其他控件的变化。该控件类似于Raw Image 控件，但提供了更多的选项来动画图像和精确归档控件矩形。然而，Image控件要求它的纹理是精灵，而原始图像可以接受任何纹理。 Properties 属性 Property: Function: Source Image 图像源 The texture that represents the image t
Unity技术手册-UGUI零基础详细教程-Image图片_unityimage如何添加图片(1)
2401_84183492的博客
05-03 128
总共有四个模式，（默认是Simple模式，有两个属性，User Sprite Mesh-表示使用图片网格，暂时只知道可以集合Sprite Tight完成Overdraw减少，Preserve Aspect-表示图片是否保持宽高比，而不是填充，set Native Size-直接将图片设置为原始大小，并且会改变Image组件的）、（Sliced是切片模式，表示的是点9,形式的图片，这样可以不断拉伸进而不影响特定位置，也就是九宫格方式，需要选择图片素材，点击Sprite Editor进入编辑之后修改保存。
Unity中为UGUI中的Image置空
weixin_30768661的博客
08-28 987
首先需要一开始获取一张空的图片,然后进行记录,当想要给一个Image中的图片置空是时候就可以将其中的值置为其: public class ImageChange : MonoBehaviour { //获取的是原来的空图片 private Sprite FormatSprite; public Sprite ChangeSprite; pri...
unity-ugui-XCharts-master.zip
12-10
《Unity3D UGUI XCharts：打造高效直观的可视化数据展示》 Unity3D作为一款强大的游戏开发引擎，不仅在游戏领域广泛应用，还在虚拟现实、增强现实以及数据可视化等多个领域大展拳脚。UGUI（Unity Graphical User ...
Unity3d ugui-XCharts-master数据可视化.图表处理插件
10-26
自己一直在用的unity的图表处理插件，主要是用来做数据可视化的东西，功能强大，满足所有图表的需求，全部数据都可以自定义，中英文文档都有，插件结构清晰，非常适合上手，并且插件版本一直有更新，有需要的小伙伴...
unity UGUI图片任意截取和裁剪
04-07
使用ugui对图片进行任意角度，大小，缩放，以及任意位置进行截取和裁剪，还可以设置圆角或者矩形方式操作
【Unity学习笔记】——基础篇：UGUI基础Image Type
WoW的博客
07-12 2986
先放一个讲 UGUI 的博客： 宣雨松的 UGUI 研究院 Image——Image Type： ① 在做界面时常常是美工设计好UI元素，然后程序在Unity里把它们摆一摆。比如做一个Image图标，美工设计好的尺寸是100*100，那么我们在unity里创建一个image，设置它的长宽为100*100，然后放到合适位置。有没有省事的方法呢？ 看Image组件底下有一个按钮： 点
UGUI_03_补充之_Image的属性（image type这个属性simple、Sliced、tiled、filled样式详解）
谁为拨动染血的时空苍穹
08-06 7060
image的属性主要是讲image type这个属性。Simple、Sliced、Tiled、Filled 1、simple样式 单个显示，sprite将直接显示在图片控件中，默认情况下，如果图片控件的大小与sprite不一致时候，后者将经过拉伸来符合前者的大小。 2、Sliced属性。 关键字：九宫切图！ 2.1使用背景：如图所示，比如一个按钮经过拉伸以后，它的边框跟着放大缩小，就会失真了，这种...
Unity__UGUI__Image四种显示及其妙用（进度条）
lala_lzw 的代码时间
01-23 2065
img组件有四种基本的类型： 分别是simple，sliced，tilled，filled四种 首先我们跳过simple，直接开始sliced，按字面意思为切割，自然填充方式就是切割。 切割逻辑如下，将图片切割成九宫格，当你选中会出现两种情况： 该图片没有边界，以及： 上面是状态，下面是九宫格模式，先不讲参数意义，我们先看参数变化，导致的结果，通过他来引导 fill center参数 子如起名： 前面是未选，后面是选中，就是是否填充中心 pixels per unit 我将他分别设置成0.01，0..
unity 图片排序 外部读取图片并轮播
obf2018的博客
08-06 1014
在unity当中经常会出现图片过多，如果手动排序要耗费太长时间，这种情况下就可以通过脚本来完成排序功能，这种时候就可以通过在程序前添加[ExecuteInEditMode]，然后运行程序，图片就会自动排列好，并且在关闭运行后，图片不会恢复原点。 代码： using System.Collections; using System.Collections.Generic; using UnityEngine; using System; using DG.Tweening; using UnityEngine
U3d随笔之ImageType
qq_31820549的博客
01-16 1794
前言 忙碌的一天结束了，今天还是逼着自己把欠下的这一篇补上，毕竟我也不是很习惯拖欠东西，还是尽早完成的吧。今天主要介绍一下上次简单略过的image组件中的四种ImageType，其实大家完全可以自己去实验一下，就完全可以明白这四种的用途了，所以我写的这些也就是帮助大家提前看下展示的结果，不过我还是建议大家自己去试试这四种ImageType，这在我们未来的开发过程中是非常实用的。 四种ImageTy...
Unity - 搬砖日志 - UI & ParticleSystem 绘制排序的相关设置
Jave.Lin 的学习笔记
07-02 2201
开始搬砖… 在平时开发 UI 中，肯定少不了 UI 与 ParticleSystem 的层级排序 今天有同学问题，如何在 UI 中 添加 ParticleSystem 可方便的处理他们之前的层级，那么现在我们就说说如何简单的使用 以上图为例，可以看到：Hierarchy 视图中， Canvas 节点下有 三个节点，分别是：Image, Particle System, Image (1) ，对应着 红色底板，粒子特效，蓝色底板 他们的绘制顺序是：先绘制 红色底板，再 是 粒子特效，再是 蓝色底板 控
unity实现现实书籍
qq_43723148的博客
08-09 1188
项目介绍，这是一个unity阅读器的项目，模仿生活中的书籍， githup链接： Ui介绍：登录界面：整体色调为蓝色 ，背景蓝色的海底加光影，主题部分背景为圆角半透明矩形，内容有账号和密码这两个输入框，和登录和注册这个按钮，按下登录按钮就会进入我们阅读的房间，按下注册按钮就会转跳到注册界面。 阅读界面：阅读界面由一本书和三个按钮构成，书籍我采用了羊皮纸的复古风，护眼又美观。按钮分别为取消按钮（退出阅读界面），设置按钮（设置书本中字体的样式和大小），书架按钮（选择书籍）。 设置界面：设置界面我加入了相框的
UGUI源代码之Image-Sliced模式
weixin_44165354的博客
05-31 1065
UGUI源代码之Image-Sliced模式1、目的2、参考3、代码阅读4、思考5、自定义实现九宫图6、与NGUI对比7、最终效果 1、目的   本文主要以研究UGUI中九宫图的实现过程，以及考虑能否优化（效果上的优化以及性能上的优化），最终实现出来的效果还需要进一步测试才能用于实际项目中。     2、参考   本文参考Unity官方的UGUI源代码 Github地址：https://github.com/Unity-Technologies/uGUI     3、代码阅读   Image组件有4种模式，
Unity UGUI（二）Image（图像）
JPF29
01-10 2962
Image（Script） 2019 2017 Source Image 源图片 当前展示的图片，格式为Sprite（2D and UI）的图片资源 Color 颜色 图片叠加的颜色 Material 材质 图片叠加的材质 Raycast Target 光线投射目标 是否作为射线投射目标，关闭之后忽略UGUI的射线检...
unity ugui 画图
09-29
Unity UGUI是Unity引擎的用户图形界面系统，可以用于创建和呈现2D图形。使用Unity UGUI，我们可以创建各种自定义的UI元素，包括按钮、文本框、图像和面板等。 在Unity UGUI中，绘制图形可以通过Image组件实现。Image组件具有显示图像的功能，并且可以设置图像的颜色、透明度和填充模式等属性。要绘制图形，我们可以调整Image组件的属性，如Sprite、Color和Fill Amount。 首先，我们需要导入一个图像资源作为绘制的内容。可以通过将图像资源拖拽到Unity场景窗口或项目视图中来导入图像资源。然后，将图像资源拖放到需要绘制图形的UI元素上，如Image组件。 接下来，我们可以调整Image组件的属性来绘制出所需的图形。例如，通过设置Color属性可以改变图形的颜色和透明度。通过调整Fill Amount属性可以改变图形的填充的比例，可以实现例如进度条的效果。 此外，Unity UGUI还提供了许多其他的绘图组件和功能，如Text组件可以绘制文本，Raw Image组件可以显示原始图像，Slider组件可以制作滑块等。 在编写脚本时，我们可以通过调用Image组件的公共方法和属性来动态地控制图形的绘制。例如，可以使用代码来改变Image组件的Color属性，实现图形的渐变效果。还可以使用代码来使图形根据用户输入动态更新，以实现交互性。 总而言之，Unity UGUI提供了强大的绘图功能，可供开发者用于创建和呈现2D图形。它可以通过设置属性或使用脚本来实现图形的绘制和动画效果，非常灵活和方便。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值