スタジオウィジェットをビルドする

スタジオは、カスタムのウィジェットを作成し、スタジオツールと拡張として使用する権限を提供します。これらのウィジェットは、Studio でカスタムウィンドウ/パネルとして動作し、インターフェイス内にドックするか、別のウィンドウとして浮かせることができます。

ウィジェットUIを作成

すべてのスタジオウィジェットは、テキストラベルやボタンなど、で満たすことができるオブジェクトとして開始します。空の Widget GUI を作成するには、ID と DockWidgetPluginGuiInfo オブジェクトを渡して CreateDockWidgetPluginGui() 関数を呼び出し、空の Widget GUI を作成します。

DockWidgetPluginGuiInfo.new() コンストラクターは、次のようにパラメータを順序よく期待します: specific order

#	性質	種類	説明
1	Enum.InitialDockState	Enum	Enum.InitialDockState 列挙の 1 つ。
2	InitialEnabled	ブールブルーン	ウィジェット GUI の初期有効 (可視) 状態。
3	InitialEnabledShouldOverrideRestore	ブールブルーン	真の場合、 InitialEnabled の値は、以前に保存された有効な状態を上書きします。
4	FloatingXSize	整数	GUI の初期幅が InitialDockState に設定されているときの初期値。
5	FloatingYSize	整数	GUI の初期高さは、 InitialDockState が Enum.InitialDockState.Float に設定されたとき。
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 のネイティブテーマの色と並んできれいに見える必要があります。

次のコード追加では、最初に同期する 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()
	-- 「ThemeChanged」イベントを「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 は、これらのサービスがメインゲームウィンドウが焦点にあることを期待しているため、機能しません。

一般的な入力イベントのワークアラウンドの 1つは、透明な 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)

ドラッグアンドドロップインタラクション

Widget のドラッグアンドドロップインタラクションの使用は、データのフローを改善する簡単な方法です。このインタラクションを作成するには、ドラッグする要素を定義し、ドラッグを開始し、ドロップターゲットを作成し、ドロップアクションを処理する必要があります。

ドラッグソースを作成

ユーザーがマウスのボタンを押したときに Plugin:StartDrag() を呼び出して、ドラッグアクションを開始できます。通常、ウィジェット内の TextButton または ImageButton です。次のコードサンプルは、テキストボタンを内蔵した単一のウィンドウウィジェットを作成します。


-- まず widget を作成する
local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)
local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)
dragSourceWidget.Title = "Drag Source"

-- ドラッグを開始する TextButton を作成する
local dragButton = Instance.new("TextButton")
dragButton.Size = UDim2.new(1, 0, 1, 0)
dragButton.Text = "Drag me!"
dragButton.Parent = dragSourceWidget

ドラッグを開始する

ユーザーが TextButton をクリックすると、ユーザーがマウスボタンを押すとすぐに発動する MouseButton1Down() イベントを介してドラッグを開始できます。

接続された機能内で、ドラッグするデータを決定します。データのタイプはキーに反映され、ドラッグのコンテンツはキー内に反映され、送信者のはキー内で自身を説明する必要があります。詳細については、Plugin:StartDrag()を参照してください。


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 イベントが発動します。これが発生すると、ドロップを検出するために、ドロップターゲットを定義する必要があります（例えば、TextLabelで2番目のウィジェット）。


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)

ドラッグがまだ進行中の間、これらの 3つのイベントは、ユーザーがウィジェットの上をマウスで移動すると発動します：

PluginDragEntered – ユーザーがウィンドウにマウスポインタを合わせたときに発動する
PluginDragMoved – ユーザーがウィンドウ上でマウスを動かすたびに繰り返し発射します。これは「ここにドロップ！」メッセージを表示するのに便利です。
PluginDragLeft – ユーザーのカーソルがウィンドウから離れると発動し、「ここにドロップ！」メッセージを隠すのに便利です。

ページ内容