前言

文章为系列文章，您需要阅读前面的文章。

动作系统功能

玩家角色攻击

角色击退

角色加速-按钮按下抬起

效果展示

思路分析

现在我们已经有了攻击和加速技能，还需要加上CD功能。

设定攻击一次CD1秒，加速技能使用后CD2秒。

我们需要CD图片随着时间减少而旋转减少，这个用图片的填充属性来实现。

计时的功能用计时器就能简单快速的实现。

功能实现

1. 按照下图创建修改对应目录内容

CD图片：图像类型选择填充，下面图片红框标记的填充效果属性。

你可以选择自己想要的效果，最后通过代码控制填充比例来实现技能CD的效果。

按照下面图片添加CD文本和图片。

2. 在之前项目基础上，添加或者修改脚本。

ActionUI_C（客户端脚本）：动作界面脚本，放在actionUI下。

--动作界面	ActionUI_C
local this={}
this.parent=script.Parent

function this.main()
	this.parent.IsVisable =true
	--按钮注册点击事件
	this.parent:WaitForChild('btn_actionList').OnClick:Connect(this.btnClick)
	this.parent:WaitForChild('actionListUI'):WaitForChild('btn_action1').OnClick:Connect(this.btnClick)
	this.parent:WaitForChild('actionListUI'):WaitForChild('btn_action2').OnClick:Connect(this.btnClick)
	this.parent:WaitForChild('actionListUI'):WaitForChild('btn_action3').OnClick:Connect(this.btnClick)
	this.btnClickConnect(this.parent:WaitForChild('btn_skill1'))
	this.btnClickConnect(this.parent:WaitForChild('btn_skill2'))
end

--点击事件函数
--btn 触发点击事件按钮
function this.btnClick(btn) 
	if btn.Name=='btn_actionList' then--动作列表按钮
		this.parent.actionListUI.IsVisable =not this.parent.actionListUI.IsVisable
	elseif btn.Parent.Name=='actionListUI' then--动作按钮
		--发送事件给服务器
		WorkSpace.event_F.playerAction:FireServer('action',btn.actionName.Value)
		this.parent.actionListUI.IsVisable =false
	end
end

--按钮按下事件函数
--btn 触发点击事件按钮
function this.OnPointerDown(btn) 
	--根据CD文本和CD图片填充来判断技能是否在CD中
	if btn.Name=='btn_skill1' and btn.t_time.Text=='' and btn.b_cd.FillAmount<=0.01 then--攻击按钮
		WorkSpace.event_F.playerAction:FireServer('skill','攻击')
		local cdTime=math.ceil(1*25)--设置1秒的cd
		local index=cdTime
		RWTimer:Create(function()
				index=index-1
				btn.t_time.Text=math.ceil(index/25)--更新CD文本和CD图片填充
				btn.b_cd.FillAmount=index/cdTime
				if  index==0 then--CD结束
					btn.t_time.Text=''
					btn.b_cd.FillAmount=0
				end
			end,0.04,cdTime):Start()
	elseif btn.Name=='btn_skill2' and btn.t_time.Text=='' and btn.b_cd.FillAmount<=0.01 then--加速按钮
		WorkSpace.event_F.playerAction:FireServer('skill','加速开始')
	end
end

--按钮抬起事件函数
--btn 触发点击事件按钮
function this.OnPointerUp(btn) 
	if btn.Name=='btn_skill2' and btn.t_time.Text=='' and btn.b_cd.FillAmount<=0.01 then--加速按钮
		WorkSpace.event_F.playerAction:FireServer('skill','加速结束')
		local cdTime=math.ceil(2*25)--设置2秒的cd
		local index=cdTime
		RWTimer:Create(function()
				index=index-1
				btn.t_time.Text=math.ceil(index/25)--更新CD文本和CD图片填充
				btn.b_cd.FillAmount=index/cdTime
				if  index==0 then--CD结束
					btn.t_time.Text=''
					btn.b_cd.FillAmount=0
				end
			end,0.04,cdTime):Start()
	end
end

--按钮按下，抬起事件注册
function this.btnClickConnect(btn)
	--按钮按下事件
	btn.OnPointerDown:Connect(function()
			this.OnPointerDown(btn)
		end)
	--按钮抬起事件
	btn.OnPointerUp:Connect(function()
			this.OnPointerUp(btn)
		end)
end


this.main()

总结

图像控件的填充可以实现非常多的效果，这里只演示了技能CD的例子，供新人了解技能CD制作和填充属性。

我这里计时功能使用的是计时器，建议大家尽量不要去使用wait，因为可能会导致逻辑各种问题。

教程技能CD是在客户端来实现，服务器端没有判断处理，会存在缺陷。

项目下载

技能CD.zip

欢迎关注我的微信公众号：土豆虎的游戏笔记