스튜디오는 사용자 지정 위젯을 만들고 이를 스튜디오 도구 및 확장으로 사용할 수 있는 기능을 제공합니다. 이러한 위젯은 스튜디오에서 사용자 지정 창/패널로 작동하며 인터페이스 내부에 도킹하거나 별도의 창으로 띄울 수 있습니다.
위젯 UI 만들기
모든 스튜디오 위젯은 텍스트 레이블 및 버튼과 같이 GuiObjects(으)로 채울 수 있는 DockWidgetPluginGui개체로 시작합니다. 빈 위젯 GUI를 만들려면 CreateDockWidgetPluginGui()기능을 호출하고 ID와 개DockWidgetPluginGuiInfo체를 전달합니다.
DockWidgetPluginGuiInfo.new()제작자는 다음과 같은 특정 순서로 그 매개변수를 예상합니다.
| # | 속성 | 유형 | 설명 |
|---|---|---|---|
| 1 | Enum.InitialDockState | 열거형 | Enum.InitialDockState열거 중 하나. |
| 2 | InitialEnabled | 부울 | 위젯 GUI의 초기 활성화(표시) 상태입니다. |
| 3 | InitialEnabledShouldOverrideRestore | 부울 | 참 인 경우 **초기 활성화 ** 값이 이전에 저장된 활성화 상태를 재정의합니다. |
| 4 | FloatingXSize | 정수 | **초기 독 상태 **가 Enum.InitialDockState.Float(으)로 설정된 경우 GUI의 초기 폭입니다. |
| 5 | FloatingYSize | 정수 | 초기 독 상태가 Enum.InitialDockState.Float으로 설정되었을 때 GUI의 초기 높이입니다. |
| 5 | MinWidth | 정수 | 일부 플랫폼별 변형이 있는 GUI의 최소 폭입니다. |
| 7 | MinHeight | 정수 | 일부 플랫폼별 변형이 있는 GUI의 최소 높이입니다. |
게임 내 스크립트에서는 CreateDockWidgetPluginGui()기능을 사용할 수 없습니다. 명령 모음 또는 플러그인 스크립트에서만 호출할 수 있습니다.
위젯 UI 사용자 정의
위젯을 만들면 유익한 TextLabels또는 대화식 ImageButtons와(과)같은 GuiObjects을(를) 사용하여 위젯의 사용자 인터페이스를 사용자 지정할 수 있습니다. 예를 들어 다음 코드는 기본 TextButton을(를) GUI 창에 추가합니다.
일관되고 효과적인 스튜디오 위젯을 만들 수 있도록 Roblox는 표준 "스튜디오" 모양과 느낌의 GUI 요소가 포함된 GitHub 리포지토리를 제공합니다. 여기에는 스튜디오 스타일이 있는 확인란, 라디오 버튼 및 입력 필드가 포함되며 모두 어두운 테마를 지원합니다.
Studio 색상 테마 변경
효과적인 스튜디오 위젯은 스튜디오 테마 설정과 이상적으로 일치하며 테마가 변경되면 동적으로 조정됩니다. 예를 들어 개발자가 어두운 테마를 사용하는 경우 위젯의 배경 색상, 이미지 및 텍스트 레이블이 스튜디오의 본래 테마 색상과 함께 보기 좋게 표시되어야 합니다.
다음 코드 추가는 초기에 동기화할 GUI 개체 테이블과 함께 호출되는 기syncGuiColors()능을 사용합니다. 기능 내에서 중첩된 setColors()기능은 개체를 반복하고 GetColor()와(과) 함께 Enum.StudioStyleGuideColor열거형을 사용하여 개체의 특정 측면을 동기화합니다. 이 setColors()기능은 곧바로 실행되어 스튜디오 테마를 동기화한 다음 ThemeChanged이벤트에 연결되어 향후 테마 변경을 감지합니다.
testButton.Parent = testWidget
local function syncGuiColors(objects)
local function setColors()
for _, guiObject in pairs(objects) do
-- Sync background color
guiObject.BackgroundColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainBackground)
-- Sync text color
guiObject.TextColor3 = settings().Studio.Theme:GetColor(Enum.StudioStyleGuideColor.MainText)
end
end
-- Run 'setColors()' function to initially sync colors
setColors()
-- Connect 'ThemeChanged' event to the 'setColors()' function
settings().Studio.ThemeChanged:Connect(setColors)
end
-- Run 'syncGuiColors()' function to sync colors of provided objects
syncGuiColors({testButton})
마우스 커서 사용자 지정
위젯 요소와의 예상되는 상호 작용을 개선하기 위해 시스템별 마우스 커서을(를) MouseEnter및 MouseLeave와(과) 같은 GUI 이벤트로 설정할 수 있습니다. 다음 코드는 기능을 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 | 정확한 선택 영역 위로 마우스를 가져갑니다. |
이러한 커서 모습은 근사치일 뿐으로 실제 커서는 기본 운영 체제 커서와 일치합니다.
사용자 입력 수집
TextBox및 TextButton등의 UI 요소는 스튜디오 위젯에서 정상적으로 작동하며 Roblox에서 평소처럼 인터페이스를 구축할 수 있습니다. 하지만 UserInputService및 ContextActionService은(는) 기본 게임 창에 초점이 맞춰져야 하기 때문에 작동하지 않습니다.
일반 입력 이벤트에 대한 한 가지 해결 방법은 투명한 Frame을(를) 만들어 전체 화면에 오버레이하는 것입니다. 다음 코드 샘플은 프레임을 생성하고 사용자가 프레임을 클릭하면 GuiObject.InputBegan이벤트는 사용자가 클릭할 때까지 프레임의 키보드 입력을 캡처합니다.
local frame = Instance.new("Frame")
frame.BackgroundTransparency = 1 -- Hide the frame
frame.Size = UDim2.new(1, 0, 1, 0) -- Cover the screen
frame.Position = UDim2.new(0, 0, 0, 0)
frame.Parent = testWidget
local function onInputBegan(inputObject)
-- Process the input object here, for example detect key presses
end
frame.InputBegan:Connect(onInputBegan)
드래그 앤 드롭 상호 작용
위젯에 드래그 앤 드롭 상호 작용을 사용하는 것은 데이터 흐름을 개선하는 간단한 방법입니다. 이 상호 작용을 생성하려면 드래깅할 요소를 정의하고, 드래깅을 시작하고, 드롭 대상을 생성하고, 드롭 동작을 처리해야 합니다.
드래깅 소스 생성
Plugin:StartDrag()을(를) 호출하여 사용자가 일부 UI 요소(일반적으로 위젯 내의 또TextButton는)ImageButton 드래깅을 시작할 수 있습니다. 다음 코드 샘플은 내부에 텍스트 버튼이 있는 단일 창 위젯을 만듭니다.
드래깅 시작
사용자가 TextButton을 클릭하면 마우스 버튼을 누르는 즉시 발생하는 이MouseButton1Down()벤트를 통해 드래깅을 시작할 수 있습니다.
연결된 기능 내에서 드래깅할 데이터를 결정합니다. 데이터 유형은 MimeType키에 반영되어야 하고 드래깅 콘텐츠는 Data키에 반영되어야 하며 보낸 사람은Sender 키에 자신을 설명해야 합니다. 자세한 내용은 페이지 Plugin:StartDrag()을(를) 참조하십시오.
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- The data being dragged
MimeType = "text/plain", -- Describes the MIME type of the data
Sender = "SomeDragSource", -- Describes from where the data originated
MouseIcon = "", -- Image content to use for the cursor
DragIcon = "", -- Image content to render under the cursor during drag
HotSpot = Vector2.new(0, 0) -- Where on the DragIcon to center the cursor
}
plugin:StartDrag(dragInfo)
end
dragButton.MouseButton1Down:Connect(onButton1Down)
드롭 대상 생성
PluginGui.PluginDragDropped의 이벤트는 사용자가 드래깅하는 동안 창에서 마우스를 놓으면 발생합니다. 이런 일이 발생하면 TextLabel이 있는 두 번째 위젯과 같은 드롭 대상을 정의하여 드롭을 감지해야 합니다.
드롭 작업 처리
드롭 대상을 만든 후 드롭 대상 위젯 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- 사용자가 창 위로 마우스를 가져가면 실행됩니다.
- PluginDragLeft- 사용자의 커서가 창을 떠날 때 발생합니다. 이것은 "여기에 놓으시오!"메시지를 숨기는데 유용합니다.
- PluginDragLeft – 사용자의 커서가 창을 떠날 때 발생합니다. 이것은 "여기에 놓으시오!" 메시지를 표시하는 데 유용합니다.