如何在Reworld里制作动态UI

在制作游戏的过程中，UI一般用与玩家与游戏间的交互行为，例如新手引导，剧情介绍，各种控制按钮等。在实现了UI的功能性之后，还需要考虑UI的美观性，这时如果给UI加上一个动效，既可以带来趣味性，也可以给玩家一个小惊喜，游玩体验会有显著的提升。本文将向大家介绍几种常见动态UI的制作方法，以及在游戏中具体的应用。

效果—逐字弹出

制作方法

在界面初始化下创建一个2D容器界面，重命名为逐字弹出，在2D容器界面下创建一个文本控件，调整宽高均为1400，400。在2D容器界面下创建一个客户端脚本，如下图所示：

编写客户端脚本如下：

local tab = {
	[1] = "如何制作一个逐字弹出的动态UI",
} --创建一个表，表内输入想要显示的文本

for k,v in ipairs(tab) do  --循环遍历tab表
	for i = -1,string.len(v),3 do --返回所给字符串的长度
		script.Parent.文本控件.Text = string.sub(v,0,i) --返回字符串v从第0个到第i个的字符的子串，赋值给2D容器界面下的文本控件的文本
		wait(.05)
	end
	wait(1)
end

游戏应用

逐字弹出的动态UI在游戏中可以应用于人物的对话框，或者剧情介绍，逐字弹出的效果比直接显示对话内容更加真实，仿佛真的是NPC在和你对话一样。

             《不想做作业》中逐字弹出的人物对话框UI     

             《沙之歌》中直接弹出的静态人物对话框UI     

效果—放大

制作方法

在界面初始化下创建一个2D容器界面，重命名为放大，调整宽高均为1400，400，调整缩放比例为（0，0，0）在2D容器界面下创建一个客户端脚本，如下图所示：

编写客户端脚本如下：

local bigui = script.Parent --找脚本的父级—UI
local tweenInfo =  --定义一个tween动画
{
    duration = 1000,--时长/ms
    repeatCount = 1,--重复次数，-1是无限
    easing = "inSine",--动画播放类型
    yoyo = true,--动画循环类型
}

local action = {
	LocalScale = Vector3.New(1,1,1) --将UI的缩放比例调整为（1，1，1）
    }
local tween = TweenServiceJS:CreateTween(bigui, tweenInfo,action)
tween:Play() --播放tween动画

游戏应用

放大的动态UI在游戏中可以应用于一些需要暂时显示的游戏提示，例如游戏的检查点，特殊物品的介绍，放大弹出的动态UI更能吸引玩家的眼球，让玩家注意到提示信息。

             《不想做作业》中放大弹出的检查点UI          

             《超市奇幻冒险》中直接弹出的静态检查点UI     

效果—淡出

制作方法

在界面初始化下创建一个2D容器界面，重命名为淡出，在2D容器界面下创建一个文本控件，调整宽高均为1400，400，颜色透明度均调整为0。在文本控件下创建一个客户端脚本，如下图所示：

编写客户端脚本如下：

local textui = script.Parent --找到脚本的父级——文本控件
local tweenInfo = --定义一个tween动画
{
    duration = 1800,--时长/ms
    repeatCount = 1,--重复次数，-1是无限
    easing = "inSine",--动画播放类型
    yoyo = true,--动画循环类型
}

local action = {
	TextColorA = 1 --修改文本控件的文本颜色透明度为1
    }
local tween = TweenServiceJS:CreateTween(textui, tweenInfo,action)
tween:Play() --播放tween动画

游戏应用

淡出的动态UI在游戏中可以应用一些文本的提示，例如交代游戏的背景，地点，也可以把UI全屏覆盖后作为游戏的转场动画。

             《沙之歌》中交代游戏地点的淡出式UI               

             《沙之歌》中游戏开幕转场的淡出式UI     

效果—填充

制作方法

在界面初始化下创建一个2D容器界面，重命名为填充，把图像控件的填充方式修改为Radial360，在2D容器界面下创建一个客户端脚本，如下图所示：

4.png编写客户端脚本如下：

local tianchong = script.Parent --找脚本的父级—UI
local tweenInfo =  --定义一个tween动画
{
    duration = 1500,--时长/ms
    repeatCount = 1,--重复次数，-1是无限
    easing = "inSine",--动画播放类型
    yoyo = true,--动画循环类型
}

local action = {
	FillAmount = 0 --将图像控件的填充比例修改为0
    }
local tween = TweenServiceJS:CreateTween(tianchong, tweenInfo,action)
tween:Play() --播放tween动画

游戏应用

填充的动态UI在游戏中可以应用一些图像控件的提示，例如技能的CD动画，枪械的充能装弹动画，也可以把UI全屏覆盖后作为游戏的转场动画。

             《地宫挑战》中显示技能CD的填充式UI          

              《超市奇幻冒险》中用于游戏转场的填充式UI       

效果—旋转

制作方法

在界面初始化下创建一个2D容器界面，重命名为旋转，在2D容器界面下创建一个客户端脚本，如下图所示：

编写客户端脚本如下：

local zhuan = script.Parent --找到脚本的父级—UI
local tweenInfo = --定义一个tween动画
{
    duration = 1000,--时长/ms
    repeatCount = 1,--重复次数，-1是无限
    easing = "inSine",--动画播放类型
    yoyo = true,--动画循环类型
}

local action = {
	LocalEulerAngles = Vector3.New(0,180,0) --修改UI的旋转角度
    }
local tween = TweenServiceJS:CreateTween(zhuan, tweenInfo,action)
tween:Play() --播放tween动画

游戏应用

旋转的动态UI在游戏中可以做一些旋转的UI动画，例如转动的道具展示界面，转动的卷轴动画等，也可以把UI全屏覆盖后作为游戏的转场动画。

效果—抖动

制作方法

在界面初始化下创建一个2D容器界面，重命名为抖动，在2D容器界面下创建一个客户端脚本，如下图所示：

6.png编写客户端脚本如下：

local dou = script.Parent --找脚本的父级—UI
local tweenInfo =  --定义一个tween动画
{
    duration = 50,--时长/ms
    repeatCount = -1,--重复次数，-1是无限
    easing = "inSine",--动画播放类型
    yoyo = true,--动画循环类型
}

local action = {
	AnchoredPosition = Vector2.New(3,0) --将UI的相对坐标调整为（3，0）
    }
local tween = TweenServiceJS:CreateTween(dou, tweenInfo,action)
tween:Play() --播放tween动画

游戏应用

旋转的动态UI在游戏中可以为按钮做一些抖动的特效，例如将鼠标移动到按钮上时，按钮就会开始抖动。