Studio cho bạn quyền tạo widget tùy chỉnh và sử dụng chúng như công cụ và mở rộng Studio .Các widget này hành xử như cửa sổ/bảng tùy chỉnh trong Studio, và bạn có thể ghim chúng vào giao diện của bạn hoặc có chúng nổi lên như các cửa sổ riêng biệt.
Tạo giao diện widget
Tất cả các widget Studio bắt đầu là DockWidgetPluginGui đối tượng mà bạn có thể lấp đầy với GuiObjects , chẳng hạn như nhãn văn bản và nút.Để tạo một GUI widget trống, hãy gọi chức năng CreateDockWidgetPluginGui(), truyền một ID và một đối tượng DockWidgetPluginGuiInfo.
Lưu ý rằng DockWidgetPluginGuiInfo.new() nhà xây dựng mong đợi các tham số của nó trong một trật tự cụ thể như sau:
| # | Tài sản | Loại | Mô tả |
|---|---|---|---|
| 1 | Enum.InitialDockState | Danh sách | Một trong những Enum.InitialDockState danh sách. |
| 2 | InitialEnabled | Boolean Hoặc | Trạng thái kích hoạt ban đầu (có thể nhìn thấy) của GUI widget. |
| 3 | InitialEnabledShouldOverrideRestore | Boolean Hoặc | Nếu đúng, giá trị của InitialEnabled sẽ ghi đè lại trạng thái bật được lưu trước đó. |
| 4 | FloatingXSize | Số nguyên | Chiều rộng ban đầu của GUI khi InitialDockState được đặt thành Enum.InitialDockState.Float . |
| 5 | FloatingYSize | Số nguyên | Chiều cao ban đầu của GUI khi InitialDockState được đặt thành Enum.InitialDockState.Float . |
| 6 | MinWidth | Số nguyên | Chiều rộng tối thiểu của GUI, với một số biến thể cụ thể của nền tảng. |
| 7 | MinHeight | Số nguyên | Chiều cao tối thiểu của GUI, với một số biến thể cụ thể của nền tảng. |
Bạn không thể sử dụng chức năng CreateDockWidgetPluginGui() trong kịch bản trò chơi. Bạn chỉ có thể gọi nó từ thanh lệnh hoặc một kịch bản plugin.
Tùy chỉnh giao diện widget
Một khi bạn tạo một widget, bạn có thể tùy chỉnh giao diện người dùng của nó với GuiObjects như thông tin TextLabels hoặc tương tác ImageButtons .Ví dụ, mã sau đây thêm một cơ bản TextButton vào cửa sổ GUI:
Để giúp bạn xây dựng các widget Studio nhất quán và hiệu quả, Roblox cung cấp một repo GitHub chứa các thành phần GUI với một cái nhìn và cảm giác "Studio" tiêu chuẩn.Chúng bao gồm các hộp kiểm, nút phát thanh và các trường nhập có phong cách Studio, và tất cả đều hỗ trợ chủ đề tối.
Thay đổi chủ đề màu của Studio
Các widget Studio hiệu quả lý tưởng phù hợp với cài đặt chủ đề Studio và điều chỉnh năng động khi chủ đề thay đổi .Ví ví dụ / trường hợp, nếu một nhà phát triển đang sử dụng chủ đề tối, màu nền của widget, hình ảnh và nhãn thông tin văn bản nên trông đẹp cạnh màu chủ đề gốc của Studio.
Việc thêm mã sau đây sử dụng chức năng syncGuiColors() được gọi ban đầu cùng với một bảng các đối tượng GUI để đồng bộBên trong chức năng, một vòng lặp chồng nhau setColors() của chức năng chạy qua các đối tượng và đồng bộ các khía cạnh cụ thể của chúng bằng cách sử dụng GetColor() với Enum.StudioStyleGuideColor enums.Chức năng này setColors() được chạy ngay lập tức để đồng bộ chủ đề Studio, sau đó nó được kết nối với sự kiện ThemeChanged để phát hiện các thay đổi chủ đề trong tương lai.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in objects do
-- Đồng bộ màu nền
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Đồng bộ màu văn bản
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Chạy chức năng 'setColors()' để ban đầu đồng bộ màu
setColors()
-- Kết nối sự kiện 'ThemeChanged' với chức năng 'setColors()'
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Chạy chức năng 'syncGuiColors()' để đồng bộ màu sắc của các đối tượng được cung cấp
syncGuiColors({testButton})
Tùy chỉnh con trỏ chuột
Để cải thiện tương tác mong đợi với các thành phần widget, bạn có thể đặt con trỏ hệ thống cụ thể cho sự kiện GUI , chẳng hạn như MouseEnter và MouseLeave.Mã sau đây minh họa cách kết nối chức năng với sự kiện MouseEnter và MouseLeave của testButton để thay đổi con trỏ chuột:
local function setCursor(cursorAsset)
plugin:GetMouse().Icon = cursorAsset
end
testButton.MouseEnter:Connect(function()
setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
setCursor("")
end)
Tham khảo bảng sau để có danh sách các con trỏ chuột và các trường hợp sử dụng tiềm năng của chúng:
| Biểu tượng con trỏ chuột | Tài sản | Sử dụng Case |
|---|---|---|
 | rbxasset://SystemCursors/Arrow | Nhấp và chọn mặc định. |
 | rbxasset://SystemCursors/PointingHand | Lướt qua một liên kết/ nút hoạt động. |
 | rbxasset://SystemCursors/OpenHand | Di chuột qua một vật phẩm có thể kéo. |
 | rbxasset://SystemCursors/ClosedHand | Kéo một vật phẩm. |
 | rbxasset://SystemCursors/IBeam | Lướt qua trong một trường văn bản. |
 | rbxasset://SystemCursors/SizeNS | Chuyển sang một tay cầm thay đổi kích thước dọc. |
 | rbxasset://SystemCursors/SizeEW | Di chuột qua tay cầm thay đổi kích thước ngang. |
 | rbxasset://SystemCursors/SizeNESW | Chuyển đổi kích thước theo chiều dài của một góc. |
 | rbxasset://SystemCursors/SizeNWSE | Chuyển đổi kích thước theo chiều dài của một góc. |
 | rbxasset://SystemCursors/SizeAll | Di chuột qua tay cầm thay đổi kích thước nhiều chiều. |
 | rbxasset://SystemCursors/SplitNS | Chuyển qua một tay cầm "chia" dọc. |
 | rbxasset://SystemCursors/SplitEW | Chuyển qua một tay cầm "chia" ngang. |
 | rbxasset://SystemCursors/Forbidden | Lướt qua một vật phẩm bị khóa/bị cấm. |
 | rbxasset://SystemCursors/Wait | Chỉ ra rằng một hành động đang diễn ra. |
 | rbxasset://SystemCursors/Busy | Chỉ ra hệ thống đang bận. |
 | rbxasset://SystemCursors/Cross | Lướt qua khu vực lựa chọn cụ thể. |
Lưu ý rằng những cái nhìn con trỏ này chỉ là một ước tính - các con trỏ thực tế phù hợp với con trỏ hệ điều hành mặc định của bạn.
Thu thập đầu vào của người dùng
Các thành phần UI như TextBox và TextButton hoạt động bình thường trong các widget của Studio, và bạn có thể xây dựng giao diện giống như bạn thường làm trên Roblox.Tuy nhiên, UserInputService và ContextActionService không hoạt động vì các dịch vụ này mong đợi cửa sổ trò chơi chính được tập trung.
Một giải pháp thay thế cho các sự kiện nhập chung là tạo một透明 Frame và thêm nó lên toàn bộ màn hình.Ví dụ mã sau đây tạo một khung, và khi người dùng nhấp vào khung, sự kiện GuiObject.InputBegan sẽ nhận được lượt nhập bàn phím trên khung cho đến khi người dùng nhấp đi:
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Ẩn khung
frame.Size = UDim2.new(1, 0, 1, 0) -- Che phủ màn hình
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Xử lý đối tượng nhập ở đây, ví dụ phát hiện bàn phím bấm
end
frame.InputBegan:Connect(onInputBegan)
Tương tác kéo và thả
Sử dụng các tương tác kéo và thả cho widget của bạn là một cách đơn giản để cải thiện dòng chảy dữ liệu.Để tạo tương tác này, bạn phải xác định thành phần để kéo, khởi động kéo, tạo mục tiêu thả và xử lý hành động thả.
Tạo nguồn kéo
Bạn có thể bắt đầu một hành động kéo bằng cách gọi Plugin:StartDrag() khi người dùng nhấn nút chuột trên một số thành phần UI, thường là TextButton hoặc ImageButton trong một widget.Ví dụ mã sau đây tạo một widget cửa sổ đơn với một nút văn bản bên trong nó.
Bắt đầu kéo
Khi người dùng nhấp vào TextButton, bạn có thể khởi động kéo qua sự kiện MouseButton1Down() mà bắt lửa ngay khi người dùng nhấn nút chuột.
Trong chức năng kết nối, xác định dữ liệu để kéo.Loại dữ liệu của dữ liệu nên được phản ánh trong chìa khóa , nội dung của cuộc kéo nên được phản ánh trong chìa khóa , và người gửi nên mô tả chính mình trong chìa khóa .Xem trang Plugin:StartDrag() để có thêm chi tiết.
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- Dữ liệu đang bị kéo
MimeType = "text/plain", -- Mô tả loại MIME của dữ liệu
Sender = "SomeDragSource", -- Mô tả nơi dữ liệu bắt nguồn
MouseIcon = "", -- Nội dung hình ảnh dùng cho con trỏ
DragIcon = "", -- Nội dung hình ảnh để hiển thị dưới con trỏ trong khi kéo
HotSpot = Vector2.zero -- Nơi trên DragIcon để trung tâm con trỏ
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
Tạo mục tiêu thả
Sự kiện PluginGui.PluginDragDropped xảy ra khi người dùng thả chuột của họ trên một cửa sổ trong khi kéo.Khi xảy ra điều này, bạn cần định nghĩa một mục tiêu thả như một widget thứ hai với một TextLabel để phát hiện các vụ rơi.
Xử lý hành động thả
Sau khi tạo một mục tiêu thả, kết nối sự kiện PluginGui.PluginDragDropped trên widget mục tiêu thả:
local function onDragDrop(dragData)
print("PluginDragDropped")
if dragData.MimeType == "text/plain" then
textLabel.Text = dragData.Data
else
textLabel.Text = dragData.MimeType
end
end
dragTargetWidget.PluginDragDropped:Connect(onDragDrop)
Trong khi kéo vẫn đang diễn ra, ba sự kiện này bắt lửa khi người dùng di chuyển con trỏ của họ qua một widget:
- PluginDragEntered – bắt lửa khi người dùng di chuột vào một cửa sổ
- PluginDragMoved – bắt lửa lặp lại khi người dùng di chuyển con trỏ của họ qua một cửa sổ. Điều này hữu ích để hiển thị thông tin nhắn"Thả ở đây!"
- PluginDragLeft – bắt lửa khi con trỏ của người dùng rời khỏi cửa sổ. Điều này hữu ích để ẩn thông tin nhắn"Thả vào đây!"