GuiObject

Afficher les obsolètes

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

Création impossible
Non navigable

GuiObject est une classe abstraite (comme BasePart ) pour un objet d'interface utilisateur 2D. Il définit toutes les propriétés relatives

Pour manipuler la disposition des objets GUI de manière spéciale, vous pouvez utiliser une structure de disposition telle que liste/ flexible ou grille, et vous pouvez les style-les au-delà de leurs propriétés de base via modificateurs d'apparence.

Bien que il soit possible de détecter les événements de bouton de souris sur n'importe quel objet GUI en utilisant InputBegan et InputEnded, seuls ImageButton et 1> Class.TextButton</

Résumé

Propriétés

Propriétés hérités de GuiBase2d

Méthodes

Évènements

Évènements hérités de GuiBase2d

Propriétés

Active

Lecture parallèle

Cette propriété détermine si ce GuiObject va couler l'entrée dans l'espace 3D, tels que les modèles sous-jacents avec une classe ClickDetector telle que DragDetector. En d'autres termes, si le joueur essaie de cliquer sur le détecteur avec la souris sur un élément actif de l'interface utilisateur, l'interface bloquera l

Pour les objets GuiButton ( ImageButton et TextButton

Échantillons de code

TextButton Active Debounce

-- Place this LocalScript within a TextButton (or ImageButton)
local textButton = script.Parent
textButton.Text = "Click me"
textButton.Active = true
local function onActivated()
-- This acts like a debounce
textButton.Active = false
-- Count backwards from 5
for i = 5, 1, -1 do
textButton.Text = "Time: " .. i
task.wait(1)
end
textButton.Text = "Click me"
textButton.Active = true
end
textButton.Activated:Connect(onActivated)

AnchorPoint

Lecture parallèle

La propriété AnchorPoint détermine le point d'origine d'un GuiObject , relative à sa taille absolue. Le point d'origine détermine à partir de l'où l'élément est positionné (par le biais de GuiObject.Position ) et de l'expansion de 1> Class.GuiObject.Size1> rendue.

Voir ici pour les diagrammes et les détails illustrés.

Échantillons de code

AnchorPoint Demo

local guiObject = script.Parent
while true do
-- Top-left
guiObject.AnchorPoint = Vector2.new(0, 0)
guiObject.Position = UDim2.new(0, 0, 0, 0)
task.wait(1)
-- Top
guiObject.AnchorPoint = Vector2.new(0.5, 0)
guiObject.Position = UDim2.new(0.5, 0, 0, 0)
task.wait(1)
-- Top-right
guiObject.AnchorPoint = Vector2.new(1, 0)
guiObject.Position = UDim2.new(1, 0, 0, 0)
task.wait(1)
-- Left
guiObject.AnchorPoint = Vector2.new(0, 0.5)
guiObject.Position = UDim2.new(0, 0, 0.5, 0)
task.wait(1)
-- Dead center
guiObject.AnchorPoint = Vector2.new(0.5, 0.5)
guiObject.Position = UDim2.new(0.5, 0, 0.5, 0)
task.wait(1)
-- Right
guiObject.AnchorPoint = Vector2.new(1, 0.5)
guiObject.Position = UDim2.new(1, 0, 0.5, 0)
task.wait(1)
-- Bottom-left
guiObject.AnchorPoint = Vector2.new(0, 1)
guiObject.Position = UDim2.new(0, 0, 1, 0)
task.wait(1)
-- Bottom
guiObject.AnchorPoint = Vector2.new(0.5, 1)
guiObject.Position = UDim2.new(0.5, 0, 1, 0)
task.wait(1)
-- Bottom-right
guiObject.AnchorPoint = Vector2.new(1, 1)
guiObject.Position = UDim2.new(1, 0, 1, 0)
task.wait(1)
end

AutomaticSize

Lecture parallèle

Cette propriété est utilisée pour ajouter automatiquement les objets de l'interface utilisateur parent en fonction de la taille de ses descendants. Vous pouvez utiliser cette propriété pour ajouter dynamiquement du texte et d'autres contenus à un objet d'interface à l'édition ou au moment de l'exécution, et la taille s'ajustera pour s'adapter à ce contenu.

Lorsque AutomaticSize est réglé sur une valeur Enum.AutomaticSize à n'importe quoi d'autre que None, cet objet d'interface utilisateur peut redimensionner en fonction de son contenu enfant.

Pour plus d'informations sur l'utilisation de cette propriété et sur son fonctionnement, voir ici.

Échantillons de code

LocalScript in a ScreenGui

-- Array of text labels/fonts/sizes to output
local labelArray = {
{ text = "Lorem", font = Enum.Font.Creepster, size = 50 },
{ text = "ipsum", font = Enum.Font.IndieFlower, size = 35 },
{ text = "dolor", font = Enum.Font.Antique, size = 55 },
{ text = "sit", font = Enum.Font.SpecialElite, size = 65 },
{ text = "amet", font = Enum.Font.FredokaOne, size = 40 },
}
-- Create an automatically-sized parent frame
local parentFrame = Instance.new("Frame")
parentFrame.AutomaticSize = Enum.AutomaticSize.XY
parentFrame.BackgroundColor3 = Color3.fromRGB(90, 90, 90)
parentFrame.Size = UDim2.fromOffset(25, 100)
parentFrame.Position = UDim2.fromScale(0.1, 0.1)
parentFrame.Parent = script.Parent
-- Add a list layout
local listLayout = Instance.new("UIListLayout")
listLayout.Padding = UDim.new(0, 5)
listLayout.Parent = parentFrame
-- Set rounded corners and padding for visual aesthetics
local roundedCornerParent = Instance.new("UICorner")
roundedCornerParent.Parent = parentFrame
local uiPaddingParent = Instance.new("UIPadding")
uiPaddingParent.PaddingTop = UDim.new(0, 5)
uiPaddingParent.PaddingLeft = UDim.new(0, 5)
uiPaddingParent.PaddingRight = UDim.new(0, 5)
uiPaddingParent.PaddingBottom = UDim.new(0, 5)
uiPaddingParent.Parent = parentFrame
for i = 1, #labelArray do
-- Create an automatically-sized text label from array
local childLabel = Instance.new("TextLabel")
childLabel.AutomaticSize = Enum.AutomaticSize.XY
childLabel.Size = UDim2.fromOffset(75, 15)
childLabel.Text = labelArray[i]["text"]
childLabel.Font = labelArray[i]["font"]
childLabel.TextSize = labelArray[i]["size"]
childLabel.TextColor3 = Color3.new(1, 1, 1)
childLabel.Parent = parentFrame
-- Visual aesthetics
local roundedCorner = Instance.new("UICorner")
roundedCorner.Parent = childLabel
local uiPadding = Instance.new("UIPadding")
uiPadding.PaddingTop = UDim.new(0, 5)
uiPadding.PaddingLeft = UDim.new(0, 5)
uiPadding.PaddingRight = UDim.new(0, 5)
uiPadding.PaddingBottom = UDim.new(0, 5)
uiPadding.Parent = childLabel
task.wait(2)
end

BackgroundColor3

Lecture parallèle

Cette propriété détermine la couleur d'un GuiObject arrière-plan (la couleur de remplissage). Si votre élément contient du texte, comme un TextBox , TextButton ou 1> Class.TextLabel1>, assurez-vous que la couleur de votre arrière-plan contraste la couleur du texte.

Une autre propriété qui détermine les propriétés visuelles de l'arrière-plan est GuiObject.BackgroundTransparency ; si cette valeur est réglée sur 1, ni le fond ni la frontière ne s'afficheront.

Voir aussi BorderColor3 .

Échantillons de code

Rainbow Frame

-- Put this code in a LocalScript in a Frame
local frame = script.Parent
while true do
for hue = 0, 255, 4 do
-- HSV = hue, saturation, value
-- If we loop from 0 to 1 repeatedly, we get a rainbow!
frame.BorderColor3 = Color3.fromHSV(hue / 256, 1, 1)
frame.BackgroundColor3 = Color3.fromHSV(hue / 256, 0.5, 0.8)
task.wait()
end
end

BackgroundTransparency

Lecture parallèle

Cette propriété détermine la transparence de l'arrière-plan et de la frontière de GuiObject . Elle ne détermine pas, cependant, la transparence du texte si le GUI est un TextBox, TextButton

Si cette propriété est réglée sur 1, ni le fond ni la bordure ne seront rendus et le fond de l'interface utilisateur sera complètement transparent.

BorderColor3

Lecture parallèle

Détermine la couleur de la GuiObject bord rectangulaire (également connu sous le nom de couleur du pinceau). Ceci est séparé de la propriété de l'objet GuiObject.BackgroundColor3 . Vous ne pourrez pas voir la bordure de l'objet si sa propriété GuiObject.BorderSizePixel est réglée sur 1> 0

Remarquez que le composant UIStroke permet d'effets de bord plus avancés.

Échantillons de code

Button Highlight

-- Put me inside some GuiObject, preferrably an ImageButton/TextButton
local button = script.Parent
local function onEnter()
button.BorderSizePixel = 2
button.BorderColor3 = Color3.new(1, 1, 0) -- Yellow
end
local function onLeave()
button.BorderSizePixel = 1
button.BorderColor3 = Color3.new(0, 0, 0) -- Black
end
-- Connect events
button.MouseEnter:Connect(onEnter)
button.MouseLeave:Connect(onLeave)
-- Our default state is "not hovered"
onLeave()

BorderMode

Lecture parallèle

Cette propriété détermine la manière dont la GuiObject bordure est distribuée par rapport à ses dimensions en utilisant l'ensemble du même nom, Enum.BorderMode.

Remarquez que UIStroke peut dépasser cette propriété et permettre des effets de bord plus avancés.

BorderSizePixel

Lecture parallèle

Cette propriété détermine la largeur de la GuiObject bordure, en pixels. En la définissant à 0, la bordure est désactivée entièrement.

Remarquez que UIStroke peut dépasser cette propriété et permettre des effets de bord plus avancés.

Échantillons de code

Button Highlight

-- Put me inside some GuiObject, preferrably an ImageButton/TextButton
local button = script.Parent
local function onEnter()
button.BorderSizePixel = 2
button.BorderColor3 = Color3.new(1, 1, 0) -- Yellow
end
local function onLeave()
button.BorderSizePixel = 1
button.BorderColor3 = Color3.new(0, 0, 0) -- Black
end
-- Connect events
button.MouseEnter:Connect(onEnter)
button.MouseLeave:Connect(onLeave)
-- Our default state is "not hovered"
onLeave()

ClipsDescendants

Lecture parallèle

Cette propriété détermine si la GuiObject dépassera (rendra invisible) toute partie des éléments de l'interface graphique descendante qui autrement serait rendue en dehors des limites du rectangle.

Remarquez que GuiObject.Rotation n'est pas pris en charge par cette propriété. Si cette ou l'ancêtre GUI a un non zéro GuiObject.Rotation, cette propriété est ignorée et les éléments de GUI descendants seront rendus indépendamment de la valeur de cette propriété.

Lecture uniquement
Non répliqué
Lecture parallèle

Lorsque le joueur laisse le bout du doigt être appuyé et maintenu

Interactable

Lecture parallèle

Détermine si le GuiButton peut être interagi ou non, ou si le GuiState du GuiObject change ou non.

Sur un GuiButton :

  • Lorsque la valeur Interactable sur le GuiButton est réglée sur false, le 1> Class.GuiButton1> ne pourra plus être pressé ou cliqué, et le 4> Class
  • Lorsque la valeur Interactable est réglée sur GuiButton, le true se comporte normalement à nouveau et le 1> Class.GuiObject.GuiState|GuiState1> se comporte normalement.

Sur un GuiObject :

  • Lorsque la valeur Interactable est réglée sur GuiButton , la valeur false est réglée sur 1>Ensemble.GuiState.NonInteractable|NonInteractable1> .
  • Lorsque la valeur Interactable sur le GuiButton est réglée sur true, la valeur 1>Class.GuiObject.GuiState|GuiState1> se comporte normalement à nouveau.

LayoutOrder

Lecture parallèle

Cette propriété contrôle l'ordre de tri du GuiObject lors de l'utilisation d'un UIGridStyleLayout (tel qu'un UIListLayout ou un 2>Class.UIPageLayout2> ) avec 5>Class.U

GuiObjects sont triés de manière ascendante où les valeurs inférieures prennent la priorité sur les valeurs supérieures. Les objets avec les mêmes valeurs retournent à l'ordre dans lequel ils ont été ajoutés.

Si vous n'êtes pas sûr de devoir ajouter un élément entre deux éléments existants dans le futur, il est une bonne pratique d'utiliser des multiples de 100 ( 0 , 100 , 1> 2001> , etc.). Cela garantit une large distance de séquence de valeurs de conception que vous pouvez utiliser pour les él

Voir également ZIndex qui détermine l'ordre de rendu de l'objet au lieu de trier l'ordre.

NextSelectionDown

Lecture parallèle

Cette propriété définie le GuiObject sélectionné lorsque l'utilisateur déplace le sélecteur de gamepad vers le bas. Si cette propriété est vide, le déplacement du gamepad vers le bas ne changera pas le interface utilisateur graphiquesélectionné.

Déplacer le sélecteur de gamepad vers le bas définit le GuiService.SelectedObject à cet objet sauf si le GUI n'est pas Selectable. Notez que cette propriété peut être définie sur un élément de interface utilisateur graphiquemême si c'est pas Selectable, donc vous devriez vous assurer que la vale

Voir également NextSelectionUp , NextSelectionLeft et NextSelectionRight .

Échantillons de code

Creating a Gamepad Selection Grid

-- Setup the Gamepad selection grid using the code below
local container = script.Parent:FindFirstChild("Container")
local grid = container:GetChildren()
local rowSize = container:FindFirstChild("UIGridLayout").FillDirectionMaxCells
for _, gui in pairs(grid) do
if gui:IsA("GuiObject") then
local pos = gui.Name
-- Left edge
gui.NextSelectionLeft = container:FindFirstChild(pos - 1)
-- Right edge
gui.NextSelectionRight = container:FindFirstChild(pos + 1)
-- Above
gui.NextSelectionUp = container:FindFirstChild(pos - rowSize)
-- Below
gui.NextSelectionDown = container:FindFirstChild(pos + rowSize)
end
end
-- Test the Gamepad selection grid using the code below
local GuiService = game:GetService("GuiService")
local UserInputService = game:GetService("UserInputService")
GuiService.SelectedObject = container:FindFirstChild("1")
function updateSelection(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
local key = input.KeyCode
local selectedObject = GuiService.SelectedObject
if not selectedObject then
return
end
if key == Enum.KeyCode.Up then
if not selectedObject.NextSelectionUp then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Down then
if not selectedObject.NextSelectionDown then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Left then
if not selectedObject.NextSelectionLeft then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Right then
if not selectedObject.NextSelectionRight then
GuiService.SelectedObject = selectedObject
end
end
end
end
UserInputService.InputBegan:Connect(updateSelection)

NextSelectionLeft

Lecture parallèle

Cette propriété définie le GuiObject sélectionné lorsque l'utilisateur déplace le sélecteur de gamepad à gauche. Si cette propriété est vide, le déplacement du gamepad à gauche ne changera pas le interface utilisateur graphiquesélectionné.

Déplacer le sélecteur de gamepad à gauche définit le GuiService.SelectedObject à cet objet s'il n'est pas Selectable . Notez que cette propriété peut être réglée sur un élément de interface utilisateur graphiquemême si c'est pas Selectable, donc vous devez vous assurer que la valeur d

Voir également NextSelectionUp , NextSelectionDown et NextSelectionRight.

Échantillons de code

Creating a Gamepad Selection Grid

-- Setup the Gamepad selection grid using the code below
local container = script.Parent:FindFirstChild("Container")
local grid = container:GetChildren()
local rowSize = container:FindFirstChild("UIGridLayout").FillDirectionMaxCells
for _, gui in pairs(grid) do
if gui:IsA("GuiObject") then
local pos = gui.Name
-- Left edge
gui.NextSelectionLeft = container:FindFirstChild(pos - 1)
-- Right edge
gui.NextSelectionRight = container:FindFirstChild(pos + 1)
-- Above
gui.NextSelectionUp = container:FindFirstChild(pos - rowSize)
-- Below
gui.NextSelectionDown = container:FindFirstChild(pos + rowSize)
end
end
-- Test the Gamepad selection grid using the code below
local GuiService = game:GetService("GuiService")
local UserInputService = game:GetService("UserInputService")
GuiService.SelectedObject = container:FindFirstChild("1")
function updateSelection(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
local key = input.KeyCode
local selectedObject = GuiService.SelectedObject
if not selectedObject then
return
end
if key == Enum.KeyCode.Up then
if not selectedObject.NextSelectionUp then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Down then
if not selectedObject.NextSelectionDown then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Left then
if not selectedObject.NextSelectionLeft then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Right then
if not selectedObject.NextSelectionRight then
GuiService.SelectedObject = selectedObject
end
end
end
end
UserInputService.InputBegan:Connect(updateSelection)

NextSelectionRight

Lecture parallèle

Cette propriété définie le GuiObject sélectionné lorsque l'utilisateur déplace le sélecteur de gamepad à droite. Si cette propriété est vide, le déplacement du gamepad à droite ne changera pas le interface utilisateur graphiquesélectionné.

Déplacer le sélecteur de gamepad à droite définit le GuiService.SelectedObject à cet objet sauf si la GUI n'est pas Selectable . Notez que cette propriété peut être réglée sur un élément de interface utilisateur graphiquemême si c'est pas Selectable, donc vous devez vous assurer que la

Voir également NextSelectionUp , NextSelectionDown et NextSelectionLeft .

Échantillons de code

Creating a Gamepad Selection Grid

-- Setup the Gamepad selection grid using the code below
local container = script.Parent:FindFirstChild("Container")
local grid = container:GetChildren()
local rowSize = container:FindFirstChild("UIGridLayout").FillDirectionMaxCells
for _, gui in pairs(grid) do
if gui:IsA("GuiObject") then
local pos = gui.Name
-- Left edge
gui.NextSelectionLeft = container:FindFirstChild(pos - 1)
-- Right edge
gui.NextSelectionRight = container:FindFirstChild(pos + 1)
-- Above
gui.NextSelectionUp = container:FindFirstChild(pos - rowSize)
-- Below
gui.NextSelectionDown = container:FindFirstChild(pos + rowSize)
end
end
-- Test the Gamepad selection grid using the code below
local GuiService = game:GetService("GuiService")
local UserInputService = game:GetService("UserInputService")
GuiService.SelectedObject = container:FindFirstChild("1")
function updateSelection(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
local key = input.KeyCode
local selectedObject = GuiService.SelectedObject
if not selectedObject then
return
end
if key == Enum.KeyCode.Up then
if not selectedObject.NextSelectionUp then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Down then
if not selectedObject.NextSelectionDown then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Left then
if not selectedObject.NextSelectionLeft then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Right then
if not selectedObject.NextSelectionRight then
GuiService.SelectedObject = selectedObject
end
end
end
end
UserInputService.InputBegan:Connect(updateSelection)

NextSelectionUp

Lecture parallèle

Cette propriété définie le GuiObject sélectionné lorsque l'utilisateur déplace le sélecteur de gamepad vers le haut. Si cette propriété est vide, le déplacement du gamepad vers le haut ne modifiera pas le interface utilisateur graphiquesélectionné.

Déplacer le sélecteur de gamepad vers le haut définit le GuiService.SelectedObject à cet objet sauf si le GUI n'est pas Selectable. Notez que cette propriété peut être réglée sur un élément de interface utilisateur graphiquemême si c'est pas Class.GuiObject.Selectable|Selectable », donc vous devez vous assurer que la valeur d'une

Voir également NextSelectionDown , NextSelectionLeft , NextSelectionRight .

Échantillons de code

Creating a Gamepad Selection Grid

-- Setup the Gamepad selection grid using the code below
local container = script.Parent:FindFirstChild("Container")
local grid = container:GetChildren()
local rowSize = container:FindFirstChild("UIGridLayout").FillDirectionMaxCells
for _, gui in pairs(grid) do
if gui:IsA("GuiObject") then
local pos = gui.Name
-- Left edge
gui.NextSelectionLeft = container:FindFirstChild(pos - 1)
-- Right edge
gui.NextSelectionRight = container:FindFirstChild(pos + 1)
-- Above
gui.NextSelectionUp = container:FindFirstChild(pos - rowSize)
-- Below
gui.NextSelectionDown = container:FindFirstChild(pos + rowSize)
end
end
-- Test the Gamepad selection grid using the code below
local GuiService = game:GetService("GuiService")
local UserInputService = game:GetService("UserInputService")
GuiService.SelectedObject = container:FindFirstChild("1")
function updateSelection(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
local key = input.KeyCode
local selectedObject = GuiService.SelectedObject
if not selectedObject then
return
end
if key == Enum.KeyCode.Up then
if not selectedObject.NextSelectionUp then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Down then
if not selectedObject.NextSelectionDown then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Left then
if not selectedObject.NextSelectionLeft then
GuiService.SelectedObject = selectedObject
end
elseif key == Enum.KeyCode.Right then
if not selectedObject.NextSelectionRight then
GuiService.SelectedObject = selectedObject
end
end
end
end
UserInputService.InputBegan:Connect(updateSelection)

Position

Lecture parallèle

Cette propriété détermine le pixel et la position vectorielle GuiObject et le script de position en utilisant un UDim2. La position est centrée autour du point d'ancrage de l'objet.

La position vectorielle est relative à la taille de l'élément GUI parent, si nécessaire.

Les parties pixel de la valeur UDim2 sont les mêmes, indépendamment de la taille de l'interface utilisateur graphiqueparent. Les valeurs représentent la position de l'objet en pixels. Une position d'objet actuelle peut être lue à partir de la propriété GuiBase2d.AbsolutePosition.

Rotation

Lecture parallèle

Cette propriété détermine le nombre de degrés par lequel le GuiObject est tourné. La rotation est relative à la centré du objet, non la 2>Class.GuiObject.AnchorPoint|AnchorPoint2>, ce qui signifie que vous ne pouvez pas modifier le point de rotation. De plus, cette propriété n'est pas compatible avec

Selectable

Lecture parallèle

Cette propriété détermine si la GuiObject peut être sélectionnée lors de la navigation dans les interfaces graphiques à l'aide d'un gamepad.

Si cette propriété est vraie, une GUI peut être sélectionnée. La sélection d'une GUI définira également la propriété GuiService.SelectedObject à cet objet.

Lorsque ceci est faux, l'interface graphique ne peut pas être sélectionnée. Cependant, en définissant ceci comme faux lorsqu'une interface graphique est sélectionnée, il ne la désélectionnera pas non plus et ne changera pas la valeur de la propriété GuiService.SelectedObject.

Ajouter GuiObject.SelectionGained et GuiObject.SelectionLost ne déclenchera pas pour l'élément. Pour désélectionner un GuiObject, vous devez modifier la propriété GuiService.SelectedObject.

Cette propriété est utile si un interface utilisateur graphiqueest connecté à plusieurs GUIs via des propriétés telles que cette GuiObject.NextSelectionUp , GuiObject.NextSelectionDown , Class.GuiObject|NextSelectionRight</

Échantillons de code

Limiting TextBox Selection

local GuiService = game:GetService("GuiService")
local textBox = script.Parent
local function gainFocus()
textBox.Selectable = true
GuiService.SelectedObject = textBox
end
local function loseFocus(_enterPressed, _inputObject)
GuiService.SelectedObject = nil
textBox.Selectable = false
end
-- The FocusLost and FocusGained event will fire because the textBox
-- is of type TextBox
textBox.Focused:Connect(gainFocus)
textBox.FocusLost:Connect(loseFocus)

SelectionImageObject

Lecture parallèle

Cette propriété remplace l'ornement de sélection par défaut utilisé pour les gamepads.

Remarquez que le choisi SelectionImageObject superpose le sélectionné GuiObject avec le Size de l'image. Pour les meilleurs résultats, vous devriez tailler le 1> SelectionImageObject1> personnalisé via les valeurs de l'échelle 4> Datatype.UDim2

Changer le SelectionImageObject pour un élément GuiObject ne modifie que cet élément. Pour affecter tous les éléments de l'interface graphique d'un utilisateur, définissez la propriété PlayerGui.SelectionImageObject.

Pour déterminer ou configurer lequel des éléments d'interface graphique de l'utilisateur est sélectionné, vous pouvez utiliser la propriété GuiService.SelectedObject. Le joueur utilise le gamepad pour sélectionner différents éléments d'interface graphique, en invoquant le Class

SelectionOrder

Lecture parallèle

GuiObjects avec un sélectionneur inférieur sont sélectionnés avant GuiObjects avec un sélectionneur plus élevé lorsque vous commencez la sélection du gamepad ou appelez GuiService:Select() sur un ancêtre. Cette propriété n'affecte pas la navigation directionnelle. La valeur par défaut est 0.

Size

Lecture parallèle

Cette propriété détermine la taille GuiObject du script de pixel en utilisant une UDim2.

La taille linéaire est relative à la taille de l'élément GUI parent, si applicable.

Les parties pixel de la valeur UDim2 sont les mêmes, indépendamment de la taille de l'interface utilisateur graphiqueparent. Les valeurs représentent la taille de l'objet en pixels. La taille réelle des pixels d'un objet peut être lue à partir de la propriété GuiBase2d.AbsoluteSize.

Si la GuiObject a un parent, sa taille le long de chaque axe est également influencée par le SizeConstraint du parent.

Échantillons de code

Health Bar

local Players = game:GetService("Players")
local player = Players.LocalPlayer
-- Paste script into a LocalScript that is
-- parented to a Frame within a Frame
local frame = script.Parent
local container = frame.Parent
container.BackgroundColor3 = Color3.new(0, 0, 0) -- black
-- This function is called when the humanoid's health changes
local function onHealthChanged()
local human = player.Character.Humanoid
local percent = human.Health / human.MaxHealth
-- Change the size of the inner bar
frame.Size = UDim2.new(percent, 0, 1, 0)
-- Change the color of the health bar
if percent < 0.1 then
frame.BackgroundColor3 = Color3.new(1, 0, 0) -- black
elseif percent < 0.4 then
frame.BackgroundColor3 = Color3.new(1, 1, 0) -- yellow
else
frame.BackgroundColor3 = Color3.new(0, 1, 0) -- green
end
end
-- This function runs is called the player spawns in
local function onCharacterAdded(character)
local human = character:WaitForChild("Humanoid")
-- Pattern: update once now, then any time the health changes
human.HealthChanged:Connect(onHealthChanged)
onHealthChanged()
end
-- Connect our spawn listener; call it if already spawned
player.CharacterAdded:Connect(onCharacterAdded)
if player.Character then
onCharacterAdded(player.Character)
end

SizeConstraint

Lecture parallèle

Cette propriété définit les Size axes sur lesquels le GuiObject sera basé, par rapport à la taille de son parent.

Cette propriété est utile pour créer des objets GUI qui sont destinés à s'adapter avec la largeur ou la hauteur d'un parent objet, mais pas les deux, en conservant efficacement la proportion de l'aspect de l'objet.

Transparency

Caché
Non répliqué
Lecture parallèle

Une propriété mixte de BackgroundTransparency et TextTransparency .

Visible

Lecture parallèle

Cette propriété, que le GuiObject et ses descendants seront rendus.

Le rendu de composants individuels d'un GuiObject peut être contrôlé individuellement à travers les propriétés de transparence telles que GuiObject.BackgroundTransparency , TextLabel.TextTransparency et 1> Class.ImageLabel.ImageTransparency1> .

Lorsque cette propriété est false, le GuiObject sera ignoré par les structures de niveau telles que UIListLayout, 1> Class.UIGridLayout1> et 4> Class.UITableLayout4>. En d'autres termes, l'espace que l'élément occupe autrement dans le niveau est utilisé par d'autres éléments.

Échantillons de code

UI Window

local gui = script.Parent
local window = gui:WaitForChild("Window")
local toggleButton = gui:WaitForChild("ToggleWindow")
local closeButton = window:WaitForChild("Close")
local function toggleWindowVisbility()
-- Flip a boolean using the `not` keyword
window.Visible = not window.Visible
end
toggleButton.Activated:Connect(toggleWindowVisbility)
closeButton.Activated:Connect(toggleWindowVisbility)

ZIndex

Lecture parallèle

Cette propriété détermine l'ordre dans lequel un GuiObject rendu par rapport aux autres.

Par défaut, GuiObjects rendu dans l'ordre de priorité croissant où ceux avec des valeurs inférieures à ZIndex sont rendus sous ceux avec des valeurs plus élevées. Vous pouvez modifier l'ordre de rendu dans un Class.ScreenGui

Si vous n'êtes pas sûr de devoir ajouter un élément entre deux éléments existants dans le futur, il est une bonne pratique d'utiliser des multiples de 100 ( 0 , 100 , 1> 2001> , etc.). Cela garantit une large distance de rendu des valeurs que vous pouvez utiliser pour les éléments cou

Voir également LayoutOrder qui contrôle l'ordre de tri d'un Class.GuiObject lorsqu'il est utilisé avec une structure de niveau comme GuiObject ou 1> Class.UIGridLayout1>.

Méthodes

TweenPosition

Déplace facilement une GUI à une nouvelle position UDim2 dans le temps spécifié en utilisant le Enum.EasingDirection et le Enum.EasingStyle spécifiés.

Cette fonction retournera si le tween jouera. Il ne jouera pas si un autre tween agit sur le GuiObject et le paramètre d'overture est faux.

Voir aussi :

Paramètres

endPosition: UDim2

Où le GUI devrait se déplacer.

easingDirection: Enum.EasingDirection

La direction dans laquelle faciliter l'interface graphique jusqu'à la Position de fin.

Valeur par défaut : "Out"
easingStyle: Enum.EasingStyle

Le style dans lequel faciliter l'interface graphique à la Position d'arrêt.

Valeur par défaut : "Quad"
time: number

Combien de temps, en secondes, la tween prendra pour se terminer.

Valeur par défaut : 1
override: bool

Whether the tween will override an in-進行中 tween.

Valeur par défaut : false
callback: function

Une fonction de rappel pour s'exécuter lorsque le tween est terminé.

Valeur par défaut : "nil"

Retours

Whether le tween va jouer.

Échantillons de code

Tween a GUI's Position

local START_POSITION = UDim2.new(0, 0, 0, 0)
local GOAL_POSITION = UDim2.new(1, 0, 1, 0)
local guiObject = script.Parent
local function callback(state)
if state == Enum.TweenStatus.Completed then
print("The tween completed uninterrupted")
elseif state == Enum.TweenStatus.Canceled then
print("Another tween cancelled this one")
end
end
-- Initialize the GuiObject position, then start the tween:
guiObject.Position = START_POSITION
local willPlay = guiObject:TweenPosition(
GOAL_POSITION, -- Final position the tween should reach
Enum.EasingDirection.In, -- Direction of the easing
Enum.EasingStyle.Sine, -- Kind of easing to apply
2, -- Duration of the tween in seconds
true, -- Whether in-progress tweens are interrupted
callback -- Function to be callled when on completion/cancelation
)
if willPlay then
print("The tween will play")
else
print("The tween will not play")
end

TweenSize

Ajuste facilement une GUI à une nouvelle taille UDim2 dans le temps spécifié en utilisant le Enum.EasingDirection et le Enum.EasingStyle spécifiés.

Cette fonction retournera si le tween jouera. Normalement, cela ne sera toujours pas vrai, mais il retournera faux si un autre tween est actif et que le paramètre Override est réglé sur faux.

Voir aussi :

Paramètres

endSize: UDim2

La taille que la GUI doit ajuster.

easingDirection: Enum.EasingDirection

La direction dans laquelle faciliter l'interface graphique jusqu'à la taille de fin.

Valeur par défaut : "Out"
easingStyle: Enum.EasingStyle

Le style dans lequel faciliter l'interface graphique à la taille de fin.

Valeur par défaut : "Quad"
time: number

Combien de temps, en secondes, la tween prendra pour se terminer.

Valeur par défaut : 1
override: bool

Whether the tween will override an in-進行中 tween.

Valeur par défaut : false
callback: function

Une fonction de rappel pour s'exécuter lorsque le tween est terminé.

Valeur par défaut : "nil"

Retours

Whether le tween va jouer.

Échantillons de code

Tween a GuiObject's Size

local guiObject = script.Parent
local function callback(didComplete)
if didComplete then
print("The tween completed successfully")
else
print("The tween was cancelled")
end
end
local willTween = guiObject:TweenSize(
UDim2.new(0.5, 0, 0.5, 0), -- endSize (required)
Enum.EasingDirection.In, -- easingDirection (default Out)
Enum.EasingStyle.Sine, -- easingStyle (default Quad)
2, -- time (default: 1)
true, -- should this tween override ones in-progress? (default: false)
callback -- a function to call when the tween completes (default: nil)
)
if willTween then
print("The GuiObject will tween")
else
print("The GuiObject will not tween")
end

TweenSizeAndPosition

Résize et déplace une GUI dans une nouvelle taille et position dans le temps spécifié en utilisant le UDim2 défini et le Enum.EasingDirection et le Enum.EasingStyle définis.

Cette fonction retournera si le tween jouera. Normalement, cela ne sera toujours pas vrai, mais il retournera faux si un autre tween est actif et que le paramètre Override est réglé sur faux.

Voir aussi :

Paramètres

endSize: UDim2

La taille que la GUI doit ajuster.

endPosition: UDim2

Où le GUI devrait se déplacer.

easingDirection: Enum.EasingDirection

La direction dans laquelle faciliter l'utilisation de l'interface graphique jusqu'à endSize et endPosition .

Valeur par défaut : "Out"
easingStyle: Enum.EasingStyle

Le style dans lequel il est facile de déplacer la GUI jusqu'à la taille de fin et la position de fin.

Valeur par défaut : "Quad"
time: number

Combien de temps, en secondes, la tween prendra pour se terminer.

Valeur par défaut : 1
override: bool

Whether the tween will override an in-進行中 tween.

Valeur par défaut : false
callback: function

Une fonction de rappel pour s'exécuter lorsque le tween est terminé.

Valeur par défaut : "nil"

Retours

Whether le tween va jouer.

Échantillons de code

Tween a GUI's Size and Position

local frame = script.Parent.Frame
frame:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.new(0, 0, 0, 0))

Évènements

InputBegan

Cet événement se déclenche lorsqu'un utilisateur commence à interagir avec le GuiObject via un appareil d'interface humain-ordinateur (bouton de souris, toucher de début, bouton de clavier, etc).

Le UserInputService a un événement de nom similaire qui n'est pas restreint à un élément d'interface spécifique : UserInputService.InputBegan.

Cet événement se déclenchera toujours indépendamment de l'état du jeu.

Voir aussi :

Paramètres

Un InputObject , qui contient des données utiles pour la requête de l'entrée de l'utilisateur, telles que le type of input, le state of input et le 1> Class.InputObject.Position|coordonnées d'écran de l'entrée1> .


Échantillons de code

Tracking the Beginning of Input on a GuiObject

-- In order to use the InputBegan event, you must specify the GuiObject
local gui = script.Parent
-- A sample function providing multiple usage cases for various types of user input
local function inputBegan(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
print("A key is being pushed down! Key:", input.KeyCode)
elseif input.UserInputType == Enum.UserInputType.MouseButton1 then
print("The left mouse button has been pressed down at", input.Position)
elseif input.UserInputType == Enum.UserInputType.MouseButton2 then
print("The right mouse button has been pressed down at", input.Position)
elseif input.UserInputType == Enum.UserInputType.Touch then
print("A touchscreen input has started at", input.Position)
elseif input.UserInputType == Enum.UserInputType.Gamepad1 then
print("A button is being pressed on a gamepad! Button:", input.KeyCode)
end
end
gui.InputBegan:Connect(inputBegan)

InputChanged

Cet événement se déclenche lorsqu'un utilisateur change la façon dont ils interagissent via un appareil d'interface humain-ordinateur (bouton de souris, toucher commencer, bouton de clavier, etc).

Le UserInputService a un événement de nom similaire qui n'est pas restreint à un élément d'interface spécifique : UserInputService.InputChanged.

Cet événement se déclenchera toujours indépendamment de l'état du jeu.

Voir aussi :

Paramètres

Un InputObject , qui contient des données utiles pour la requête de l'entrée de l'utilisateur, telles que le type of input, le state of input et le 1> Class.InputObject.Position|coordonnées d'écran de l'entrée1> .


Échantillons de code

GuiObject InputChanged Demo

local UserInputService = game:GetService("UserInputService")
local gui = script.Parent
local function printMovement(input)
print("Position:", input.Position)
print("Movement Delta:", input.Delta)
end
local function inputChanged(input)
if input.UserInputType == Enum.UserInputType.MouseMovement then
print("The mouse has been moved!")
printMovement(input)
elseif input.UserInputType == Enum.UserInputType.MouseWheel then
print("The mouse wheel has been scrolled!")
print("Wheel Movement:", input.Position.Z)
elseif input.UserInputType == Enum.UserInputType.Gamepad1 then
if input.KeyCode == Enum.KeyCode.Thumbstick1 then
print("The left thumbstick has been moved!")
printMovement(input)
elseif input.KeyCode == Enum.KeyCode.Thumbstick2 then
print("The right thumbstick has been moved!")
printMovement(input)
elseif input.KeyCode == Enum.KeyCode.ButtonL2 then
print("The pressure being applied to the left trigger has changed!")
print("Pressure:", input.Position.Z)
elseif input.KeyCode == Enum.KeyCode.ButtonR2 then
print("The pressure being applied to the right trigger has changed!")
print("Pressure:", input.Position.Z)
end
elseif input.UserInputType == Enum.UserInputType.Touch then
print("The user's finger is moving on the screen!")
printMovement(input)
elseif input.UserInputType == Enum.UserInputType.Gyro then
local _rotInput, rotCFrame = UserInputService:GetDeviceRotation()
local rotX, rotY, rotZ = rotCFrame:toEulerAnglesXYZ()
local rot = Vector3.new(math.deg(rotX), math.deg(rotY), math.deg(rotZ))
print("The rotation of the user's mobile device has been changed!")
print("Position", rotCFrame.p)
print("Rotation:", rot)
elseif input.UserInputType == Enum.UserInputType.Accelerometer then
print("The acceleration of the user's mobile device has been changed!")
printMovement(input)
end
end
gui.InputChanged:Connect(inputChanged)

InputEnded

L'événement Terminé maintenant se déclenche lorsqu'un utilisateur arrête d'interagir via un appareil d'interface humain-ordinateur (bouton de souris, toucher de début, bouton de clavier, etc).

Le UserInputService a un événement de nom similaire qui n'est pas restreint à un élément d'interface spécifique : UserInputService.InputEnded.

Cet événement se déclenchera toujours indépendamment de l'état du jeu.

Voir aussi :

Paramètres

Un InputObject , qui contient des données utiles pour la requête de l'entrée de l'utilisateur, telles que le type of input, le state of input et le 1> Class.InputObject.Position|coordonnées d'écran de l'entrée1> .


Échantillons de code

Tracking the End of Input on a GuiObject

-- In order to use the InputChanged event, you must specify a GuiObject
local gui = script.Parent
-- A sample function providing multiple usage cases for various types of user input
local function inputEnded(input)
if input.UserInputType == Enum.UserInputType.Keyboard then
print("A key has been released! Key:", input.KeyCode)
elseif input.UserInputType == Enum.UserInputType.MouseButton1 then
print("The left mouse button has been released at", input.Position)
elseif input.UserInputType == Enum.UserInputType.MouseButton2 then
print("The right mouse button has been released at", input.Position)
elseif input.UserInputType == Enum.UserInputType.Touch then
print("A touchscreen input has been released at", input.Position)
elseif input.UserInputType == Enum.UserInputType.Gamepad1 then
print("A button has been released on a gamepad! Button:", input.KeyCode)
end
end
gui.InputEnded:Connect(inputEnded)

MouseEnter

L'événement MouseEnter se déclenche lorsqu'un utilisateur déplace son curseur dans un élément GUI .

Ne faites pas confiance aux arguments x et y passés par cet événement comme une façon fiable de déterminer où se trouve la souris lorsqu'elle entre dans une interface utilisateur graphique. Ces coordonnées peuvent varier même lorsque la souris entre dans la interface utilisateur graphiquevia le même bord - surtout lorsque la souris entre dans l'élément rapidement. C'est en raison du fait que les coordonnées indiquent la position de

Cet événement se déclenche même lorsque l'élément GUI rendu sous un autre élément.

Si vous souhaitez suivre quand la souris d'un utilisateur quitte un élément de l'interface utilisateur, vous pouvez utiliser l'événement GuiObject.MouseLeave.

Voir aussi :

Paramètres

La x coordonnée de l'écran dans les pixels, relative à l'angle supérieur gauche de l'écran.

La coordonnée de l'écran de la souris en pixels, relative à l'angle supérieur gauche de l'écran.


Échantillons de code

Printing where a Mouse Enters a GuiObject

local guiObject = script.Parent
guiObject.MouseEnter:Connect(function(x, y)
print("The user's mouse cursor has entered the GuiObject at position", x, ",", y)
end)

MouseLeave

L'événement MouseLeave se déclenche lorsqu'un utilisateur déplace son curseur à partir d'un élément GUI.

Ne faites pas confiance aux arguments x et y passés par cet événement comme une façon fiable de déterminer où se trouve la souris lorsqu'elle quitte un interface utilisateur graphique. Ces coordonnées peuvent varier même lorsque la souris quitte le interface utilisateur graphiquevia le même bord - surtout lorsque la souris quitte l'élément rapidement. C'est en raison du fait que les coordonnées indiquent la position de

Cet événement se déclenche même lorsque l'élément GUI rendu sous un autre élément.

Voir aussi :

Paramètres

La x coordonnée de l'écran dans les pixels, relative à l'angle supérieur gauche de l'écran.

La coordonnée de l'écran de la souris en pixels, relative à l'angle supérieur gauche de l'écran.


MouseMoved

Tire toujours le mouse quand il est dans un élément GUI. C'est similaire à Mouse.Move, qui se déclenche indépendamment de si le mouse de l'utilisateur est sur un élément GUI.

Remarquez que cet événement se déclenche lorsque la position de la souris est mise à jour, donc il s'enflamera à plusieurs reprises pendant qu'il est déplacé.

Les arguments x et y indiquent les coordonnées de l'écran actualisées de la souris de l'utilisateur en pixels. Ces derniers peuvent être utiles pour déterminer la position de la souris sur la interface utilisateur graphique, l'écran et le delta, car la position précédente de la souris si elle est suivie dans une variable globale.

Le code ci-dessous montre comment déterminer l'Vector2 décalage de la souris de l'utilisateur par rapport à un élément GUI :


local CustomScrollingFrame = script.Parent
local SubFrame = CustomScrollingFrame:FindFirstChild("SubFrame")
local mouse = game.Players.LocalPlayer:GetMouse()
function getPosition(X, Y)
local gui_X = CustomScrollingFrame.AbsolutePosition.X
local gui_Y = CustomScrollingFrame.AbsolutePosition.Y
local pos = Vector2.new(math.abs(X - gui_X), math.abs(Y - gui_Y - 36))
print(pos)
end
CustomScrollingFrame.MouseMoved:Connect(getPosition)

Notez que cet événement peut ne pas se déclencher exactement lorsque la souris de l'utilisateur entre ou quitte un élément GUI. Par conséquent, les arguments x et y peuvent ne pas correspondre parfaitement aux coordonnées des bords de la interface utilisateur graphique.

Voir aussi :

Paramètres

La x coordonnée de l'écran dans les pixels, relative à l'angle supérieur gauche de l'écran.

La coordonnée de l'écran de la souris en pixels, relative à l'angle supérieur gauche de l'écran.


MouseWheelBackward

L'événement WheelBackward se déclenche lorsqu'un utilisateur fait glisser leur roue de souris quand la souris est sur un élément GUI. C'est similaire à Mouse.WheelBackward, qui se déclenche indépendamment de si la souris de l'utilisateur est sur un élément GUI.

Cet événement se déclenche simplement comme un indicateur du mouvement arrière de la roue. Cela signifie que les arguments x et y de la souris ne changent pas en tant que résultat de cet événement. Ces coordonnées ne changent que lorsque la souris se déplace, ce qui peut être suivi par l'événement GuiObject.MouseMoved.

Voir aussi :

Paramètres

La x coordonnée de l'écran dans les pixels, relative à l'angle supérieur gauche de l'écran.

La coordonnée de l'écran de la souris en pixels, relative à l'angle supérieur gauche de l'écran.


MouseWheelForward

L'événement WheelForward se déclenche lorsqu'un utilisateur fait défiler sa molette de souris vers l'avant lorsque la souris est sur un élément GUI. Il est similaire à Mouse.WheelForward, qui se déclenche indépendamment de si la souris de l'utilisateur est sur un élément GUI.

Cet événement se déclenche simplement comme un indicateur du déplacement en avant de la roue. Cela signifie que les arguments x et y de la souris ne changent pas en résultat de cet événement. Ces coordonnées ne changent que lorsque la souris se déplace, ce qui peut être suivi par l'événement GuiObject.MouseMoved.

Voir aussi :

Paramètres

La x coordonnée de l'écran dans les pixels, relative à l'angle supérieur gauche de l'écran.

La coordonnée y de la souris de l'utilisateur.


SelectionGained

Cet événement se déclenche lorsque le sélecteur Gamepad commence à se concentrer sur le GuiObject .

Si vous souhaitez vérifier à partir du Gamepad sélectionnez arrêts en vedette sur l'élément GUI, vous pouvez utiliser l'événement GuiObject.SelectionLost.

Lorsqu'un GUI gagne le focus de sélection, la valeur de la propriété SelectedObject change également pour la sélection que l'utilisateur a choisie. Pour déterminer lequel GUI a choisi la sélection, vérifiez la valeur de cette propriété.


Échantillons de code

Handling GUI Selection Gained

local guiObject = script.Parent
local function selectionGained()
print("The user has selected this button with a gamepad.")
end
guiObject.SelectionGained:Connect(selectionGained)

SelectionLost

Cet événement se déclenche lorsque le sélecteur Gamepad arrête de se concentrer sur le GUI .

Si vous voulez vérifier à partir du Gamepad sélectionnez commence à se concentrer sur l'élément GUI, vous pouvez utiliser l'événement GuiObject.SelectionGained.

Lorsqu'un GUI perd le focus de sélection, la valeur de la propriété SelectionObject change soit nul soit l'élément de l'interface utilisateur qui gagne le focus de sélection. Pour déterminer le GUI qui a gagné le focus de sélection, ou si aucun GUI n'a été sélectionné, vérifiez la valeur de cette propriété.


Échantillons de code

Handling GUI Selection Lost

local guiObject = script.Parent
local function selectionLost()
print("The user no longer has this selected with their gamepad.")
end
guiObject.SelectionLost:Connect(selectionLost)

TouchLongPress

L'événement TouchLongPress se déclenche après un court moment lorsque le joueur maintient son doigt sur l'élément de l'interface utilisateur en utilisant un appareil de pointeur activé par le toucher.

Puisque cet événement ne nécessite qu'un seul doigt, cet événement peut être simulé dans Studio en utilisant l'émulateur et une souris.

Paramètres

touchPositions: Array

Une tableau de Vector2 qui décrivent les positions relatives des doigts impliqués dans le geste.

Un Enum.UserInputState qui décrit l'état du geste :

  • Démarrez les incendies une fois au début du geste (après le court délai)
  • Changez les incendies si le joueur déplace son doigt pendant qu'il appuie sur
  • Mettez fin aux feux une fois au bout du geste lorsqu'ils relâchent leur doigt.

Échantillons de code

Move UI Element with TouchLongPress

local frame = script.Parent
frame.Active = true
local dragging = false
local basePosition
local startTouchPosition
local borderColor3
local backgroundColor3
local function onTouchLongPress(touchPositions, state)
if state == Enum.UserInputState.Begin and not dragging then
-- Start a drag
dragging = true
basePosition = frame.Position
startTouchPosition = touchPositions[1]
-- Color the frame to indicate the drag is happening
borderColor3 = frame.BorderColor3
backgroundColor3 = frame.BackgroundColor3
frame.BorderColor3 = Color3.new(1, 1, 1) -- White
frame.BackgroundColor3 = Color3.new(0, 0, 1) -- Blue
elseif state == Enum.UserInputState.Change then
local touchPosition = touchPositions[1]
local deltaPosition = UDim2.new(
0,
touchPosition.X - startTouchPosition.X,
0,
touchPosition.Y - startTouchPosition.Y
)
frame.Position = basePosition + deltaPosition
elseif state == Enum.UserInputState.End and dragging then
-- Stop the drag
dragging = false
frame.BorderColor3 = borderColor3
frame.BackgroundColor3 = backgroundColor3
end
end
frame.TouchLongPress:Connect(onTouchLongPress)

TouchPan

L'événement TouchPan se déclenche lorsque le joueur déplace son doigt sur l'élément de l'interface utilisateur en utilisant un appareil de pointe activé par le toucher. Il se déclenche peu de temps avant que GuiObject.TouchSwipe ne le fasse, et ne se déclenche pas avec GuiObject.TouchTap. Cet événement est utile pour permettre au joueur de manipuler la position

Cet événement se déclenche avec une table de Vector2 qui décrivent les positions d'écran relative des doigts impliqués dans le geste. En outre, il se déclenche plusieurs fois : Enum.UserInputState.Begin après un court délai, Enum.UserInputState.Change lorsque le joueur déplace son doigt pendant le geste et enfin

Cet événement ne peut pas être simulé dans Studio en utilisant l'émulateur et une souris ; vous devez avoir un appareil de touche réel pour le déclencher.

Paramètres

touchPositions: Array

Un tableau Lua de Vector2 objets, chacun indiquant la position de tous les doigts impliqués dans le geste.

totalTranslation: Vector2

Indique à quel point le geste de la poêle est allé de son point de départ.

velocity: Vector2

Indique à quel point la gestion est rapide dans chaque dimension.

Indique le Enum.UserInputState de la gestion.


Échantillons de code

Panning UI Element

local innerFrame = script.Parent
local outerFrame = innerFrame.Parent
outerFrame.BackgroundTransparency = 0.75
outerFrame.Active = true
outerFrame.Size = UDim2.new(1, 0, 1, 0)
outerFrame.Position = UDim2.new(0, 0, 0, 0)
outerFrame.AnchorPoint = Vector2.new(0, 0)
outerFrame.ClipsDescendants = true
local dragging = false
local basePosition
local function onTouchPan(_touchPositions, totalTranslation, _velocity, state)
if state == Enum.UserInputState.Begin and not dragging then
dragging = true
basePosition = innerFrame.Position
outerFrame.BackgroundTransparency = 0.25
elseif state == Enum.UserInputState.Change then
innerFrame.Position = basePosition + UDim2.new(0, totalTranslation.X, 0, totalTranslation.Y)
elseif state == Enum.UserInputState.End and dragging then
dragging = false
outerFrame.BackgroundTransparency = 0.75
end
end
outerFrame.TouchPan:Connect(onTouchPan)

TouchPinch

L'événement TouchPinch se déclenche lorsque le joueur utilise deux doigts pour faire un geste de pince ou de tir sur l'élément de l'interface utilisateur en utilisant un appareil de touche activé. Un claquement de doigt se produit lorsque deux ou plus de doigts

Cet événement se déclenche avec une table de Vector2 qui décrivent les positions d'écran relative des doigts impliqués dans le geste. En outre, il se déclenche plusieurs fois : Enum.UserInputState.Begin après un court délai, enum.UserInputState.

Puisque cet événement nécessite au moins deux doigts, il n'est pas possible de le simuler dans Studio en utilisant l'émulateur et une souris ; vous devez avoir un appareil de touche réel.

Paramètres

touchPositions: Array

Un tableau Lua de Vector2 objets, chacun indiquant la position de tous les doigts impliqués dans le geste de pince.

scale: number

Un flot qui indique la différence au début du geste de pincement.

velocity: number

Un flot flottant indiquant à quelle vitesse se produit le geste de pincement.

Indique le Enum.UserInputState de la gestion.


Échantillons de code

Pinch/Pull Scaling

local innerFrame = script.Parent
local outerFrame = innerFrame.Parent
outerFrame.BackgroundTransparency = 0.75
outerFrame.Active = true
outerFrame.Size = UDim2.new(1, 0, 1, 0)
outerFrame.Position = UDim2.new(0, 0, 0, 0)
outerFrame.AnchorPoint = Vector2.new(0, 0)
outerFrame.ClipsDescendants = true
local dragging = false
local uiScale = Instance.new("UIScale")
uiScale.Parent = innerFrame
local baseScale
local function onTouchPinch(_touchPositions, scale, _velocity, state)
if state == Enum.UserInputState.Begin and not dragging then
dragging = true
baseScale = uiScale.Scale
outerFrame.BackgroundTransparency = 0.25
elseif state == Enum.UserInputState.Change then
uiScale.Scale = baseScale * scale -- Notice the multiplication here
elseif state == Enum.UserInputState.End and dragging then
dragging = false
outerFrame.BackgroundTransparency = 0.75
end
end
outerFrame.TouchPinch:Connect(onTouchPinch)

TouchRotate

L'événement TouchRotate se déclenche lorsque le joueur utilise deux doigts pour faire un geste de pince ou de tir sur l'élément de l'interface utilisateur en utilisant un appareil de touche activé. La rotation se produit lorsque l'angle entre deux doigts change. Cet événement se déclenche en conjonction avec GuiObject.TouchPan . Ce cet événement est utile pour permettre au joueur de manipuler la rotation

Cet événement se déclenche avec une table de Vector2 qui décrivent les positions d'écran relative des doigts impliqués dans le geste. En outre, il se déclenche plusieurs fois : Enum.UserInputState.Begin après un court délai, Enum.UserInputState.Change lorsque le joueur déplace un doigt pendant le geste et enfin

Puisque cet événement nécessite au moins deux doigts, il n'est pas possible d'être simulé dans Studio en utilisant l'émulateur et une souris ; vous devez avoir un appareil de touche réel.

Paramètres

touchPositions: Array

Un tableau Lua de Vector2 objets, chacun indiquant la position de tous les doigts impliqués dans le geste.

rotation: number

Une flèche flottante indiquant combien la rotation a dépassé depuis le début du geste.

velocity: number

Un flot qui indique à quel point la commande est exécutée rapidement.

Indique le Enum.UserInputState de la gestion.


Échantillons de code

Touch Rotation

local innerFrame = script.Parent
local outerFrame = innerFrame.Parent
outerFrame.BackgroundTransparency = 0.75
outerFrame.Active = true
outerFrame.Size = UDim2.new(1, 0, 1, 0)
outerFrame.Position = UDim2.new(0, 0, 0, 0)
outerFrame.AnchorPoint = Vector2.new(0, 0)
outerFrame.ClipsDescendants = true
local dragging = false
local baseRotation = innerFrame.Rotation
local function onTouchRotate(_touchPositions, rotation, _velocity, state)
if state == Enum.UserInputState.Begin and not dragging then
dragging = true
baseRotation = innerFrame.Rotation
outerFrame.BackgroundTransparency = 0.25
elseif state == Enum.UserInputState.Change then
innerFrame.Rotation = baseRotation + rotation
elseif state == Enum.UserInputState.End and dragging then
dragging = false
outerFrame.BackgroundTransparency = 0.75
end
end
outerFrame.TouchRotate:Connect(onTouchRotate)

TouchSwipe

L'événement TouchSwipe se déclenche lorsque le joueur effectue un geste de swipe sur l'élément de l'interface utilisateur en utilisant un appareil de touche activé. Il se déclenche avec la direction du geste (Haut, vers le bas, à gauche ou à droite) et le nombre de points de touche impliqués dans le geste. Les gestes de ramassage sont souvent utilisés pour modifier les onglets dans les UIs mobiles.

Puisque cet événement ne nécessite qu'un seul doigt, il peut être simulé dans Studio en utilisant l'émulateur et une souris.

Paramètres

swipeDirection: Enum.SwipeDirection

Une direction Enum.SwipeDirection indiquant la direction du geste de défilement (Haut, vers le bas, à gauche ou à droite).

numberOfTouches: number

Le nombre de points de contact impliqués dans le geste (généralement 1).


Échantillons de code

Bouncing Color Picker

local frame = script.Parent
frame.Active = true
-- How far the frame should bounce on a successful swipe
local BOUNCE_DISTANCE = 50
-- Current state of the frame
local basePosition = frame.Position
local hue = 0
local saturation = 128
local function updateColor()
frame.BackgroundColor3 = Color3.fromHSV(hue / 256, saturation / 256, 1)
end
local function onTouchSwipe(swipeDir, _touchCount)
-- Change the BackgroundColor3 based on the swipe direction
local deltaPos
if swipeDir == Enum.SwipeDirection.Right then
deltaPos = UDim2.new(0, BOUNCE_DISTANCE, 0, 0)
hue = (hue + 16) % 255
elseif swipeDir == Enum.SwipeDirection.Left then
deltaPos = UDim2.new(0, -BOUNCE_DISTANCE, 0, 0)
hue = (hue - 16) % 255
elseif swipeDir == Enum.SwipeDirection.Up then
deltaPos = UDim2.new(0, 0, 0, -BOUNCE_DISTANCE)
saturation = (saturation + 16) % 255
elseif swipeDir == Enum.SwipeDirection.Down then
deltaPos = UDim2.new(0, 0, 0, BOUNCE_DISTANCE)
saturation = (saturation - 16) % 255
else
deltaPos = UDim2.new()
end
-- Update the color and bounce the frame a little
updateColor()
frame.Position = basePosition + deltaPos
frame:TweenPosition(basePosition, Enum.EasingDirection.Out, Enum.EasingStyle.Bounce, 0.7, true)
end
frame.TouchSwipe:Connect(onTouchSwipe)
updateColor()

TouchTap

L'événement TouchTap se déclenche lorsque le joueur effectue un geste de touche sur l'élément de l'interface utilisateur en utilisant un appareil de touche activé par le toucher. Un geste est un clic rapide sans aucun mouvement impliqué (un pression plus longue déclencherait Class.GuiObject

Puisque cet événement ne nécessite qu'un seul doigt, il peut être simulé dans Studio en utilisant l'émulateur et une souris.

Paramètres

touchPositions: Array

Une tableau de Vector2 qui décrivent les positions relatives des doigts impliqués dans le geste.


Échantillons de code

Tap Transparency Toggle

local frame = script.Parent
frame.Active = true
local function onTouchTap()
-- Toggle background transparency
if frame.BackgroundTransparency > 0 then
frame.BackgroundTransparency = 0
else
frame.BackgroundTransparency = 0.75
end
end
frame.TouchTap:Connect(onTouchTap)