关于Unity中UI中的Image节点以及它的Image组件
一、图片的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组件的更多相关文章
- 关于Unity中UI中的Mask组件、Text组件和布局
一.Mask组件 遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片) Rect Ma ...
- 关于Unity中UI中的Slider,Toggle和InputField等节点
一.Slider节点 1.创建一个Canvas 2.对Canvas进行一些初始化操作 3.创建一个Image的UI节点在Canvas下面作为子节点 4.把Image铺满整个Canvas,把宽高设置为6 ...
- 关于Unity中UI中的Button节点以及它的Button组件
Button是最常用的UI节点,包含的组件有 1.Image组件 显示Button的纹理,把Image贴图拖进Image组件中后,记得点击Set Native Size,显示贴图原始大小 2.Butt ...
- 关于Unity中UI中的RawImage节点以及制作地图滚动效果
一.贴图的Texture Type属性类型 Texture:会把贴图的大小转换为最相近的2的n次方,比如400X1369会转换为512X1024. Sprite 2D:是贴图的原始大小. 二.RawI ...
- 关于 Unity UI 中 GraphicRaycaster.Raycast 数量巨大的问题
有时候会发现 Unity UI 非常耗时,在 Profiler 中可以轻易的看到 UI 中 的 GraphicRaycaster.Raycast 单帧调用可以成百上千,甚至好几千,帧速率前不忍赌,一关 ...
- 关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false
关于如何在 Unity 的 UI 菜单中默认创建出的控件 Raycast Target 属性默认为 false 我们在 Unity 中通过 UI 菜单创建的各种控件,比如 Text, Image 等, ...
- unity ui中使用onmouseover
unity ui中鼠标移进或者移出的触发方式与2d.3d的不同,2d.3d物体使用的是onmouseover,ui使用的是OnPointerEnter.需要实现以下两个接口. public class ...
- COCOS2D-X中UI动画导致闪退与UI动画浅析
前两天和同事一起查一个游戏的闪退问题,log日志显示最后挂在CCNode* ActionNode::getActionNode()函数中的首行CCNode* cNode = dynamic_cast& ...
- Unity项目开发过程中常见的问题,你遇到过吗?
最近看到有朋友问一个unity游戏开发团队,需要掌握哪些知识之类的问题.事实上Unity引擎是一个很灵活的引擎,根据团队开发游戏类型的不同,对人员的要求也有差异,所以不能一概而论.但是,一些在Unit ...
随机推荐
- DataGridView在Cell编辑状态响应回车键下的KeyPress/KeyDown/KeyUp事件
我们知道由于DataGridView的单元格DataGridCell处于编辑的时候,当你按Enter键,那么DataGridView是不会激发KewPress/KeyDown/KeyUp这些事件的,因 ...
- System Generator简介
前言 System generator 安装之后会在Simulin模块库中添加一些Xilinx FPGA专用的模块库,包括Basic Element,Communication,Control Log ...
- laravel5的Bcrypt加密方式对系统保存密码
laravel5文档介绍 //对 A 密码使用Bcrypt 加密 $password = Hash::make('mima'); //你也可直接使用 bcrypt 的 function $passwo ...
- unity 在Game视图中显示Gizmos
自己画的Gizmos要想在Game视图中能看到,需要把Game视图窗口右上角的"Gizmos"按钮点下去.如图: 比如,下面代码以角色的capsuleCollider中心为中心画一 ...
- linux的fork()函数具体解释 子进程复制父进程什么
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<unistd.h ...
- selenium+phantomJS爬虫,适用于登陆限制强,点触验证码等一些场景
selenium是非常出名的自己主动化測试工具,多数场景是測试project师用来做自己主动化測试,可是相同selenium能够作为基本上模拟浏览器的工具,去爬取一些基于http request不能或 ...
- 将socket通信变成并发的方式
一 利用multiprocessing模块,开启多进程,实现socket通信并发 1. 开启子进程的两种方式 import time import random from multiprocessin ...
- Solr学习之三 solr配置说明之一
严格来说,我这篇内容,主要是根据Solr in Action关于配置的说明,以及参考Solr的wiki写的算是读书笔记吧,所有的图片默认来自Solr in Action这本书. 这本书我觉得对学习So ...
- js 的登录验证
$scope.startLogin = function () { console.log('loginTimeHelper:startLogin: ' + getCurrentTime()); ef ...
- display与visibility的区别
style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用 将元素display属性设为 block,会在该元素后 ...