UGUI之Image使用以及技能释放CD
2015-10-02 13:54 糯米粥 阅读(1265) 评论(0) 编辑 收藏 举报顾名思义:Image就是用来显示图片的
Image中Image组件中有一个重要的熟悉:Image type
当作UI的时候。很多时候会用到图片做背景
比如你把图片放大。你会看到边框就失真了。即变得模糊了,即图片变大。边框也变大了。所以就模糊了
来看看这几个属性的不同用法:
添加一个Image。并给Source Image赋精灵,默认是Simple属性,
图片默认大小:
当图片放大,图片会变得模糊
所以这是不允许的。
一般我们不希望图片的边框跟着图片一起放大缩小,那怎么办呢。
这里就可以使用九宫切图
这时候会用到Image type的第二选项:Sliced
当选择Sliced的时候。下面会提示警告:说这个图片没有边框
首先把图片切成九宫图
选中图片,Sprite Editor
拖动绿色的点开始切图
其实也就是改变了Border
这样就分成了9格
那么这么切分成9格有什么好处呢。当我们利用它来做背景图片的时候,
1:4个角不会被拉伸
2:左右边框只会上下拉伸,
3:上下边框只会左右拉伸
只用中间那部分才会进行拉伸填充
现在设置完成后 Apply一下
在视图中看效果
记住:类型一定要是九宫格类型
Tiled类型
选择Tiled你 会发现
Tiled其实就是按照当前图片的大小进行平铺总个空间
Filled类型
Filled是用来显示当前图片的某一部分的。默认呢。是全部显示(Radial 360)
Radial 360表示以圆的方式进行切割
Fill Amout表示切割哪一部分
用这个可以做技能释放,先看看效果
可以通过鼠标单击和使用快捷键(数字1)来释放技能。它有一个冷却时间。在冷却时间内。重复单击是无效的。
那么一起来看看是怎么实现的。
skillitem是最底部的背景图片
Image是技能图片
FillImage也技能图片。设置它颜色为黑色。透明度设置办透明,
Image type设置为Filled,设置从顶部开始切割。这样就可以通过改变Fill Amount属性来实现技能释放效果
具体见图:
Text是显示数字的。用来做快捷键
为了能让skillitem对象有单击事件。所以要添加Button组件
,UI部分已经完成。接下来就是代码部分
创建一个脚本。挂在到skillitem上。注册click事件
using UnityEngine; using System.Collections; using UnityEngine.UI; public class newItem : MonoBehaviour { //冷却需要时间 public float codeTime = 5; //冷却中 bool isStart = false; //记录冷却的时间 public float timer = 0; //释放的图片 Image image; //快捷键 //这样的好处是不在代码中写死。可以直接在界面修改 public KeyCode keycode; // Use this for initialization void Start() { image = GameObject.Find("FillImage").GetComponent<Image>(); } // Update is called once per frame void Update() { if (Input.GetKeyDown(keycode)) { isStart = true; } if (isStart) { timer += Time.deltaTime; //codeTime - timer剩下的时间中codeTime中的比例 image.fillAmount = (codeTime - timer) / codeTime; //冷却时间到 if (timer >= codeTime) { image.fillAmount = 0; timer = 0; isStart = false; } } } /// <summary> /// 开始单击 /// </summary> public void BtnClick() { isStart = true; } }