一、图片的Inspector面板属性

Texture Type:一般是选择sprite(2D and UI)

Sprite Mode:一般是选择Single

Packing Tag:打包的标志值,最后打包的时候会把Tag相同的所有小图打包成一个大图。不像cocos打包图集需要用到第三方软件,这里Unity会帮我们把相同Tag的图片打包成大图,非常方便。

Pixels Per Unit 100:表示100像素为1个Unity单位(1米),也可以在Scene视图中看出,640X960分辨率的图片在视图中占的网格横方向有6格多一点,竖方向9格多一点。

Pivot:表示锚点的位置,就是图片自身原点的位置(center==(0.5,0.5))  

Sprite Editor按钮,在Pivot右下角,很容易被忽视,点开会有一个面板跳出来,这里是设置图片的九宫格缩放区域,就是指定哪些部位要缩放,自己用线拉出一个井字区域。

Filter Mode:缩放模式,用默认的就好

      (1)Point(no filter):没有缩放

      (2)Bilinear:B样条线性插值,放大几倍,就是把同样的像素复制几次。

      (3)Trilinear:

注意:图片修改后一定要记得点击Apply按钮,应用设置,不然不会有改变。

二、Image节点的Image组件

1.把图片设置好后拖进Image节点的Source Image属性中,点击Set Native Size按照图片的原始大小填充Canvas。

2.Color属性可以对图片进行颜色混合,白色就是什么色也不加,原色。

3.Image Type:simple缩放的类型是拉伸

        Tiled缩放的类型是平铺,像铺地板瓷砖一样的。

        Slice缩放的类型是九宫格缩放,就像微信聊天的气泡一样,只有部分拉伸。原理就是把图片分成九宫格那样的区域,四个边角不变,只改变中间的区域,中间的横和中间的竖。

           这样缩放之后,再把四个边角贴上去,整体形状就不会改变。

        Filed指定区域显示,垂直,水平,圆周。比如一个圆,可以指定它只显示一个半圆,或者四分之一圆显示。经常用于游戏中的圆形进度条显示。

          Filed Method:(1)Radial 90 (2)Radial 180 (3)Radial 360按照角度来裁剪,一般是按照360度裁剪的。 (4)Vertical垂直裁剪 (5)Horizontal水平裁剪

          Filed Origin:开始的点,Button就是中间底部的那个点开始,不断变换圆心角来裁剪圆。            

          Filed Amount:表示裁剪的比例多少[0,1],0到1进度条是递增的,1到0进度条是递减的。

          Clock Wise:逆时针还是顺时针,勾选的时候是顺时针

三、九宫格缩放步骤

a.把要九宫格缩放的图片点击Sprite Editor按钮选择缩放区域,点击Apply

b.把设置好的图片拉到Image节点的Image组件的Sprite属性里

c.选择Image Type为Slice

d.改变Image节点的Width和Height大小,进行缩放,发现图片中间部分缩放,没有指定的边角区域不缩放

四、Filed缩放步骤

a.把设置好的图片拉到Image节点的Image组件的Sprite属性里

b.选择Image Type为Filed,这时候会多出几个属性进行选择

c.配置好新属性,并拖动Filed Amount来看效果

d.写一个脚本挂在Image节点(具体节点名字是clock_bar)上来实现圆形进度条的效果,这个效果可以用于技能冷却时间显示。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class clock_bar : MonoBehaviour {Image img;float total_time;float now_time;bool is_running = false;// Use this for initialization// 要把组件的属性绑定到编辑器,我们需要在组件类里面加上public,默认是关闭的,打钩是启动的意思public bool play_onload = false;void Start () {this.img = this.GetComponent<Image>();if (this.play_onload) {this.show_time_action(15.0f);}}// 15秒时间就到了public void show_time_action(float total_time) {this.img.fillAmount = 1.0f; // 当前的时间是满的this.total_time = total_time;this.now_time = 0;this.is_running = true; // 开启倒计时的动画
    }// Update is called once per framevoid Update () {if (!this.is_running) { // 没有开启这个倒计时的动画return;}this.now_time += Time.deltaTime; // 走过的时间float per = this.now_time / this.total_time; // 过去时间的百分比if (per > 1.0f) {per = 1.0f;}// 我们计算的是剩余时间的百分比per = 1.0f - per;this.img.fillAmount = per;if (this.now_time >= this.total_time) {this.is_running = false;}}
}

五、小技巧:

当我们想使用Image组件类定义组件实例的时候,却发现编辑器提示没有这个方法

找到Image组件在Inspector面板中的位置,点击右上角有一个问号标志,打开就会显示API,可以知道Image原来是属于UI包的,没有导入包,所以提示类不存在

using UnityEngine.UI;

关于Unity中UI中的Image节点以及它的Image组件相关推荐

  1. image加载图片 ui unity_关于Unity中UI中的Image节点以及它的Image组件

    一.图片的Inspector面板属性 Texture Type:一般是选择sprite(2D and UI) Sprite Mode:一般是选择Single Packing Tag:打包的标志值,最后 ...

  2. Unity 获取UI中不同容器里的相对坐标

    工程中要用到拖放功能,方案自然是要通用.所以写的时候拖动显示层与应用时的被拖动对象多数时候不在同一容器,也就是说本地坐标是对不上的.这就需要用到坐标转换.我的方案中将拖动时显示图标的层单独出来,所以我 ...

  3. Unity中UI界面颤抖解决方法

    Unity中UI界面颤抖解决方法 参考文章: (1)Unity中UI界面颤抖解决方法 (2)https://www.cnblogs.com/Study088/p/7290909.html 备忘一下.

  4. unity中ui界面介绍

    unity中ui界面的介绍 ui 又称gui,它比较适合做一些简单的界面. 可以在层级视图中右键单击就会出现很多选项卡,其中有一个就是ui单击就会出现如上图片中的内容 1.text: 这就是一个文本输 ...

  5. Unity VR开发中UI始终优先渲染不被物体遮挡

    Unity VR开发中UI始终优先渲染不被物体遮挡 在用Vive开发VR的时候,3DUI很容易被场景中的物体遮挡,解决办法是使用一个Shader:Overlay.shader,这个shader很好找, ...

  6. Unity读取图片并显示到UI中

    Unity读取图片并显示到UI中 方法一:将图片转换成字符串 代码 解释 效果图 方法二:将图片转换成字节数组 代码 解释 效果图 对比 在进行Unity开发时,经常会遇到将读取磁盘中图片显示到UI上 ...

  7. Unity项目中UI美术必须知道的程序要点

    原文地址:http://youxiputao.com/articles/4820 本文转载自IndieACE(游戏葡萄),是开发者DonaldW写给UI美术同事的一篇文章,原文题为<Unity项 ...

  8. unity中UI界面的一些动画实现总结

    在做unity的ui界面的时候,美术通常会实现一些动画效果.这里列举几个: 1.位置的变化 2.旋转的变化 3.缩放的变化 4.alpha的变化 5.颜色的变化 我们举一个例子: 位置的变化: (1) ...

  9. unity 线程断点时卡机_Compute Shader在Unity和UE4中的应用

    该文档为学习文档,如有错误欢迎指正. 1. D3D11 Compute Shader概述 Compute Shader 是一个通用计算 Stage.它利用了GPU的并行处理器,实现大量线程并发执行.它 ...

最新文章

  1. LeetCode简单题之学生出勤记录 I
  2. python 时间time()及日期date()函数
  3. 模型压缩、模型剪枝、模型部署
  4. 阻塞io阻塞io_Redis:RESP协议,阻塞IO 与非阻塞IO,Redis的线程模型
  5. 转载:k2pdfopt详细教程-让kindle看遍所有pdf
  6. 数组模拟单链表acwing826. 单链表
  7. Apache Druid(一)简介
  8. Polling 、Long Polling 和 WebSocket
  9. hiho一下第128周 后缀自动机二·重复旋律5
  10. 前端又省事了,Chrome直接支持lazyload延迟加载
  11. 详解 Qt 串口通信程序全程图文 (1)
  12. linux下查看mysql数据库的字段类型_系统运维|[小白技巧]如何在Linux上检查MySQL数据表的存储引擎类型...
  13. OpenCV_复制一个或多个ROI图像区域
  14. 通达信公式-涨幅限制
  15. 牛客Wannafly挑战赛10 A.小H和迷宫
  16. 小程序未来移动社交电商!
  17. 前端实训-遮罩+遮罩动画
  18. 软件测试的生命周期测试流程
  19. win7电脑无法设置默认打开方式
  20. numpy和pandas简单使用

热门文章

  1. 明明的随机数(快排)
  2. 2019年的wps计算机考试题,2019年3月计算机一级WPS模拟题及答案(2.21)
  3. IIC通信---EEPROM24C02---STMF4
  4. python安全攻防---爬虫基础--re解析数据
  5. 多叉树的前序遍历_二叉树的非递归遍历的思考
  6. 容器宿主机数据库_解决Docker容器内访问宿主机MySQL数据库服务器的问题
  7. hdu5446——Unknown Treasure
  8. uva 10539——Almost Prime Numbers
  9. Makefile用法链接
  10. 7天拿到阿里安卓岗位offer,附高频面试题合集