开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，[点击查看活动详情]
前言
在之前的文章中，写了很多关于光照模型的东西，偏理论的居多，本篇是一个轻松的话题，使用unity引擎来制作一个王者中的技能冷却效果，为了照顾到零基础的同学，文章中的操作步骤很详尽，每一步都有截图，代码部分也加了注释，我们开始吧！
搭建场景：
- 1、在Hierarchy面板新建RawImage，将其Anchor设置为平铺整个屏幕。
- 2、点击RawImage，在Inspector面板，将Preview预览图拖拽到Texture槽中。
- 3、适当降低RawImage的透明度，方便查看效果。
- 4、在Canvas下新建Image，命名为Skill1。
- 5、将技能1的UI资源文件拖拽到SourceImage槽内。
- 6、点击Set Native Sizi使图片保持原大小显示。
- 7、在Skill1下再新建一个Image命名为Mask，作为遮罩，资源文件与Skill1保持一致。
- 8、点击Mask,在Inspector中修改器颜色值为黑色半透明。
- 9、修改Mask的ImageType为Filled，FillOrigin为Top，取消勾选ClockWise。
- 10、在Mask下新建Text组件，设置Anchors为拉伸整个Mask。
- 11、设置Text颜色为白色，删除其默认内容。
- 12、选中Skill1在Inspector面板中点击Add Component为其添加Button组件。
- 13、根据上述步骤，创建其他两个技能（采用复制替换美术资源即可）。
- 14、将三个技能参考效果图放置到合适的位置。
编码环节。
- 1、新建脚本ReleaseSkill.cs，挂载在三个技能上（可以同时选中三个，再进行拖拽）。
- 2、打开脚本编辑器,添加如下代码。
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ReleaseSkill : MonoBehaviour
{
private Button mBtnSkill; //技能释放按钮
private Image mSkillMask; //未冷却完时的遮罩
private Text mTxtSkillColdTime; //冷却时间文本
public float mColdTime = 5f; //技能冷却需要的时间,设置为public方便在Inspector面板中设置值 private float mCurrentTime; //当前剩余的时间
private float mSpeed = 0.1f;//Mask旋转的速度
private bool mStartTimeCount;//是否开始倒计时
// Use this for initialization
void Start()
{
//组件初始化，获取组件引用
mBtnSkill = GetComponent<Button>();
mSkillMask = transform.Find("Mask").GetComponent<Image>();
mTxtSkillColdTime = transform.Find("Mask/Text").GetComponent<Text>();
//初始化值
mTxtSkillColdTime.text = "";
mCurrentTime = 0f;
mSkillMask.fillAmount = 0;
//为技能释放按钮添加事件
mBtnSkill.onClick.AddListener(SkillRelease);
}
private void SkillRelease()
{
//刚点击完遮罩需要完全显示出来
mSkillMask.fillAmount = 1;
mStartTimeCount = true;
}
private void Update()
{
if (mStartTimeCount)
{
mCurrentTime += Time.deltaTime;
mSkillMask.fillAmount = (mColdTime - mCurrentTime) / mColdTime;
mTxtSkillColdTime.text = Convert.ToInt32(mColdTime - mCurrentTime).ToString();
if (mCurrentTime >= mColdTime)
{
mSkillMask.fillAmount = 0f;
mCurrentTime = 0;
mTxtSkillColdTime.text = "";
mStartTimeCount = false;
}
}
}
}
- 3、等待编译完成，分别选中Skill1，在Inspector面板中设置其冷却时间为5，Skill2为10，Skill3为15。
- 4、点击运行查看效果。
最后。
本篇介绍了如何在Unity中制作一个技能冷却的效果，在进行UI布局时要考虑到分辨率的问题，利用好UI的Anchor很重要，切记。
