Roblox GUI部分总结

GUI部分总结

位置

GUI一般放在StarterGui 对象下面，作为 StarterGui 的子项 ScreenGui 的子项。

特殊情况：放在StarterPlayer下面的StarterPlayerScripts里，一般游戏中对摄像机的控制就放在这里。

注意：必须将该脚本的父级设定为PlayerGui，这样才会在游戏开始后显示出GUI（StarterGui 下的会默认这样做）

ScreenGui.Parent = Player:WaitForChild("PlayerGui")

形式

GUI都一般放在 ScreenGui下面，这就是一个覆盖整个玩家屏幕宽度和高度的空白画布。要想不局限于屏幕的效果，如商店招牌，需要使用SurfaceGui

常用的有

如果GUI较多，需要使用Frame框架来更方便地控制他们。

Frame本身没有任何内容，作用是控制子级的Size和Position。子级的Size和Position都是相对Frame而言，这样可以实现GUI的分区操控。

属性

通用属性

• AnchorPoint，锚点

即Position位置所对应的点，默认在GUI的左上角
如果GUI需要放在屏幕偏下面或右面的位置，修改锚点会使GUI更好控制

• BackgroundColor3，背景色
• BackgroundTransparency，背景的透明度
• BorderColor3，边框的颜色
• BorderSizePixel，边框的像素宽度，不要需可以设置为1
• Position，位置，是UDim2变量

由X 水平位置和Y 垂直位置来设置。
Scale 是宽度或高度的百分比，用来设置相对长度。
因为在Roblox中，屏幕的尺寸不尽然相同，所以设置比例可以保证元素在大部分时候显示正常。
Offset偏移值，是移动的像素数量，用来设置绝对长度，可以为负

• Size，大小，和Position设置相似
• ZIndex，层数，默认是1。数字越高层数越高，显示越靠前

文本属性

TextLabel和TextButton里面使用

• Font，字体

• LineHeight，行之间的间距

• Text，呈现的字符串

• TextBounds，文本的像素大小

• TextColor3，文本的颜色

• TextSize，文本的行高（以像素为单位）

• TextStrokeColor3，确定文本轮廓的颜色（轮廓线）

• TextStrokeTransparency，确定文本轮廓的透明度，不需要就设为1

• TextTransparency，文本的透明度

注意：Roblox里面实现文本的换行比较麻烦，简单的方法是在txt文件中写好再粘贴进来

图像属性

适用于ImageLabel和ImageButton
首先游戏发布至 Roblox ，然后在游戏资源管理器中选择导入，来上传图片。
上传后，在游戏资源管理器中找到图片，右键点击 将ID复制到剪贴板，然后粘贴到Image属性中，这样就有了图片

按钮

一种是TextButton，一种是ImageButton
最简单的操作是通过LocalScript本地脚本来实现的，如实现点击按钮切换图像的效果：
在ImageButton下面新建LocalScript，代码如下

local button = script.Parent
local toggled = false
 
local function onButtonActivated()
	if toggled == false then
		button.Image = "rbxgameasset://Images/ImageButtonActivated"
		toggled = true
	else		
		button.Image = "rbxgameasset://Images/ImageButtonNormal"
		toggled = false
	end
end
 
button.Activated:Connect(onButtonActivated)

ScrollingFrame 滚动条

ScrollingFrame类似于Frame，但会有一个占据一部分Size的滚动条
滚动条本身由三个图像组成：顶部、中间和底部，中间的图形会进行拉伸
默认为垂直滚动条，水平滚动条通过修改CanvasSize来实现（只有X没有Y就是水平滚动条）

参考：创建滚动框架 GUI.

渐变效果（补间）

用于实现GUI的平缓变化

• TweenPosition，平稳地将GUI移至endPosition
  各参数（不需要更改的参数可以用nil来代替）：

   - UDim2 endPosition，目的地
   	- 格式： (number xScale, number xOffset, number yScale, number yOffset)
   - EasingDirection easingDirection，方向，有三种，默认为1
   	- 缓入0	渐变开始时速度较慢，越接近结束速度越快
   	- 缓出1	渐变开始时速度较快，越接近结束速度越慢
   	- 缓入缓出2	缓入和缓出存在于同一渐变当中，开始时为缓入，从半程起往后缓出生效
   	直观化参见：https://developer.roblox.com/zh-cn/api-reference/enum/EasingDirection
   - EasingStyle easingStyle，风格，有10种，默认为Quad
   	直观化参见：https://developer.roblox.com/zh-cn/api-reference/enum/EasingStyle
   - float time，完成的时间，默认1s
   - bool override，默认false，是否会覆盖正在进行的补间
   - Function callback
  

• TweenSize ( UDim2 endSize , EasingDirection easingDirection ,
  EasingStyle easingStyle , float time , bool override , Function
  callback ) 平滑地将GUI调整为新的大小

• TweenSizeAndPosition ( UDim2 endSize , UDim2 endPosition ,
  EasingDirection easingDirection , EasingStyle easingStyle , float
  time , bool override , Function callback ) 将GUI平滑地移动和缩放到新的大小和位置

颜色渐变效果

原理：使用TweenService来实现
ScreenGui 对象上插入一个 Frame，然后建立一个LocalScript：

local TweenService = game:GetService("TweenService")
 
local frame = script.Parent
frame.Position = UDim2.new(0, 20, 0, 20)
frame.BorderSizePixel = 0
frame.Size = UDim2.new(0, 400, 0, 30)
frame.BackgroundColor3 = Color3.fromRGB(0, 255, 75) -- 开始时将背景设置为绿色
 
local newSize = UDim2.new(0, frame.Size.X.Offset*0.5, 0, frame.Size.Y.Offset) -- 目标尺寸
local newColor = Color3.fromRGB(255, 255, 50) -- 目标背景颜色

 -- 使用TweenService的效果
local tweenInfo = TweenInfo.new(1.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out)
local tween = TweenService:Create(frame, tweenInfo, {Size=newSize, BackgroundColor3=newColor})
 
wait(2)
 
tween:Play() -- 播放渐变

自定义加载屏幕

默认情况下，Roblox 提供加载屏幕，但可以创建自定义加载屏幕以进一步个性化
代码放置在 ReplicatedFirst 的 LocalScript 中：

-- 用图片自定义一开始的加载屏幕
local PlayerGui = game.Players.LocalPlayer:WaitForChild("PlayerGui")
PlayerGui:SetTopbarTransparency(0) -- 隐藏可能在其后面加载的任何几何体

local screen = Instance.new("ScreenGui")
screen.Parent = PlayerGui

local ImageLabel = Instance.new("ImageLabel") -- 使用图片
ImageLabel.Size = UDim2.new(1,0,1,0) 
ImageLabel.Position = UDim2.new(0.5,0,0.5,0)
ImageLabel.AnchorPoint = Vector2.new(0.5,0.5) -- 锚点在中间
ImageLabel.Image = "rbxassetid://4950121356" -- 使用的图片
ImageLabel.Parent = screen

script.Parent:RemoveDefaultLoadingScreen()

ImageLabel:TweenSize(UDim2.new(1.2,0,1.2,0),1,4,10)-- 将图片变为新的大小

local start = tick() -- tick()表示当前时间，单位秒
while tick() - start < 6 do -- 等待6秒
	wait(0.3)
end

screen.Parent = nil -- 销毁

参考：自定义加载屏幕

Events

Activated 事件对于按钮来说最为可靠，默认情况下适用于鼠标、触摸屏等。例子参考上面

其他：
MouseButton1Click ( )，鼠标点击一下来激活
MouseEnter ( int x , int y )，鼠标进入，模拟滑动效果
。。。

远程事件

远程事件旨在提供服务器和客户端之间的单向消息
可从客户端定向到服务器，从服务器定向到特定客户端，或从服务器定向到所有客户端。

RemoteEvent 对象本身必须位于两者均可查看的场景。
建议在ReplicatedStorageTool下面新建RemoteEvent，比较多的话放在一个Events文件夹中

local Events = game.ReplicatedStorage.Events
local EventA = Events.XXXX

GUI的脚本是LocalScript，在客户端实现。

客户端到服务器

通过FireServer函数来触发
客户端：

remoteEvent:FireServer()

服务器：

remoteEvent.OnServerEvent:connect(执行的函数)

服务器到客户端

两种方式：向单个客户端 / 同时向每个客户端 发送消息

• 向单个客户端发送消息，需要带参数：

remoteEvent:FireClient(Player)

或者

remoteEvent:FireClient(player, Players.MaxPlayers, Players.RespawnTime)

• 要向所有客户端发送消息，不用传递Player物体：

RemoteEvent:FireAllClients()

要在客户端上监听消息，LocalScript 需将函数连接至 RemoteEvent 的 OnClientEvent事件：

RemoteEvent.OnClientEvent:connect(执行的函数)

客户端到客户端

必须通过服务器中转