Positie en grootte van UI-objecten

Tenzij UI-objecten onder controle staan van een lay-outstructuur of een grootte-modifier/beperking, heb je volledige controle over hun positie en grootte. Je kunt ook de Z-index laagvolgorde instellen waarin objecten elkaar overlappen.

Kern eigenschappen

Alle GuiObjects delen een kernset van eigenschappen om ze te positioneren, schalen, anker en laag binnen een on-screen of in-game container.

Positie

De Position eigenschap is een UDim2 coördinaten set die het object positioneert langs de X en Y assen. Een UDim2 wordt weergegeven door zowel Scale als Offset waarden voor elke as:

• Scale waarden vertegenwoordigen een percentage van de grootte van de container langs de overeenkomstige as, optellend bij eventuele Offset waarden.
• Offset waarden vertegenwoordigen hoeveel pixels het object op de overeenkomstige as moet verschuiven, optellend bij eventuele Scale waarden.

Om de positie van een geselecteerd GuiObject te bewerken, klik je op het Positie veld in het Eigenschappen venster en voer je een nieuwe UDim2 coördinaten set in.

Grootte

De Size eigenschap is een UDim2 coördinaten set die het object schaalt langs de X en Y assen. Een UDim2 wordt weergegeven door zowel Scale als Offset waarden voor elke as:

• Schaal — Waarden die een percentage van de grootte van de container langs de overeenkomstige as vertegenwoordigen, optellend bij eventuele Offset waarden.
• Offset — Waarden die de pixel grootte van het object langs de overeenkomstige as vertegenwoordigen, optellend bij eventuele Schaal waarden.

Om de grootte van een geselecteerd GuiObject te bewerken, klik je op het Grootte veld in het Eigenschappen venster en voer je een nieuwe UDim2 coördinaten set in.

AnchorPoint

De AnchorPoint eigenschap definieert het oorspronkingspunt waarvandaan het object van positie verandert positie en grootte. De standaard AnchorPoint waarden zijn (0, 0) wat het anker in de linkerbovenhoek van het object plaatst.

AnchorPoint waarden zijn een fracties van 0 tot 1, relatief aan de grootte van het object, wat betekent dat een object met AnchorPoint waarden van (0.5, 0.5) het ankerpunt halverwege (50%) door het object plaatst, zowel horizontaal als verticaal, en eventuele wijzigingen in zijn positie of grootte zowel verplaatst als schaalt vanaf dit punt.

Om het ankerpunt van een geselecteerd GuiObject te bekijken en te bewerken:

1. In het Eigenschappen venster, klik je in het AnchorPoint veld.

   

2. Voer een nieuwe Vector2 coördinaat in en druk op Enter.

   Studio leidt het bedoelde waarde paar af wanneer een enkel getal wordt ingevoerd. Bijvoorbeeld, simpelweg 0.5 invoeren zal worden omgezet naar 0.5, 0.5 voor een centraal ankerpunt.

ZIndex

De ZIndex eigenschap definieert de laagvolgorde waarin GuiObjects renderen en elkaar overlappen. Als je nieuwe renderlagen wilt maken, moet je de ZIndex eigenschap instellen op verschillende positieve of negatieve gehele waarden voor elk object.

Voor UI-containers zoals ScreenGui, renderen de standaard ZIndexBehavior altijd kinderen boven hun ouders, en de ZIndex van elk kind wordt gebruikt om de volgorde te bepalen waarin het boven andere renderen.

Om de ZIndex van een object te bewerken, zoek je ZIndex in het Eigenschappen venster en voer je een nieuwe gehele waarde in.

Lay-outstructuren

Lay-outstructuren stellen je in staat om GuiObjects snel te organiseren en weer te geven, bijvoorbeeld in een horizontale of verticale lijst, een rooster van gelijkmatig grote tegels, een pagina-sequentie, en meer. Lay-outs overschrijven of beïnvloeden doorgaans de positie/grootte van objecten onder hun controle.

Cross-platform factoren

Roblox is inherent cross-platform, aangezien spelers games kunnen ontdekken en zich kunnen aansluiten op hun telefoon of tablet, en later kunnen doorgaan waar ze waren gebleven op hun pc of console. Je moet je Roblox-games ontwerpen zodat ze toegankelijk en plezierig zijn op alle platforms die je kiest te ondersteunen, in plaats van te optimaliseren voor één platform en andere te verwaarlozen.

Gereserveerde zones

Op mobiele apparaten nemen de standaardbedieningen een deel van de linkerbenedenhoek en rechterbenedenhoek van het scherm in beslag. Wanneer je een UI voor een game ontwerpt, moet je vermijden belangrijke informatie of virtuele knoppen in deze zones te plaatsen.

Duimzones

De meeste mobiele spelers gebruiken twee duimen — één op de virtuele duimstick en één op de springknop. Afhankelijk van de fysieke grootte van het apparaat en de handen van de speler, wordt het ongemakkelijk of onmogelijk om te ver weg te reiken vanaf de onderste hoeken, dus je moet vermijden vaak gebruikte knoppen buiten gemakkelijk bereikbare zones te plaatsen.

Knop comfortabel binnen bereik van de rechterduim van de speler

Knop moeilijk te bereiken tenzij de speler zijn hand of duim uitstrekt

Vergeet niet dat comfortabele duimzones verschillen tussen telefoons en tablets omdat tablets een groter scherm hebben. Een knop die 40% onder de bovenrand van het scherm is geplaatst, is bereikbaar op een telefoon maar bijna onbereikbaar op een tablet.

Knop 40% van de bovenrand van de telefoon, binnen bereik van de duim van de speler

Knop 40% van de bovenrand van de tablet, moeilijk te bereiken zonder te rekken

Een betrouwbare aanpak op zowel telefoons als tablets is relatieve positionering van aangepaste knoppen nabij vaak gebruikte bedieningselementen zoals de standaard springknop, en ze binnen gemakkelijk bereik te plaatsen.

De volgende code, geplaatst in een client-side script binnen StarterPlayerScripts, haalt de positie van de springknop op en maakt een tijdelijke knop 20 pixels naar links ervan.

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

if UserInputService.TouchEnabled then
	-- Wacht tot de springknop volledig is geladen
	while not (playerGui:FindFirstChild("JumpButton", true) and playerGui:FindFirstChild("JumpButton", true).IsLoaded) do
		task.wait()
	end
	local jumpButton = playerGui:FindFirstChild("JumpButton", true)

	-- Plaats nieuwe aangepaste knop links van de springknop
	local customButton = Instance.new("ImageButton")
	customButton.AnchorPoint = Vector2.new(1, 1)
	customButton.Size = UDim2.fromOffset(jumpButton.Size.X.Offset * 0.8, jumpButton.Size.Y.Offset * 0.8)
	customButton.Position = jumpButton.Position + UDim2.fromOffset(-20, jumpButton.Size.Y.Offset)
	customButton.Parent = jumpButton.Parent
else
	warn("Apparaat is niet touch-enabled of Studio emuleert geen touch-enabled apparaat!")
end

Context-gebaseerde UI

De schermruimte is beperkt op mobiele apparaten, dus je moet alleen de meest vitale informatie tonen tijdens actieve gameplay. Bijvoorbeeld, als je game een speciale invoeractie heeft om deuren en schatkisten te openen, heeft het geen zin om constant een "open" knop op het scherm te tonen. Gebruik in plaats daarvan een proximity prompt of een vergelijkbare methode om invoer alleen te accepteren wanneer het personage zich dicht bij een deur of kist bevindt.