Studio는 사용자 정의 widgets 를 만들고 Studio 도구 및 확장으로 사용할 수 있게 해줍니다. 이 위젯은 Studio 내에서 사용자 지정 창/패널로 동작하며, 인터페이스 내에서 도크하거나 별도 창으로 띄울 수 있습니다.
위젯 UI 생성
모든 Studio 위젯은 DockWidgetPluginGui 개체로 시작합니다. 이는 텍스트 레이블 및 버튼과 같은 채우기 위해 사용할 수 있는 GuiObjects 개체입니다. 빈 위젯 GUI를 생
참고하세요 DockWidgetPluginGuiInfo.new() 생성자는 다음과 같이 특정 순서 로 매개 변수를 기대합니다.
| # | 속성 | 유형 | 설명 |
|---|---|---|---|
| 1 | Enum.InitialDockState | 열거형 | Engineer.InicialDockState 열거 중 하나. |
| 2 | InitialEnabled | 부울 | 초기 (표시 가능한) 위젯 GUI 상태. |
| 3 | InitialEnabledShouldOverrideRestore | 부울 | 값이 참이면 초기 활성화 이전에 저장된 활성화 상태를 재정의합니다. |
| 4 | FloatingXSize | 정수 | 초기 도크 상태로 설정된 경우 GUI의 초기 너비는 Enum.InitialDockState.Float입니다. |
| 5 | FloatingYSize | 정수 | 초기 도크 상태로 설정된 경우 기본 높이가 Enum.InitialDockState.Float입니다. |
| 6 | MinWidth | 정수 | 일부 플랫폼 변형을 위한 최소 GUI 너비. |
| 7 | MinHeight | 정수 | 일부 플랫폼 변형을 제외한 GUI의 최소 높이. |
게임 스크립트에서 CreateDockWidgetPluginGui() 함수를 사용할 수 없습니다. 이 함수는 명령 바에서만 호출할 수 있습니다.
위젯 UI 사용자 정의
위젯을 만들면 사용자 인터페이스를 사용자 정의하려면 GuiObjects 와 같은 정보 TextLabels 또는 상호 작용 ImageButtons 을 사용합니다. 예를 들어, 다음 코드는 기본 1> Class.TextButton
모든 경험 화면 내에서 부모가 되어야 하는 것과 같은 방식으로 버튼을 부모해야 합니다. Class.GuiObject 내에서 부모가 되어야 하는 모든 화면 내에서 부모가 되어야 합니다. GuiObject 내에서 부모가 되어야 합니다.
Roblox는 일관된 효과적인 Studio 웹 라이브러리를 빌드하는 것을 도와주기 위해 GitHub 리포지토리를 제공합니다. 이는 스튜디오 스타일의 기본 "Studio" 컨트롤, 라디오 버튼 및 입력 필드를 포함하는 표준 "Studio" 룩과 느낌의 GUI 요소를 포함합니다. 이 모든 것은 다크 테마를
Studio 색상 테마 변경
효과적인 Studio 위젯은 Studio 테마 설정과 동기화되어야 하며 테마가 변경될 때 동적으로 조정됩니다. 예를 인스턴스, 개발자가 암흑 테마를 사용하는 경우 배경 색, 이미지 및 텍스트 레이블이 Studio의 네이티브 테마 색과 함께 멋지게 표시됩니다.
다음 코드 추가는 테이블의 GUI 개체와 함께 동기화하기 위한 기능을 사용하는 syncGuiColors() 함수를
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()
-- ThemeChanged 이벤트를 'setColors()' 함수에 연결하십시오.
settings().Studio.ThemeChanged:Connect(setColors)
end
-- 제공된 개체의 색을 동기화하려면 'SyncGuiColors()' 함수를 실행하십시오
syncGuiColors({testButton})
마우스 커서 사용자 정의
웹 사이트 요소와 관련된 예상되는 상호 작용을 개선하기 위해 시스템 전체 마우스 커서 를 GUI 이벤트에 설정하여 Class.Gui
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 | 핀 선택 영역에 마우스를 이동합니다. |
이 커서 모양은 추정치이므로 실제 커서는 기본 운영 체제 커서와 일치합니다. 참고: 이 커서 모양은 추정치이므로 실제 커서는 기본 운영 체제 커서와 일치합니다.
사용자 입력 수집
Class.abet 및 TextButton와 같은 UI 요소는 Studio 위젯에서 정상적으로 작동하며 Roblox에서 빌드할 수 있습니다. UserInputService 및 1>Class.ContextActionService1>는 주 게임 창이 집중되어 있기를 기대하므로 작동하
일반적인 입력 이벤트에 대한 하나의 작업 환경은 전체 화면에 투명한 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 내의 위젯에 텍스트 버튼이 있습니다. 다음 코드 샘플은
드래그 시작
사용자가 TextButton 를 클릭하면, MouseButton1Down() 이벤트를 시작하여 사용자가 마우스 버튼을 누르는 즉시 드래그를 시작할 수 있습니다.
연결된 함수 내에서 데이터를 드래그해야 합니다. 데이터의 유형은 MimeType 키에 반영되어야 하고, 드래그의 콘텐츠는 2> Data
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 발생합니다. 이 이벤트가 발생하면 Class.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 – 사용자가 창에 마우스를 올 때 실행됩니다.
- PluginDragMoved – 사용자가 창을 마우스로 이동할 때 반복적으로 실행됩니다. 이는 "여기에 드롭하세요!"라는 메시지를 표시하는 데 유용합니다.
- PluginDragLeft – 사용자의 커서가 창을 떠나면 실행됩니다. 이렇게 하면 “여기에 드롭하세요!”라는 메시지를 숨길 수 있습니다.