Xây dựng các trang bị Studio | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Studio cho phép bạn tạo các widget tùy chỉnh và sử dụng chúng như các công cụ và mở rộng của Studio. Các widget này hoạt động như các cửa sổ/bảng hiển thị tùy chỉnh trong Studio, và bạn có thể kéo chúng vào trong giao diện của bạn hoặc có chúng nổi như các cửa sổ riêng biệt.

Tạo các UIs để bán hàng

Tất cả các widget Studio bắt đầu là DockWidgetPluginGui 对象 mà bạn có thể채 đầy với GuiObjects , chẳng hạn như nhãn và nút. Để tạo một GUI trống, hãy gọ

Ghi chú rằng DockWidgetPluginGuiInfo.new() constructor mong đợi các tham số của nó trong một lần trình bày đặc biệt như sau:

#	Thuộc tính	Kiểu	Mô tả
1	Enum.InitialDockState	Danh mục	Một trong những danh sách Enum.InitialDockState danh sách.
2	InitialEnabled	Boolean	Tình trạng ban đầu được mở (hiển thị) của GUI định dạng.
3	InitialEnabledShouldOverrideRestore	Boolean	Nếu đúng, giá trị của InitialEnabled qua mặt đã lập lại trạng thái đã mở khóa trước đó.
4	FloatingXSize	Số	Chiều rộng ban đầu của GUI khi InitialDockState được đặt thành Enum.InitialDockState.Float .
5	FloatingYSize	Số	Chiều cao ban đầu của GUI khi InitialDockState được đặt thành Enum.InitialDockState.Float .
6	MinWidth	Số	Chiều rộng tối thiểu của GUI, với một số biến thể của nền tảng.
7	MinHeight	Số	Chiều thấp tối thiểu của GUI, với một số biến thể của nền tảng.


-- Tạo một mục "DockWidgetPluginGuiInfo" mới
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float,  -- Wright sẽ được khởi tạo trong panel flutting
	true,   -- Pod sẽ được kích hoạt ban đầu
	false,  -- Không đổi trạng thái đã mở được
	200,    -- Chiều rộng mặc định của cửa sổ flut
	300,    -- Chiều cao mặc định của cửa sổ flut
	150,    -- Chiều rộng tối thiểu của cửa sổ flut
	150     -- Chiều thấp nhất của cửa sổ flut
)

-- Tạo GUI mới cho ứng dụng
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

Bạn không thể sử dụng chức năng CreateDockWidgetPluginGui() trong game script. Bạn chỉ có thể gọi nó từ thanh command hoặc một script ugin .

Tùy chỉnh giao diệu người dùng

Một khi bạn tạo một trang bị, 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互动式 ImageButtons . Ví dụ, mã sau đây thêm mộ


-- Tạo GUI mới cho ứng dụng
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Tiêu đề trang bị facultative

local testButton = Instance.new("TextButton")
testButton.BorderSizePixel = 0
testButton.TextSize = 20
testButton.TextColor3 = Color3.new(1,0.2,0.4)
testButton.AnchorPoint = Vector2.new(0.5,0.5)
testButton.Size = UDim2.new(1,0,1,0)
testButton.Position = UDim2.new(0.5,0,0.5,0)
testButton.SizeConstraint = Enum.SizeConstraint.RelativeYY
testButton.Text = "Click Me"
testButton.Parent = testWidget

Lưu ý rằng bạn phải làm cha nút đến widget trong cùng một cách bạn phải làm cha bất kỳ màn hình trong kinh nghiệm nào Class.GuiObject để một Class.ScreenGui .

Để giúp bạn xây dựng các tiện ích Studio coherent, hiệu quả, Roblox cung cấp một gitHub repo có chứa các thành phần GUI với một kiểu "Studio" tiêu chuẩn. Các thành phần này bao gồm các hộp kiểm, nút radio và các trường dữ liệu có kiểu Studio, và tất cả hỗ trợ chủ đề tối.

Đổi chủ đề màu Studio

Các widget Studio hiệu quả thích hợp với Studio theme cài đặt và điều chỉnh động nhịp 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, hình ảnh và nhãn chữ của widget nên đẹp bên cạnh màu chủ đề của Studio.

Mã sau đây sử dụng một hàm syncGuiColors() được gọi là một loạt các tham chiếu đế


testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- Sinc màu nền
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- Đồng bộ màu chữ
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- Chạy chức năng 'setColors()' để đồng bộ màu sắc ban đầu
	setColors()
	-- Kết hợp 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 của các đối tượng đã cung cấp
syncGuiColors({testButton})

Tùy chỉnh chuột

Để cải thiện trải nghiệm mong đợi với các thành phần trên trang, bạn có thể thiết lập các màu chuột hệ thống


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 đây cho một danh sách các cursors chuột và những trường hợp dùng tiềm năng của chúng:

Biểu Tượng Màn Hình Chuột	Tài sản	Sử dụng Case
	rbxasset://SystemCursors/Arrow	Mặc định nhấp chuột và lựa chọn.
	rbxasset://SystemCursors/PointingHand	Giữ trên một liên kết/ nút đang hoạt động.
	rbxasset://SystemCursors/OpenHand	Bỏ chuột lên một vật phẩmcó thể kéo.
	rbxasset://SystemCursors/ClosedHand	Kéo một vật phẩm.
	rbxasset://SystemCursors/IBeam	Di chuột trên một trương mục chữ.
	rbxasset://SystemCursors/SizeNS	Di chuột trên một tay cầm thay đổi chiều cao.
	rbxasset://SystemCursors/SizeEW	Di chuột qua tay cầm thay đổi kích thước ngang.
	rbxasset://SystemCursors/SizeNESW	Di chuột qua tay cầm thay đổi kích thước.
	rbxasset://SystemCursors/SizeNWSE	Di chuột qua tay cầm thay đổi kích thước.
	rbxasset://SystemCursors/SizeAll	Di chuột qua tay cầm thay đổi hướng.
	rbxasset://SystemCursors/SplitNS	Ghim một tay vịt trên một tay cầm "chia" ngang.
	rbxasset://SystemCursors/SplitEW	Ghim một tay cầm "chia" ngang.
	rbxasset://SystemCursors/Forbidden	Nhận những vật phẩm bị khóa/bị cấm.
	rbxasset://SystemCursors/Wait	Chỉ thị một hành động đang diễn ra.
	rbxasset://SystemCursors/Busy	Chỉ báo hệ thống đang bận.
	rbxasset://SystemCursors/Cross	Bao quanh khu vực lựa chọn một chỉ dẫn.

Lưu ý rằng những hình dạng này chỉ là một khoảng cách so sánh — các cục dấu thực tế khớp nối với các cục dấu của hệ điều hành của bạn.

Thu thập sự đóng góp 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 Studio, và bạn có thể xây dựng các giao diện giống như bạn thường sẽ làm trên Roblox. Tuy nhiên, Class.UserInputService</

Một workaround cho các sự kiện nhập chung là tạo một Frame trong suốt và đổ trên toàn bộ màn hình. Các 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 trên máy chủ sẽ bắt đầu nhậ


local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- Ẩn khung
frame.Size = UDim2.new(1, 0, 1, 0)  -- Tغطي màn hình
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- Xử lý thiết bị nhập ở đây, chẳng hạn như phát hiện các nút bấm chì
end
frame.InputBegan:Connect(onInputBegan)

Tương Tác Drag-and-Drop

Sử dụng các tương tác trượt-và-thả cho các trang bị của bạn là một cách đơn giản để cải thiện dòng dữ liệu. Để tạo ra tương tác này, bạn phải xác định yếu tố để trượt, khởi động trượt, tạo mục tiêu trượt và xử lý hành động trượt.

Tạo nguồn拖

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 một nút chuột trên một thành phần UI, thường là một TextButton hoặc ImageButton trong một widget. Mẫu mã mã hóa một c


-- Tạo mục đầu tiên
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- Tạo một TextButton để khởi tạo cuộn dịch
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

Bắt đầu kéo

Khi người dùng nhấp vào TextButton , bạn có thể khởi động kéo thông qua sự kiện MouseButton1Down() , mà được kích hoạt ngay sau khi người dùng nhấp vào nút chuột.

Trong các hàm kết nối, xác định dữ liệu để kéo. Dữ liệu kiểu của dữ liệu nên được phản ánh trong MimeType chìa khóa, nội dung n


local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- Dữ liệu đang bị kéo
		MimeType = "text/plain",    -- Mô tả loại dữ liệu MIME
		Sender = "SomeDragSource",  -- Mô tả từ nơi dữ liệu xuất phát
		MouseIcon = "",             -- Nội dung hình ảnh để sử dụng cho cursor
		DragIcon = "",              -- Nội dung hình ảnh để xử lý dưới cursor trong khi kéo
		HotSpot = Vector2.zero -- Nơi trên DragIcon để trung tâm hóa cursor
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

Tạo một mục tiêu rơi

Sự kiện PluginGui.PluginDragDropped xảy ra khi người dùng thả chuột vào một cửa sổ trong khi kéo. Khi điều này xảy ra, bạn cần phải định nghĩa một mục tiêu thả như một cái thứ hai với một TextLabel để phát hiện d


local dragTargetWidget = plugin:CreateDockWidgetPluginGui("Drop Target", widgetInfo)
dragTargetWidget.Title = "Drop Target"

-- Nhãn Văn Bản này sẽ hiển thị những gì đã rơi
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

Xử lý Hành động Thả

Sau khi tạo một mục tiêu rơi, kết nối sự kiện PluginGui.PluginDragDropped trên mục tiêu rơi:


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)

Mặc dù một cuộc kéo vẫn đang diễn ra, ba sự kiện này sẽ bắt đầu khi người dùng di chuyển chuột của họ trên một trụ cột:

PluginDragEntered – bắt đầu khi người dùng giữ chuột trên một cửa sổ
PluginDragMoved – kích hoạt lặp lại khi người dùng di chuyển chuột trên một cửa sổ. Điều này hữu ích để hiển thị một tin nhắn"Drop here!".
PluginDragLeft – kích hoạt khi người dùng thoát một cửa sổ. Điều này hữu ích để ẩn một thông tin nhắn"Drop here!".