Studioウィジェット制作

Studio では、カスタムウィジェットを作成し、Studio ツールやエクステンションとして使用することができます。 これらのウィジェットは、Studio のカスタムウィンドウ/パネルとして動作し、インターフェース内にドッキングしたり、別のウィンドウとしてフロートさせたりすることができます。

ウィジェット UI の作成

Studio ウィジェットはすべてDockWidgetPluginGuiオブジェクトとして始まり、テキストラベルやボタンなどのGuiObjectsで埋めることができます。 からのウィジェット GUI を作成するには、CreateDockWidgetPluginGui()関数を呼び出し、ID とDockWidgetPluginGuiInfoオブジェクトをパスします。

DockWidgetPluginGuiInfo.new()コンストラクタは、以下のように特定の順序でパラメータを受け取ることに注意してください:

#プロパティタイプ概要
1Enum.InitialDockStateEnumEnum.InitialDockState列挙の一つ。
2InitialEnabledブールウィジェットGUIの初期有効化（表示）状態。
3InitialEnabledShouldOverrideRestoreブール正しい場合、初期有効化の値は以前に保存された有効状態を上書きします。
4FloatingXSize整数初期ドック状態がEnum.InitialDockState.Floatに設定されている場合のGUIの初期幅。
5FloatingYSize整数初期ドック状態がEnum.InitialDockState.Floatに設定されている場合のGUIの初期高。
6MinWidth整数GUIの最小幅で、プラットフォームによって異なる場合があります。
7MinHeight整数GUIの最低高で、プラットフォームによって異なる場合があります。
-- Create new "DockWidgetPluginGuiInfo" object

local widgetInfo = DockWidgetPluginGuiInfo.new(

    Enum.InitialDockState.Float,  -- Widget will be initialized in floating panel

    true,   -- Widget will be initially enabled

    false,  -- Don't override the previous enabled state

    200,    -- Default width of the floating window

    300,    -- Default height of the floating window

    150,    -- Minimum width of the floating window

    150     -- Minimum height of the floating window

)



-- Create new widget GUI

local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)

testWidget.Title = "Test Widget"  -- Optional widget title

ウィジェット UI のカスタマイズ

ウィジェットを作成すると、有益なTextLabelsや対話型のClass.GuiObject|GuiObjects``Class.ImageButton|ImageButtonsなどでユーザーインターフェースをカスタマイズできます。 例えば、次のコードは GUI ウィンドウに基本的なTextButtonを追加します:

-- Create new widget GUI

local testWidget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)

testWidget.Title = "Test Widget"  -- Optional widget title



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 のカラーテーマを変更

効果的な Studio ウィジェットは、Studio のテーマ設定にぴったり一致し、テーマが変更されると動的に調整を行います。 例えば、開発者が暗いテーマを使用している場合、ウィジェットの背景色、画像、テキストラベルは Studio の本来のテーマカラーとマッチするように調整されます。

以下のコードの追加は、当初、同期する GUI オブジェクトのテーブルとともに呼び出されるsyncGuiColors()関数を使用します。 関数の内部では、層になったsetColors()関数がオブジェクトをループし、Enum.StudioStyleGuideColorenumsGetColor()でオブジェクトの特定の側面を同期させます。 このsetColors()関数はすぐに実行され、Studio のテーマを同期し、その後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 イベントにシステム固有のマウスカーソルを設定できます。 以下のコードは、関数をtestButtonのMouseEnterやMouseLeaveイベントに接続してマウスカーソルを変更する方法を示しています。

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 要素は Studio ウィジェットで正常に動作し、通常の 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()を呼び出すことでドラッグ操作を開始できますユーザーが通常TextButtonの UI 要素でマウスボタンを押すもしくはImageButtonウィジェット内。 以下のコードサンプルでは、１つのウィンドウウィジェットを作成し、その中にテキストボタンを作成します。

-- Create the widget first

local widgetInfo = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, true, true, 300, 200)

local dragSourceWidget = plugin:CreateDockWidgetPluginGui("Drag Source", widgetInfo)

dragSourceWidget.Title = "Drag Source"



-- Create a TextButton that will initiate the drag

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",      -- 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を持つ２番目のウィジェットなどのドロップターゲットを定義する必要があります。

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

dragTargetWidget.Title = "Drop Target"



-- This TextLabel will display what was dropped

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ーユーザーのカーソルがウィンドウから離れたときに始動します。 これは、