UIドラッグ検出器

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

UIDragDetectorインスタンスは、スライダー、スピナーなど、ゲーム内の2Dユーザーインターフェース要素とのインタラクションを促進し、奨励します。主な機能は以下の通りです。

  • GuiObjectインスタンスの下にUIDragDetectorを配置することで、コードを一行も書かずにすべてのユーザー入力によるドラッグが可能になります。

  • いくつかのDragStyleオプションから選択し、ResponseStyleを介してオブジェクトが動きにどのように反応するかを定義し、必要に応じて軸、移動制限、またはドラッグ境界を適用できます。

  • スクリプトは、ドラッグされたオブジェクトの操作に応じてロジック応答を駆動することができます。たとえば、設定を調整することができます。

  • UIDragDetectorsは、SelectMoveScale、またはRotateツール、特定のプラグイン、またはStudioのUIエディターツールを使用していない限り、Studioの編集モードとプレイモードで動作します。

UI要素をドラッグ可能にする

任意のGuiObjectインスタンスをドラッグ可能にするには、単にUIDragDetectorを直接の子として追加します。

  1. Explorerウィンドウで、GuiObjectインスタンスにカーソルを合わせ、⊕ボタンをクリックします。コンテキストメニューが表示されます。

  2. メニューからUIDragDetectorを挿入します。

  3. デフォルトでは、オブジェクトはLayerCollectorインターフェースでドラッグ可能になります。

UIドラッグ検出器をカスタマイズする

ドラッグスタイル

UIDragDetectorsは、カーソルの動きをマッピングして提案された2Dの動きや回転を計算します。DragStyleプロパティを通じて、ニーズに合わせたさまざまなマッピングから選択できます。たとえば、Enum.UIDragDetectorDragStyle.TranslatePlaneは、LayerCollectorの2D平面での移動を生成しますが、Enum.UIDragDetectorDragStyle.Rotateは通常、移動の代わりに回転を生成します。

設定説明
TranslateLine検出器のDragAxisに沿った1Dの動き。
TranslatePlaneLayerCollectorの平面での2Dの動き。
Rotateデフォルトでは、検出器の親GuiObjectの絶対中心位置を中心に回転します。ReferenceUIInstanceが設定されている場合、そのインスタンスの絶対中心位置を中心に回転します。
ScriptableSetDragStyleFunction()を介して提供されたカスタム関数を使用して、希望する動きを計算します。

ドラッグ方向

デフォルトでは、2Dの動きと関連するDragStyleは、祖先LayerCollectorの空間にマッピングされます。ただし、異なるUIコンポーネントを構築する際に、ReferenceUIInstanceDragAxisを変更したい場合があります。

設定説明デフォルト
ReferenceUIInstance検出器の参照空間と原点となるローカル空間と絶対中心位置を持つGuiObjectインスタンス。この参照を設定すると、DragUDim2DragRotation、およびDragAxisの動作に影響を与えます。nil
DragAxisVector2値で、DragStyleEnum.UIDragDetectorDragStyle.TranslateLineに設定されているときに、ドラッグされたオブジェクトの移動軸を定義します。軸はUIDragDetectorのローカル空間で定義されますが、ReferenceUIInstanceが定義されている場合、そのインスタンスのローカル空間で定義されます。(1, 0)

動きへの応答

UIDragDetector.ResponseStyleプロパティは、提案された動きによってオブジェクトの位置値がどのように変更されるかを指定します。カスタム応答スタイルを使用すると、検出器の親が提案された動きを実行することなく、結果として得られるUIDragDetector.DragUDim2およびUIDragDetector.DragRotationの値を希望通りに使用できます。

設定説明
Offset検出器の親のGuiObject.Position値のOffset値によって移動します。これはデフォルトの設定です。
Scale検出器の親のGuiObject.Position値のScale値によって移動します。
CustomOffsetUI要素は全く移動しませんが、検出器のDragUDim2Offset値は更新され、検出器のイベントは発火し続けるため、ドラッグ操作に応じて任意の方法で応答できます。
CustomScaleUI要素は全く移動しませんが、検出器のDragUDim2Scale値は更新され、検出器のイベントは発火し続けるため、ドラッグ操作に応じて任意の方法で応答できます。

移動と回転の制限

デフォルトでは、DragStyleの固有の制限を除いて、2Dの動きに制限はありません。必要に応じて、最小および最大の移動と回転の制限を以下のプロパティで宣言できます。さらに、Frameなどの指定されたGuiObjectの境界内でドラッグされたオブジェクトがどのように制約されるかを定義できます。

プロパティ説明デフォルト
MinDragTranslation
MaxDragTranslation
各次元のドラッグ移動の制限を、UDim2値で定義します。MaxDragTranslationMinDragTranslationより大きい場合、移動はその範囲内に制限されます。{0, 0}, {0, 0}
MinDragAngle
MaxDragAngle
DragStyleEnum.UIDragDetectorDragStyle.Rotateに設定されている場合、またはSetDragStyleFunction()AddConstraintFunction()を介して設定された関数が回転値を定義する場合にのみ関連します。MaxDragAngleMinDragAngleより大きい場合、回転はその範囲内に制限されます。0
BoundingBehaviorBoundingUIが設定されているときのUIDragDetectorインスタンスの境界動作を決定します。これをEntireObjectに設定すると、ドラッグされたUI全体がBoundingUI内に制限され、HitPointに設定すると、ドラッグされたUIは正確なヒット/グラブポイントとその移動後の位置によってのみ制限されます。便利なことに、Automaticのデフォルトは、BoundingUIに完全に含まれるUIオブジェクトに対してEntireObjectの動作を模倣し、そうでない場合はHitPointの動作を模倣します。Automatic

スピード調整

SelectionModeDragSpeedおよびSelectionModeRotateSpeedを通じて、検出器の最大ドラッグ/回転速度を微調整できます。さらに、UIDragSpeedAxisMappingを通じて、検出器のSelectionModeDragSpeedに基づいてX/Y次元のドラッグ速度を微調整できます。

プロパティ説明
SelectionModeDragSpeed検出器が属する最初の祖先ScreenGuiまたはSurfaceGuiScaleおよびOffsetの組み合わせとして、移動の最大速度を定義します。
SelectionModeRotateSpeedUIDragDetectorが回転できる最大角度を毎秒で定義します。
UIDragSpeedAxisMapping検出器のSelectionModeDragSpeedに基づいて、X/Y次元のドラッグ速度を決定します。デフォルトはXYで、XおよびY軸の速度はそれぞれXおよびYScale/Offset値に基づいています。

代替として、XXおよびYYがあり、XおよびY軸の速度はそれぞれXXX)またはYYY)軸のScaleに基づいていますが、Offset値はそれぞれの軸に適用されます。たとえば、最初の祖先ScreenGuiのサイズが800×600で、SelectionModeDragSpeed{0.1, 10}, {0.1, 20}の場合、XXの設定はX/Yのドラッグ速度を80+10/80+20にし、YYの設定は60+10/60+20になります(Offset値は両方のケースで同じままです)。

クリックとドラッグに対するスクリプトの応答

イベントシグナル、プロパティの変更、Scriptableドラッグスタイル、およびカスタム関数を通じて、スクリプトはドラッグされたUI要素の操作に応じてさまざまな設定を駆動したり、論理的な決定を行ったりできます。たとえば、音楽や効果音の音量を別々に調整するスライダーなどです。

イベントシグナル

以下のイベントシグナルを通じて、ユーザーがオブジェクトのドラッグを開始、継続、終了したときに検出できます。

イベント説明
DragStartユーザーがオブジェクトのドラッグを開始したときに発火します。
DragContinueDragStartが開始された後に、ユーザーがオブジェクトのドラッグを続けているときに発火します。
DragEndユーザーがオブジェクトのドラッグを停止したときに発火します。

以下のスライダーは、そのコンテナをBoundingUIとして指定し、コンテナエリア内での移動を制限し、スケールベースのTranslateLineドラッグを追加のスクリプトなしでコンテナの全幅に制限します。

UIDragDetector - イベントシグナル透明度変更
-- 階層は SliderContainer ⟩ Handle ⟩ UIDragDetector ⟩ (このスクリプト)
local sliderContainer = script.Parent.Parent.Parent
local handle = sliderContainer:FindFirstChild("Handle")
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale -- スケールによるドラッグを設定
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.TranslateLine -- ドラッグをラインに制限
uiDragDetector.BoundingUI = sliderContainer
-- 初期状態でハンドルのXスケール値に基づいてコンテナの透明度を設定
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
-- グラブ開始を示すためにハンドルの境界を拡大
uiDragDetector.DragStart:Connect(function(inputPosition)
handle:FindFirstChildWhichIsA("UIStroke").Thickness = 6
end)
-- スケールに基づいてどれだけドラッグされたかで透明度を変更
uiDragDetector.DragContinue:Connect(function(inputPosition)
sliderContainer.BackgroundTransparency = 1 - handle.Position.X.Scale
end)
-- グラブ終了を示すためにハンドルの境界を元に戻す
uiDragDetector.DragEnd:Connect(function(inputPosition)
handle:FindFirstChildWhichIsA("UIStroke").Thickness = 4
end)

位置と回転の変更

イベントシグナルに加えて、検出器のDragUDim2および/またはDragRotationプロパティの変更を直接監視できます。

以下の検出器は、そのDragStyleRotateに設定されており、ユーザーがハンドルを色相回転リングの周りにドラッグできるようにし、Instance:GetPropertyChangedSignal()を通じてドラッグ回転の変更を検出します。

UIDragDetector - DragRotation変更
local handle = script.Parent.Parent -- ドラッグするUI要素
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.DragStyle = Enum.UIDragDetectorDragStyle.Rotate -- ドラッグスタイルを回転に設定
local function changeHue()
local currAngle = (math.fmod(handle.Rotation, 360)) / 360
if currAngle < 0 then
currAngle += 1
end
handle.BackgroundColor3 = Color3.fromHSV(currAngle, 1, 1)
end
-- 初期状態でハンドルの回転に基づいて色相を設定
changeHue()
-- 検出器のドラッグ回転のGetPropertyChangedSignal()に関数を接続
uiDragDetector:GetPropertyChangedSignal("DragRotation"):Connect(changeHue)

スクリプトドラッグスタイル

検出器のUIDragDetector.DragStyleEnum.UIDragDetectorDragStyle.Scriptableに設定すると、入力位置のVector2を受け取り、UDim2(位置)と浮動小数点数(回転)を返す独自の関数を提供できます。検出器は、返された値に基づいてオブジェクトを計算された位置/回転に更新します。DragSpaceプロパティとDragRelativityプロパティも考慮されます。

デフォルトでは、返されたUDim2と浮動小数点数は、検出器の親のローカル空間における最終的な希望の位置/回転になります。既存の移動/回転制限は依然として適用され、指定されたBoundingUIインスタンスによって課せられた境界制限も適用されます。

以下の例では、X座標入力の変化に基づいて計算されたサイン波に従ってUI要素をドラッグします。検出器のDragSpaceEnum.UIDragDetectorDragSpace.Relativeに設定されていることに注意してください。

UIDragDetector - サイン波に従ったドラッグ
local frame = script.Parent -- ドラッグするUI要素
local uiDragDetector = frame:FindFirstChildWhichIsA("UIDragDetector")
local initialXValue = 0
local maxHeightChange = 200
local pixelsPerRadian = 75 -- この値を下げると周波数が増加します
uiDragDetector.DragStart:Connect(function(inputPosition)
initialXValue = inputPosition.X
end)
local function computeSinWaveCoordinate(inputPosition)
local deltaX = inputPosition.X - initialXValue
-- 正のY変化で画面上に「上がる」ように負のYデルタ
local deltaY = -math.sin(deltaX / pixelsPerRadian) * maxHeightChange
return UDim2.fromOffset(deltaX, deltaY)
end
uiDragDetector:SetDragStyleFunction(computeSinWaveCoordinate)

カスタム制約関数

UIDragDetectorsには、グリッドやスナッピングに関する組み込みの動きのルールはありませんが、検出器のUIDragDetector.DragUDim2およびUIDragDetector.DragRotationが適用される前に編集するためのカスタム制約関数を登録できます。たとえば、特定の増分に位置を丸めることで動きをグリッドに保つことができたり、許可された動きの領域を定義したりできます。これは、既存の移動/回転制限の前に適用されることに注意してください。

以下の例では、行と列の数に基づいて平面ドラッグをX/Yグリッドに制限する制約関数を利用しています。検出器のResponseStyleEnum.UIDragDetectorResponseStyle.Scaleに設定されており、BoundingUIはグリッドコンテナに設定されています。

UIDragDetector - グリッド内でドラッグ、タイルにスナッピング
-- 階層は GridContainer ⟩ Handle ⟩ UIDragDetector ⟩ (このスクリプト)
local gridContainer = script.Parent.Parent.Parent
local handle = gridContainer:FindFirstChild("Handle") -- ドラッグするUI要素
local uiDragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
uiDragDetector.ResponseStyle = Enum.UIDragDetectorResponseStyle.Scale -- スケールによるドラッグを設定
uiDragDetector.DragRelativity = Enum.UIDragDetectorDragRelativity.Relative
uiDragDetector.BoundingUI = gridContainer
local NUM_COLUMNS = 10
local NUM_ROWS = 5
local xScaleIncrement = 1 / NUM_COLUMNS
local yScaleIncrement = 1 / NUM_ROWS
local initialParentPosition = uiDragDetector.Parent.Position
uiDragDetector.DragStart:Connect(function()
initialParentPosition = uiDragDetector.Parent.Position
end)
local function dragToGridOnly(proposedPosition, proposedRotation)
local griddedXScale = math.round(proposedPosition.X.Scale / xScaleIncrement) * xScaleIncrement
local griddedYScale = math.round(proposedPosition.Y.Scale / yScaleIncrement) * yScaleIncrement
return UDim2.fromScale(griddedXScale, griddedYScale), proposedRotation
end
uiDragDetector:AddConstraintFunction(1, dragToGridOnly)
©2026 Roblox Corporation。Roblox(ロブロックス)、RobloxロゴおよびPowering Imaginationは、米国並びにその他の国における登録商標および非登録商標です。