Studio は、カスタム ウィジェット を作成し、Studio ツールや拡張として使用するパワーを提供します。これらのウィジェットは、Studio のカスタムウィンドウ/パネルとして動作し、インターフェイス内でドックするか、別のウィンドウとして浮動することができます。
ウィジェット UI の作成
すべての Studio ウィジェットは、DockWidgetPluginGui オブジェクトを開始しますGuiObjects、例えばテキストラベルやボタンなど。を作成する空のウィジェットGUIを作成するには、Class.Plugin:CreateDockWidgetPluginGui()|
注：Datatype.DockWidgetPluginGuiInfo.new() コンストラクターは、パラメーターを 特定の順序 で期待します：
| # | プロパティ | タイプ | 説明 |
|---|---|---|---|
| 1 | Enum.InitialDockState | リスト | Engineer.Utility.AdditionalDockState の列挙の 1 つ。 |
| 2 | InitialEnabled | ブール | ウィジェットGUI の初期有効な (見える) 状態。 |
| 3 | InitialEnabledShouldOverrideRestore | ブール | インシャル化済み の値は、以前に保存された有効な状態を上書きします。 |
| 4 | FloatingXSize | 整数 | GUI の初期幅が InitialDockState に設定されているときの最初の幅は Enum.InitialDockState.Float です。 |
| 5 | FloatingYSize | 整数 | GUI の初期高さは、Container.Ship が Enum.InitialDockState.Float に設定されているときに Container.Ship. InitialDockState に設定されます。 |
| 6 | MinWidth | 整数 | プラットフォーム固有の変更を含む最小限のGUIの幅。 |
| 7 | MinHeight | 整数 | プラットフォーム固有の変更を含む、GUI の最小高さ。 |
ゲームスクリプトで CreateDockWidgetPluginGui() 機能を使用できません。 コマンドバーかプラグイン機能からのみ 呼び出すことができます。
ウィジェット UI のカスタマイズ
ウィジェットを作成すると、GuiObjects のような情報、TextLabels またはインタラクティブなImageButtons を追加したユーザーインターフェイスをカスタマイズできます。たとえば、次のコードは、GUI ウィンドウ
Roblox は、コンセプト一貫性のある、効果的な Studio ウィジェットを構築するために、GitHub レポジトリを提供します。これには、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({testButton})
カスタマイズマウスカーソル
ウィジェット要素と期待されるインタラクションを向上させるために、システム固有の マウスカーソル をGUIイベントに設定し、たとえば Class.GuiObject
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.Widgets や TextButton などの UI エレメントは、Studio ウィジェットで正常に機能し、RoblRoblox（ロブロックス） で通常通り構築できます。ただし、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 内の 1> Class.Button1> です。次のコードサンプルは、テキストボ
ドラッグを開始しています
ユーザーが TextButton をクリックすると、MouseButton1Down() イベントをドラッグして開始し、ユーザーがマウスボタンを押すときに発動することができます。
接続された関数内で、ドラッグするデータを決定します。データの タイプ は、MimeType キー、コンテンツ は、2>Data2> キー、および 5> 送信者
local function onButton1Down()
local dragInfo = {
Data = "Hello, world", -- ドラッグされているデータ
MimeType = "text/plain", -- データの MIME タイプを説明します
Sender = "SomeDragSource", -- データの起源から説明します
MouseIcon = "", -- カーソルに使用する画像コンテンツ
DragIcon = "", -- ドラッグ中にカーソルの下に表示される画像コンテンツ
HotSpot = Vector2.zero -- ドラッグアイコンでカーソルを中央に移動する
}
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)
ドラッグがまだ進行中であるとき、これらの 3つのイベントは、ユーザーがマウスをワジェットの上に移動するときに発生します：
- PluginDragEntered – ユーザーがウィンドウの上にマウスポインタを置くときに発動します
- PluginDragMoved – ユーザーがマウスをコンピューターのウィンドウに移動させるたびに発動します。これは「ここにドロップ」というメッセージを表示するのに便利です。
- PluginDragLeft – ユーザーのカーソルがウィンドウを離れるときに発動します。これは「ここにドロップ」というメッセージを隠すのに便利です。