UIドラッグ検出器

UIDragDetector インスタンスは、スライダー、スピナーなどのエクスペリエンス内の 2D ユーザーインターフェイス要素との相互作用を促進し、奨励します。主な機能には以下があります：

• 任意の UIDragDetector インスタンスの下に GuiObject を配置して、コードの 1行もなくすべてのユーザー入力でドラッグできるようにします。

• 複数の DragStyle オプションから選択し、オブジェクトがResponseStyle を介して動作にどのように応答するかを定義し、オプションで轴、移動制限、またはドラッグ境界を適用します。

• スクリプトは、ドラッグされたオブジェクトの操作に応答して、設定の調整などのロジック応答をドライブできます。

• スタジオの編集とプレイモードで作業し続ける限り、 使用していない 、 選択する 、 移動する 、 スケールする 、または 回転する ツール、および特定のプラグインまたはスタジオの UI エディタツールを使用していないこと。

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

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

1. エクスプローラー ウィンドウで、GuiObject インスタンスをホバーし、⊕ ボタンをクリックします。コンテキストメニューが表示されます。

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

   

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

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

スタイルをドラッグ

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

方向をドラッグ

デフォルトでは、2D モーションと関連する DragStyle マップが祖先のスペースにマップされます LayerCollector。しかし、異なる UI コンポーネントをビルドするときに ReferenceUIInstance または DragAxis を変更したい場合があります。

モーションへの応答

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

翻訳と回転制限

デフォルトでは、DragStyle の内在する制限の後ろにある 2D モーションに制限はありません。最小と最大の翻訳と回転の制限は、必要に応じて以下のプロパティで宣言できます。さらに、ドラッグされたオブジェクトが指定された の境界内でどのように制限されるかを定義できます。

スピード調整

通過 SelectionModeDragSpeed と SelectionModeRotateSpeed で、検出器の最大ドラッグ/回転速度を微調整できます。さらに、UIDragSpeedAxisMapping を通じて、 X / Y 次元のドラッグ速度を調整できます、ディテクターのSelectionModeDragSpeedに基づいて。

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

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

イベントシグナル

次のイベントシグナルを通じて、ユーザーがオブジェクトをドラッグ開始、続行、および終了するときを検出できます。

次のスライダは、コンテナを BoundingUI として指定して、コンテナ領域内での移動を制限し、スケールベースの TranslateLine ドラッグを追加のスクリプトなしでコンテナ全幅に制限することがでスクリプト作成ます。

UIDragDetector - イベントシグナル透明度変更
-- 階層は、SliderContainer ⟩ ハンドル ⟩ 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 プロパティに変更を直接モニタリングできます。

次の検出器は、DragStyle を Rotate に設定し、ユーザーがハンドルを色調回転リングの周りにドラッグでき、すべての変更を検出しながら、Instance:GetPropertyChangedSignal() を通じてドラッグ回転を検出できます。

UIDragDetector - ドラッグ回転変更
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.DragStyle を Enum.UIDragDetectorDragStyle.Scriptable に設定すると、入力位置の Vector2 を受け取り、UDim2 (位置) と浮動 (回転) を返す独自の機能を提供できます。探知器は、返回、DragSpace プロパティ、および DragRelativity プロパティに基づいて、オブジェクトを計算された位置/回転に更新します。

デフォルトでは、返された UDim2 と浮動は、検出器の親のローカルスペースで最終の 位置/回転 を達成するようになります。既存の翻訳/回転制限は、指定された BoundingUI インスタンスによって課される境界制限と同様に、引き続き適用されます。

次の例では、 X 座標入力の変更によって計算されたシンクロ波に続いて UI 要素をドラッグします。検出器の DragSpace が Enum.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 グリッドにクランプする制約関数を使用しています。検出器の ResponseStyle は Enum.UIDragDetectorResponseStyle.Scale に設定され、BoundingUI はグリッドコンテナに設定されていることに注意してください。

UIDragDetector - グリッドでドラッグ、タイルにスナップ
-- 階層は GridContainer ⟩ ハンドル ⟩ 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)