好看的UI界面不是单一的一种控件，它是多种不同的类型拼接而成的如：文本控件、图片控件、按钮控件等等，迷你世界Studio也为我们提供了很多控件类型给小伙伴们使用，后续还可能增加一些其它类型的控件，那么目前都有什么控件呢它们的应用场景又是哪些呢，那就让我们开始今天学习的内容吧~

 

控件类型

2DUIRoot

描述：2DUI界面的【根】节点

UIImage

描述：2D界面的【图片框】节点控件

应用场景：显示图片内容 如：武器图标、道具图标、自定义商城图标等等

属性：

继承UIComponent属性

类型	名称	描述
string	Icon	图片资源路径
EnumFillMethod	FillMethod	填充模式
EnumFillOrigin	FillOrigin	填充原点（仅在Horizontal与Vertical填充模式下适用）
bool	FillClockwise	顺时针填充（仅在Radial360模式下适用），为true时以上方中点为起点， 根据FillAmount比例顺时针渲染，否则为逆时针
float	FillAmount	填充比例（0~1），填充显示的部分占原来大小的比例
bool	IsAutoSize	自动大小。为true时，将节点大小调整为图片原本大小
float	Alpha	为1时不透明
Vector2	ResourceSize	资源大小
ScaleType	ScaleType	比例类型
Vector4	Scale9Grid	图片比例九宫格

事件：

继承UIComponent事件

函数：

继承UIComponent函数

无

示例代码：

local workspace = game:GetService("WorkSpace")
local name = SandboxNode.new('UIList', workspace)
--设置排列方式
name.ScrollType = Enum.ListLayoutType.FLOW_HORIZONTAL
name.OverflowType = Enum.OverflowType.HORIZONTAL --设置行数列数
name.LineCount = 2
name.ColumnCount = 2
--设置行距列距
name.LineGap= 50
name.ColumnGap= 50
--设置自动调整项目大小
name.AutoResizeItem= true
--设置上下居中对齐
name.HorizontalAlign= Enum.TextVAlignment.Center--设置左右向左对齐
name.VerticalAlign= Enum.TextHAlignment.Left
--设置虚拟循环列表
name.SetVirtualAndLoop

 

UIButton

描述：2D界面的【按钮】节点控件

应用场景：与玩家交互 如：点击释放技能等等

属性：

继承UIComponent属性

类型	名称	描述
string	Icon	图片资源路径
string	Title	按钮文字
int	TitleSize	按钮文本字体大小
float	DownEffectValue	按钮按下效果变化值
float	Alpha	为1时不透明
bool	OutlineEnable	按钮边框是否显示
ColorQuad	OutlineColor	按钮边框颜色
int	OutlineSize	按钮边框宽度
bool	ShadowEnable	开启按钮阴影
ColorQuad	ShadowColor	按钮阴影颜色
Vector2	ShadowOffset	按钮阴影偏移
bool	IsAutoSize	自动大小。为true时，将节点大小调整为图片原本大小
ColorQuad	IconColor	按钮图片颜色
Vector2	ResourceSize	资源尺寸
ScaleType	ScaleType	按钮图片显示类型：伸缩；裁剪
Vector4	Scale9Grid	按钮图片九宫格展示
bool	EnableDefaultSound	默认按钮音效开启

事件：

继承UIComponent事件

函数：

继承UIComponent函数

无

示例代码：

--创建ui布局local root = SandboxNode.new('UIRoot', game.WorkSpace)
root.Name = 'uiroot'
--创建按钮
local button= SandboxNode.new('UIButton', game.WorkSpace.uiroot)
button.Icon = 'ui\\mobile\\texture0\\common\\board_activity_box_white.png'
button.Title = "Button"
button.TitleSize = 36
button.DownEffect = Enum.DownEffect.ScaledEffect
button.Size = Vector2.new(100, 50)
button.Position = Vector2.new(200, 100)
button.Alpha= 1--设置开启描边
button.OutlineEnable= true--设置开启阴影
button.ShadowEnable= true

 

UIVideoImage

描述：2D界面的【视频图像】节点控件

注意：视频影像格式可以是MP4类型的

应用场景：显示视频内容 如：播放视频画面CG动画等等

属性：

继承UIComponent属性

类型	名称	描述
string	FileName	视频影像资源路径
string	Loop	循环播放

事件：

继承UIComponent事件

函数：

继承UIComponent函数

无

示例代码：

local workspace = game:GetService("WorkSpace")
local root = SandboxNode.new('UIRoot',workspace)
local npcOneVideo = SandboxNode.new('UIVideoImage', root)--设置节点名字
npcOneVideo.Name = "video"--设置大小
npcOneVideo.Size = Vector2.new(180, 130)--设置位置
npcOneVideo.Position = Vector2.new(50, 50)--设置图片路径
npcOneVideo.FileName = "res/video/login.mp4"
npcOneVideo.Loop = 1

 

UITextLable

描述：2D界面的【文本】节点控件

应用场景：显示文本内容 如：提示文本等等

属性：

继承UIComponent属性

类型	名称	描述
ColorQuad	TitleColor	字体颜色
TextVAlignment	TextVAlignment	上下对齐，有向上、中间和向下对齐
TextHAlignment	TextHAlignment	左右对齐，有向左、中间和向右对齐
int	FontSize	字体大小
string	Title	文本内容
AutoSizeType	IsAutoSize	自动调整节点大小为字体大小
bool	OutlineEnable	是否显示边框
ColorQuad	OutlineColor	边框颜色
int	OutlineSize	边框宽度
bool	ShadowEnable	是否显示阴影
ColorQuad	ShadowColor	阴影颜色
Vector2	ShadowOffset	阴影偏移值
bool	RichText	超文本

事件：

继承UIComponent事件

函数：

继承UIComponent函数

返回值类型	名称	描述
Vector2	GetTextSize ()	获取文本宽高尺寸

示例代码：

local workspace = game:GetService("WorkSpace")
local root = SandboxNode.new('UIRoot', workspace)
local label = SandboxNode.new('UITextLabel', root)
label.Title = "商店"--设置背景框
label.LineColor = ColorQuad.new(0, 0, 0, 0)--设置背景颜色
label.FillColor = ColorQuad.new(0, 0, 0, 0)--设置字体颜色
label.TitleColor = ColorQuad.new(255, 0, 0, 255)--设置位置
label.Position = Vector2.new(75,50)--设置字体大小
label.FontSize = 18--设置上下居中对齐
label.TextVAlignment = Enum.TextVAlignment.Center--设置左右向左对齐
label.TextHAlignment = Enum.TextHAlignment.Left
--设置自动调整大小
label.IsAutoSize= true
--设置开启描边
label.OutlineEnable= true--设置开启阴影
label.ShadowEnable= true--获取字体大小
local size = label:GetTextSize()

 

UITextInput

描述：2D界面的【输入框】节点控件

应用场景：获取玩家输入内容 如：发送消息、输入数量等等

属性：

继承UIComponent属性

类型	名称	描述
ColorQuad	TitleColor	字体颜色
TextVAlignment	TextVAlignment	上下对齐，有向上、中间和向下对齐
TextHAlignment	TextHAlignment	左右对齐，有向左、中间和向右对齐
int	MaxLength	限制输入文本长度
int	FontSize	字体大小
string	Title	输入的文本内容

事件：

继承UIComponent事件

事件类型	名称	描述
SBXSignal	Return(bool onReturn)	输入完成时触发

函数：

继承UIComponent函数

无

示例代码：

local workspace = game:GetService("WorkSpace")
local root= SandboxNode.new('UIRoot', workspace)
local petNameText = SandboxNode.new('UITextInput', root)--设置节点名字
petNameText.Name = "PetNameText"--设置节点大小
petNameText.Size = Vector2.new(120, 50)--设置节点位置
petNameText.Position = Vector2.new(400, 250)--设置是否可见
petNameText.Visible = true--设置输入框背景颜色
petNameText.FillColor = ColorQuad.new(97, 151, 230, 255)--设置文本上下对齐
petNameText.TextVAlignment = Enum.TextVAlignment.Center--设置文本左右对齐
petNameText.TextHAlignment = Enum.TextHAlignment.Center--设置输入内容
petNameText.Title = "宠物狼"--设置输入文本最长长度
petNameText.MaxLength = 20--设置输入文本字体大小
petNameText.FontSize = 25

 

UIList

描述：2D界面的【列表】节点组件

应用场景：遍历自定义控件组内容 如：背包、商城等等

属性：

继承UIComponent属性

类型	名称	描述
OverflowType	OverflowType	溢出处理，设置ScrollType时，需要将该属性同步修改（如设置横向流动，此处需设置HORIZONTAL）才能达到效果
ListLayoutType	ScrollType	排列方式，需要与OverflowType配套使用才有效果
int	LineCount	行数
int	ColumnCount	列数
int	LineGap	行距
int	ColumnGap	列距
TextHAlignment	HorizontalAlign	水平对齐方式
TextVAlignment	VerticalAlign	垂直对齐方式
bool	AutoResizeItem	自动调整列表项目大小，如果勾选:列表布局为单列，则列表项目的宽度自动设置为列表显示区域的宽度；列表布局为单行，则列表项目的高度自动设置为列表显示区域的高度；列表布局为水平流动，且设置了列数时，则每行内的列表项目的宽度自动调整使行宽与列表显示区域的宽度相等；列表布局为垂直流动，且设置了行数时，则每列内的项目的高度自动调整使行高与列表显示区域的高度相等；列表布局为分页，则3、4规则均适用;
Vector4	Padding	边界值

事件：

继承UIComponent事件

函数：

继承UIComponent函数

返回值类型	名称	描述
void	SetVirtual ()	设置虚拟列表，只为可视范围内的item创建实体对象（不可取消）
void	SetVirtualAndLoop ()	设置循环列表（同时也是虚拟列表），头尾相接（不可取消）
void	ScroolToTop (bool ani)	滚动到顶部（允许垂直滚动时可用）
void	ScroolToBottom (bool ani)	滚动到底部（允许垂直滚动时可用）
void	ScroolToLeft (bool ani)	滚动到最左边（允许水平滚动时可用）
void	ScroolToRight (bool ani)	滚动到最右边（允许水平滚动时可用）
void	ScroolToPercentX (float value, bool ani)	滚动到水平百分比位置（允许水平滚动时可用）
void	ScroolToPercentY (float value, bool ani)	滚动到垂直百分比位置（允许垂直滚动时可用）

示例代码：

local workspace = game:GetService("WorkSpace")
local name = SandboxNode.new('UIList', workspace)
--设置排列方式
name.ScrollType = Enum.ListLayoutType.FLOW_HORIZONTAL
name.OverflowType = Enum.OverflowType.HORIZONTAL--设置行数列数
name.LineCount = 2
name.ColumnCount = 2
--设置行距列距
name.LineGap= 50
name.ColumnGap= 50
--设置自动调整项目大小
name.AutoResizeItem= true
--设置上下居中对齐
name.HorizontalAlign= Enum.TextVAlignment.Center--设置左右向左对齐
name.VerticalAlign= Enum.TextHAlignment.Left
--设置虚拟循环列表
name.SetVirtualAndLoop

 

UIDropDownBox

描述：2D界面的【下拉框】节点组件

应用场景：选择自定义内容 如：下拉选择所需内容等等

属性：

继承UIComponent属性

类型	名称	描述
ColorQuad	TitleColor	字体颜色
int	TitleFontSize	文本字体大小
int	SelectedIndex	选中的下标

事件：

继承UIComponent事件

函数：

继承UIComponent函数

返回值类型	名称	描述
string	GetValue ()	获取下拉框选中的内容
string	GetItem ()	获取下拉框某item项
void	RemoveItem (int index)	通过下标移除下拉框中某项item
int	AddItemWithValue (string item, string value)	给下拉框新增一项item
int	AddItem (string item)	给下拉框添加一项item
string	GetItemByIndex (int index)	通过下标获取下拉框中某项item的key
string	GetValueByIndex (int index)	通过下标获取下拉框中某项item的value

示例代码：

local root = SandboxNode.new('UIRoot', game.WorkSpace)
root.Name = 'uiroot'
--创建UI
local uiDropDownBox = SandboxNode.new('UIDropDownBox', game.WorkSpace.uiroot)
uiDropDownBox.TitleColor = ColorQuad.New(255,255,255)
uiDropDownBox.TitleFontSize = 25
--选中的下标
uiDropDownBox.SelectedIndex = 1
--添加6个内容内容
for i =1, 6 do
uiDropDownBox.AddItem(tostring(i))
end

 

UIModelView

描述：2D界面的【3D模型】节点组件

注意：在UI中展示3D模型，将模型节点（如ModelObject）放置到子节点即可（注：模型节点是在ModelView的场景中展示，节点自身的位置，转角等属性也会生效）

应用场景：3D模型 如：展示武器、装备等等

属性：

继承UIComponent属性

类型	名称	描述
bool	CanCameraMove	是否启用视角拖拽（拖拽UI时相机围绕模型旋转）
int	CameraDist	相机与原点距离
Button	ResetCameraBtn	重置相机按钮
Vector3	LookAtPosition	锁定相机位置
bool	CameraLockX	视角拖拽时是否锁定X轴方向
bool	CameraLockY	视角拖拽时是否锁定Y轴方向
float	CameraPitch	相机俯仰角
float	CameraYaw	相机偏航角

事件：

继承UIComponent事件

函数：

继承UIComponent函数

返回值类型	名称	描述
void	ResetCamera ()	重置相机

示例代码：

--创建ui布局
local root = SandboxNode.new('UIRoot', game.WorkSpace)
root.Name = 'uiroot'
--创建UI
local ModelView = SandboxNode.new('UIModelView', game.WorkSpace.uiroot)
ModelView.Size = Vector2.new(500, 500)
ModelView.Position = Vector2.new(500, 500)
ModelView.CanCameraMove = true
ModelView.CameraDist = 700
local newModel= SandboxNode.new('Model')
newModel.Name = "my_model"
newModel.ModelId = "sandboxSysId://entity/100011/body.omod"
newModel.Position = Vector3.new(0,0,0)
--设置父节点 将模型节点添加到ModelView中
newModel:SetParent(ModelView)

 

UIMovieClip

描述：2D界面的【电影剪辑】节点组件

应用场景：电影剪辑 如：剪辑设置Gif内容等等

属性：

继承UIComponent属性

类型	名称	描述
string	GifPath	Gif资源路径
bool	AutoSize	自适应尺寸
bool	IsPlaying	是否正在播放
int	CilpFrame	剪辑尺寸
float	RepeatDelay	重复延迟
float	DelayPer	延迟时间
bool	Swing	振幅

事件：

继承UIComponent事件

函数：

继承UIComponent函数

返回值类型	名称	描述
void	ClearTex ()	清空资源
void	AddTex (string value)	添加资源

示例代码：

local root = SandboxNode.new('UIRoot', game.WorkSpace)
root.Name = 'uiroot'
--创建UI
local uiMovieClip = SandboxNode.new('UIMovieClip', game.WorkSpace.uiroot)
uiMovieClip.GifPath = "RainbowId&filetype=5://188987641847353344"
uiMovieClip.IsPlaying = true
uiMovieClip.CilpFrame = 1
uiMovieClip.RepeatDelay = 0
uiMovieClip.DelayPer = 0
uiMovieClip.Swing = true

 

3DUIBilllboard

描述：3D场景界面【容器】节点组件

当希望创建角色头顶生命栏或人物名等自定义 3D GUI 时，请参考下列代码：

使用 3DUIBillboard 作为容器，而不使用 StarterGui。

示例代码：

game.getService("Players").LocalPlayer.Character and game.getService("Players").Character:findFirstChild('Head')
script.Parent.Adornee = game.getService("Players").LocalPlayer.Character.Head
script.Parent.TextLabel.Text = string.reverse(game.getService("Players").LocalPlayer.Name)

 

详解：

在WorkSpace中创建一个 3DUIBillboard （同步显示给其它玩家），并在其中放置 UITextLabel 和 LocalScript。3DUIBillboard Size2D 属性应设置为 {1, 1}。

在我们的脚本中可以用到先前提过的一些 LocalScript 快捷方式。想要获得 Player 目录时，不必使用 script.Parent.Parent.Parent，只需要用 game.getService("Players").LocalPlayer 即可。我们等到 LocalPlayer（正在使用 StarterGui 的用户）拥有 Character 和 Head 后，把 3DUIBillboard 的 Adornee 设置为该 Head对象。 下面，我们设置 UITextLabel，将其文本设置为 LocalPlayer 新文本的反向。

这样做的结果是，反转过来的名字会在头顶出现。注意，所有的 StarterGui 都是本地的，只会出现在正在使用 StarterGui 的 Player 处。因此，悬浮在自己头顶上的文本，只有自己可见。其他玩家会看到他们的名字反向悬浮在其头顶，但无法看到其他人的。

注意：StarterGui中创建3DUI会不生效。

UIComponent

描述：UI约束和布局类别的基类，2DUI控件都继承于此如属性、函数、事件等，继承于它的控件也都获得了此属性函数以及事件

应用场景：自定义控件 如：自定义内容等等

UIComponent属性：

类型	名称	描述
Vector2	Size	UI节点像素和尺寸大小
Vector2	Scale	UI节点缩放倍数
float	Rotation	UI节点旋转度数
Vector2	Position	UI节点坐标
Vector2	Pivot	UI节点锚点（0~1），（0.5,0.5）为中点
bool	IsKeepPosWhenPivotChange	更新锚点时是否保持位置不变
bool	IsNotifyEventStop	是否将触摸事件传递给父节点（为true时不传递）
ColorQuad	LineColor	UI节点边线颜色设置
ColorQuad	FillColor	UI节点填充颜色设置
int	LineSize	UI节点边线像素和尺寸大小
bool	ClickPass	是否将点击事件穿透给场景
EnumLayoutHRelation	LayoutHRelation	水平关联方式，包括左关联、中线关联和右关联。设置后，当父节点（若父节点为UIRoot则为屏幕）变化时，UI与关联位置的相对距离将保持不变
EnumLayoutVRelation	LayoutVRelation	垂直关联方式，包括上关联、中线关联和下关联。设置后，当父节点（若父节点为UIRoot则为屏幕）变化时，UI与关联位置的相对距离将保持不变
EnumLayoutSizeRelation	LayoutSizeRelation	宽高关联，包括无关联，宽关联，高关联和全关联，当父节点宽高改变时，UI宽高随之变化
Button	SetFullViewSize	设置全视图大小
bool	Active	是否激活

UIComponent函数：

返回值类型	名称	描述
Vector2	GetGlobalPos ()	获取UI的全局位置

UIComponent控件事件

事件名称	含义
RollOver	拖住滑动或鼠标滚轮结束
RollOut	拖住滑动或鼠标滚轮超出UI布局范围
TouchBegin	触摸事件开始
TouchEnd	触摸事件结束
TouchMove	触摸移动
Click	点击事件