빌드 스튜디오 위젯 생성

Studio는 사용자 지정 위젯 을 만들고 Studio 도구와 확장으로 사용할 수 있는 권한을 제공합니다.이 위젯은 Studio에서 사용자 지정 창/패널로 동작하며, 인터페이스 내에 고정하거나 별도의 창으로 떠둘 수 있습니다.

위젯 UI 생성

모든 스튜디오 위젯은 텍스트 레이블 및 버튼과 같은 개체로 시작하며, 채울 수 있습니다.빈 위젯 GUI를 생성하려면 CreateDockWidgetPluginGui() 함수를 호출하여 ID와 DockWidgetPluginGuiInfo 개체를 전달하십시오.

DockWidgetPluginGuiInfo.new() 생성자는 매개 변수를 다음과 같은 순서로 기대합니다: 특정 순서에서

#	속성	유형	설명
1	Enum.InitialDockState	열거형	열거형 Enum.InitialDockState 중 하나.
2	InitialEnabled	부울	위젯 GUI의 초기 활성(표시) 상태.
3	InitialEnabledShouldOverrideRestore	부울	참이면 InitialEnabled 의 값이 이전에 저장된 활성화된 상태를 재정의합니다.
4	FloatingXSize	정수	InitialDockState 가 Enum.InitialDockState.Float 설정되었을 때 GUI의 초기 너비.
5	FloatingYSize	정수	InitialDockState 가 Enum.InitialDockState.Float 설정되었을 때 GUI의 초기 높이.
6	MinWidth	정수	일부 플랫폼 특정 변형이 있는 GUI의 최소 너비.
7	MinHeight	정수	일부 플랫폼 특정 변형이 있는 GUI의 최소 높이.


-- 새로운 "DockWidgetPluginGuiInfo" 개체 생성
local widgetInfo = DockWidgetPluginGuiInfo.new(
	Enum.InitialDockState.Float, -- 위젯은 부동 패널에서 초기화됩니다
	true,   -- 위젯이 처음에 활성화됩니다
	false,  -- 이전에 활성화된 상태를 재정의하지 마십시오
	200,    -- 부동 창의 기본 너비
	300,    -- 부동 창의 기본 높이
	150,    -- 부동 창의 최소 너비
	150     -- 부동 창의 최소 높이
)

-- 새로운 위젯 GUI 생성
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- Optional widget title

게임 스크립트에서 CreateDockWidgetPluginGui() 함수를 사용할 수 없습니다. 명령줄이나 플러그인 스크립트에서만 호출할 수 있습니다.

위젯 UI 사용자 정의

위젯을 만든 후, 정보 제공 또는 상호 작용 과 같은 사용자 인터페이스를 사용자 지정할 수 있습니다.예를 들어 다음 코드는 GUI 창에 기본 TextButton를 추가합니다:


-- 새로운 위젯 GUI 생성
local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
testWidget.Title = "Test Widget"  -- 선택적 위젯 제목

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

경험 내 화면을 부모로 지정해야 하는 것과 동일한 방식으로 버튼을 위젯에 부모로 지정해야 합니다(경험 내 화면을 부모로 지정해야 하는 것과 동일한 방식으로 버튼을 위젯에 부모로 지정해야 합니다).

일관되고 효과적인 Studio 위젯을 빌드하는 데 도움이 되도록 Roblox는 표준 "Studio" 모양과 느낌의 GUI 요소가 포함된 GitHub 리포지토리를 제공합니다.여기에는 Studio 스타일의 확인란, 라디오 버튼 및 입력 필드가 포함되며, 모두 어두운 테마를 지원합니다.

스튜디오 색상 테마 변경

효과적인 스튜디오 위젯은 스튜디오 테마 설정과 일치하고 테마가 변경될 때 동적으로 조정합니다.예를 인스턴스, 개발자가 어두운 테마를 사용하는 경우 위젯의 배경색, 이미지 및 텍스트 레이블은 Studio의 기본 테마 색과 함께 아름답게 보여야 합니다.

다음 코드 추가는 초기에 GUI 개체 테이블과 함께 호출되는 syncGuiColors() 함수를 사용하여 동기화합니다.함수 내에서 중첩된 setColors() 함수는 개체를 통해 순환하고 GetColor() 및 Enum.StudioStyleGuideColor 열거형을 사용하여 특정 측면을 동기화합니다.이 setColors() 함수는 Studio 테마를 동기화하기 위해 즉시 실행되고, 나중에 테마 변경을 감지하기 위해 ThemeChanged 이벤트에 연결됩니다.


testButton.Parent = testWidget

local function syncGuiColors(objects)
	local function setColors()
		for _, guiObject in objects do
			-- 배경색 동기화
			guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
			-- 텍스트 색 동기화
			guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
		end
	end
	-- 색상을 초기 동기화하기 위해 'setColors()' 함수 실행
	setColors()
	-- 연결 '테마 변경' 이벤트를 'setColors()' 함수에
	settings().Studio.ThemeChanged:Connect(setColors)
end

-- 제공된 개체의 색상을 동기화하기 위해 'syncGuiColors()' 함수 실행
syncGuiColors({testButton})

커스터마이즈 마우스 커서

위젯 요소와의 예상 상호 작용을 개선하기 위해, 시스템 특정 마우스 커서 를 GUI 이벤트(예: MouseEnter 및 MouseLeave)로 설정할 수 있습니다.다음 코드는 함수를 MouseEnter 및 MouseLeave 이벤트의 testButton에 연결하여 마우스 커서를 변경하는 방법을 보여줍니다:


local function setCursor(cursorAsset)
	plugin:GetMouse().Icon = cursorAsset
end

testButton.MouseEnter:Connect(function()
	setCursor("rbxasset://SystemCursors/PointingHand")
end)
testButton.MouseLeave:Connect(function()
	setCursor("")
end)

다음 표를 참조하여 마우스 커서 목록과 사용 가능한 사례를 확인하십시오:

마우스 커서 아이콘	자산	케이스 사용
	rbxasset://SystemCursors/Arrow	기본 클릭 및 선택.
	rbxasset://SystemCursors/PointingHand	활성 링크/버튼을 가리키는 중입니다.
	rbxasset://SystemCursors/OpenHand	드래그 가능한 아이템가리키는 중입니다.
	rbxasset://SystemCursors/ClosedHand	아이템을 드래그하는 중입니다.
	rbxasset://SystemCursors/IBeam	텍스트 필드에서 호버링합니다.
	rbxasset://SystemCursors/SizeNS	세로 크기 조정 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SizeEW	가로 크기 조정 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SizeNESW	모서리 크기 조정 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SizeNWSE	모서리 크기 조정 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SizeAll	다방향 크기 조정 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SplitNS	수직 "분할" 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/SplitEW	수평 "분할" 핸들을 가리키는 중입니다.
	rbxasset://SystemCursors/Forbidden	잠긴/금지된 아이템가리키는 중입니다.
	rbxasset://SystemCursors/Wait	작업이 진행 중임을 나타냅니다.
	rbxasset://SystemCursors/Busy	시스템이 바쁜 것을 나타냅니다.
	rbxasset://SystemCursors/Cross	피인포인트 선택 영역에 마우스를 이동합니다.

이러한 커서 모양은 대략적인 것일 뿐입니다. 실제 커서는 기본 운영 체제 커서와 일치합니다.

사용자 입력 수집

UI 요소인 TextBox 및 TextButton는 Studio 위젯에서 정상적으로 작동하며 Roblox에서 일반적으로 수행하는 것과 동일한 인터페이스를 빌드할 수 있습니다.그러나, UserInputService 및 ContextActionService 서비스는 주 게임 창이 포커스에 있을 것으로 예상되기 때문에 작동하지 않습니다.

일반 입력 이벤트에 대한 한 해결책은 투명한 Frame를 만들고 전체 화면에 겹쳐 배치하는 것입니다.다음 코드 샘플은 프레임을 생성하고, 사용자가 프레임을 클릭하면 GuiObject.InputBegan 이벤트가 사용자가 클릭할 때까지 프레임에서 키보드 입력을 캡처합니다:


local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1  -- 프레임 숨기기
frame.Size = UDim2.new(1, 0, 1, 0)  -- 화면 덮기
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget

local function onInputBegan(inputObject)
	-- 입력 개체를 여기에서 처리하여 예를 들어 키 누르기를 감지합니다
end
frame.InputBegan:Connect(onInputBegan)

끌어서 놓기 상호 작용

드래그 앤 드롭 상호 작용을 위젯에 사용하는 것은 데이터 흐름을 개선하는 간단한 방법입니다.이 상호 작용을 만들려면 끌 요소를 정의하고, 끌기를 시작하고, 드롭 대상을 만들고, 드롭 액션처리해야 합니다.

드래그 소스 생성

사용자가 일부 UI 요소에 마우스 버튼을 누르면 Plugin:StartDrag() 를 호출하여 드래그 작업을 시작할 수 있습니다, 일반적으로 위젯 내에서 TextButton 또는 ImageButton 입니다.다음 코드 샘플은 텍스트 버튼이 있는 단일 창 위젯을 만듭니다.


-- 먼저 위젯을 만듭니다
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- 드래그를 시작하는 텍스트 버튼 만들기
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

끌기 시작

사용자가 TextButton할 때, 사용자가 마우스 버튼을 누르자마자 발생하는 MouseButton1Down()를 통해 드래그를 시작할 수 있습니다.

연결된 함수 내에서 끌 데이터를 결정합니다.데이터의 유형 은 키 MimeType 에 반영되어야 하고, 드래그의 콘텐츠 는 키 Data 에 반영되어야 하며, 발신자의 **** 는 키 Sender 에 설명되어야 합니다.자세한 내용은 Plugin:StartDrag() 페이지를 참조하십시오.


local function onButton1Down()
	local dragInfo = {
		Data = "Hello, world",      -- 끌리는 데이터
		MimeType = "text/plain",    -- 데이터의 MIME 유형을 설명합니다
		Sender = "SomeDragSource",  -- 데이터가 발생한 위치를 설명합니다
		MouseIcon = "",             -- 커서에 사용할 이미지 콘텐츠
		DragIcon = "",              -- 드래그 중에 커서 아래에 렌더링할 이미지 콘텐츠
		HotSpot = Vector2.zero      -- 커서를 중앙에 배치하기 위해 DragIcon에서 어디로
	}
	plugin:StartDrag(dragInfo)
end

dragButton.MouseButton1Down:Connect(onButton1Down)

드롭 타겟 생성

사용자가 드래그 중에 창에서 마우스를 놓을 때 PluginGui.PluginDragDropped 이벤트가 발생합니다.이 발생하면 드롭을 감지하기 위해 두 번째 위젯과 같은 드롭 대상을 정의해야 합니다.


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

-- 이 텍스트 레이블에는 삭제된 내용이 표시됩니다
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.Text = "Drop here..."
textLabel.Parent = dragTargetWidget

드롭 액션 처리

드롭 타겟을 만든 후, 드롭 타겟 위젯에서 PluginGui.PluginDragDropped 이벤트를 연결하십시오:


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)

끌기가 여전히 진행 중이지만, 사용자가 위젯 위로 마우스를 이동할 때 이 세 이벤트가 발생합니다.

PluginDragEntered – 사용자가 창에 마우스를 올리면 발생하는 이벤트
PluginDragMoved – 사용자가 창에 마우스를 이동할 때마다 반복해서 발생합니다. 여기에 "여기에 드롭!" 메시지를 표시하는 데 유용합니다.
PluginDragLeft – 사용자의 커서가 창을 떠날 때 발생합니다. 여기에 "여기에 드롭!" 메시지를 숨기는 데 유용합니다.

이 페이지