一、图片的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 = ; this.is_running = true; // 开启倒计时的动画
}
// Update is called once per frame
void 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. 关于Unity中UI中的Mask组件、Text组件和布局

    一.Mask组件 遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片) Rect Ma ...

  2. 关于Unity中UI中的Slider,Toggle和InputField等节点

    一.Slider节点 1.创建一个Canvas 2.对Canvas进行一些初始化操作 3.创建一个Image的UI节点在Canvas下面作为子节点 4.把Image铺满整个Canvas,把宽高设置为6 ...

  3. 关于Unity中UI中的Button节点以及它的Button组件

    Button是最常用的UI节点,包含的组件有 1.Image组件 显示Button的纹理,把Image贴图拖进Image组件中后,记得点击Set Native Size,显示贴图原始大小 2.Butt ...

  4. 关于Unity中UI中的RawImage节点以及制作地图滚动效果

    一.贴图的Texture Type属性类型 Texture:会把贴图的大小转换为最相近的2的n次方,比如400X1369会转换为512X1024. Sprite 2D:是贴图的原始大小. 二.RawI ...

  5. 关于 Unity UI 中 GraphicRaycaster.Raycast 数量巨大的问题

    有时候会发现 Unity UI 非常耗时,在 Profiler 中可以轻易的看到 UI 中 的 GraphicRaycaster.Raycast 单帧调用可以成百上千,甚至好几千,帧速率前不忍赌,一关 ...

  6. 关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false

    关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false 我们在 Unity 中通过 UI 菜单创建的各种控件,比如 Text, Image 等, ...

  7. unity ui中使用onmouseover

    unity ui中鼠标移进或者移出的触发方式与2d.3d的不同,2d.3d物体使用的是onmouseover,ui使用的是OnPointerEnter.需要实现以下两个接口. public class ...

  8. COCOS2D-X中UI动画导致闪退与UI动画浅析

    前两天和同事一起查一个游戏的闪退问题,log日志显示最后挂在CCNode* ActionNode::getActionNode()函数中的首行CCNode* cNode = dynamic_cast& ...

  9. Unity项目开发过程中常见的问题,你遇到过吗?

    最近看到有朋友问一个unity游戏开发团队,需要掌握哪些知识之类的问题.事实上Unity引擎是一个很灵活的引擎,根据团队开发游戏类型的不同,对人员的要求也有差异,所以不能一概而论.但是,一些在Unit ...

随机推荐

  1. Python ljust() 方法

    描述 ljust() 方法返回一个原字符串左对齐,并使用指定字符填充至指定长度的新字符串,默认的填充字符为空格.如果指定的长度小于原字符串的长度则返回原字符串. 语法 ljust() 方法语法: S. ...

  2. Dom4j解析和sax解析xml

    xml基础知识 1)标签对大小写敏感,2)xml解析方式有两种dom解析和sax解析  3)常用的解析工具有dom的dom4j和sax的sax解析工具 4)文档声明中使用<?xml versio ...

  3. 在普通Java类里使用spring里注入的service、dao等

    版权声明:本文为博主武伟峰原创文章,转载请注明地址http://blog.csdn.net/tianyaleixiaowu. 在spring管理的web项目里,譬如Struts和spring的项目,配 ...

  4. Android开发10——Activity的跳转与传值

    Activity跳转与传值,主要是通过Intent类,Intent的作用是激活组件和附带数据. 一.Activity跳转 方法一Intent intent = new Intent(A.this, B ...

  5. linux yum源安装

    #1.安装remi源mkdir /disk1/toolscd /disk1/toolsrpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-relea ...

  6. Mybatis里Mapper映射sql文件里insert的主键返回selectKey使用

    有时候新增一条数据,知道新增成功即可,但是有时候,需要这条新增数据的主键,以便逻辑使用,再将其查询出来明显不符合要求,效率也变低了. 这时候,通过一些设置,mybatis可以将insert的数据的主键 ...

  7. ControlExtensionTest(一)

    #ifndef __CCCONTROLSCENE_H__ #define __CCCONTROLSCENE_H__ #include "cocos2d.h" #include &q ...

  8. Storm API,Tutorial,Trident,Windowing BOOKS

    http://storm.apache.org/releases/1.0.0/Trident-API-Overview.html https://stackoverflow.com/questions ...

  9. gulp-uglify的使用

    gulp教程之gulp-uglify 简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.js ...

  10. java 多线程5: java 终止线程及中断机制 (stop()、interrupt() 、interrupted()、isInterrupted())

    JAVA中有3种方式可以终止正在运行的线程 ①线程正常退出,即run()方法执行完毕了 ②使用Thread类中的stop()方法强行终止线程.但stop()方法已经过期了,不推荐使用 ③使用中断机制i ...