➤ Tutoriel : Guide absolu des débutants sur les interfaces graphiques 🕹

Bienvenue dans le guide du débutant absolu sur les interfaces graphiques. Ce guide vous guidera à travers plusieurs cours intensifs sur la création d'interfaces graphiques et la compréhension des mots derrière tout cela. GUI signifie interface utilisateur graphique. Les interfaces graphiques sur Roblox sont des formes, du texte, des images et d'autres éléments 2D sur votre écran qui font partie de votre jeu Roblox. Un exemple serait votre barre de santé à droite.

Les interfaces graphiques sont faciles à créer, mais les rendre interactives nécessite des connaissances de base en script. Il est fortement recommandé de lire quelques tutoriels sur les scripts dans Roblox Lua (ou vous pouvez apprendre ici) avant de lire les interfaces graphiques, car elles sont assez avancées. Cependant, si cela ne vous a pas découragé, alors je vous souhaite bonne chance dans votre quête de maîtrise des interfaces graphiques !

Vous devriez avoir la fenêtre Explorer et la fenêtre Propriétés ouvertes à tout moment lorsque vous travaillez avec des interfaces graphiques.

Pour ouvrir la fenêtre de l'explorateur, accédez à Affichage > Explorateur.
Pour ouvrir la fenêtre Propriétés, accédez à Affichage > Propriétés.

Contenu

1 instances d'interface graphique
- 1.1 Objets GUI et composants UI
- Propriétés 1.2
- 1.3 LayerCollector
- 1.4 Couleurs
- 1.5 Objets texte
- 1.6 Objets images
2 UDim & UDim2
- 2.1 Notation
- Balance 2.2
- 2.3 Décalage
- 2.4 Point d'ancrage
3 tutoriels GUI

Instances d'interface graphique

GUIObjects & UIComponents

Dans Roblox, les objets tels que les boutons ou les étiquettes de texte sont appelés GUIObjects, qui est une classe abstraite pour un objet d'interface utilisateur. Chaque objet d'interface utilisateur aura des propriétés héritées telles que Size, BackgroundColor3, etc. Les GUIObjects ont également des fonctions et des événements définis. Un GUIObject ou ses enfants peuvent être manipulés via UIComponents. Le composant UICorner peut modifier l'apparence des coins d'un GUIObject et le composant UIListLayout peut manipuler la disposition d'un GUIObject.

Propriétés

Type	Propriété	Détails
Boolean	Actif	Détermine si un élément d'interface utilisateur reçoit l'entrée
Vector2	Point d'ancrage	Détermine le point d'origine d'une interface graphique, par rapport à sa taille absolue
Enum.AutomaticSize	Taille automatique	Détermine si le redimensionnement se produit en fonction du contenu enfant
Color3	Arrière-planCouleur3	Détermine la couleur d'arrière-plan d'une interface graphique
flotteur	Arrière-planTransparence	Détermine la transparence de l'arrière-plan et de la bordure de l'interface graphique
Color3	BorderColor3	Détermine la couleur de la bordure d'une interface graphique
Enum.BorderMode	Mode Bordure	Détermine de quelle manière la bordure d'un GuiObject est disposée par rapport à ses dimensions.
Entier	BordureTaillePixel	Détermine la largeur en pixels de la bordure d'une interface graphique
Boolean	ClipsDescendants	Détermine si les interfaces graphiques descendantes en dehors des limites d'un élément d'interface graphique parent doivent être rendues
Entier	Ordre de mise en page	Contrôle l'ordre de tri d'une interface graphique lorsqu'elle est utilisée avec un UIGridStyleLayout
GUIObject	SuivantSélection	Définit le GuiObject qui sera sélectionné lorsque le sélecteur de la manette est déplacé dans cette direction
UDim2	Position	Détermine le pixel et la position scalaire d'une interface graphique
flotteur	rotation	Détermine le nombre de degrés de rotation d'un élément de l'interface utilisateur
Boolean	Sélectionnable	Déterminer si l'interface graphique peut être sélectionnée par une manette de jeu
GUIObject	ObjetImageSélection	Remplace l'ornement de sélection par défaut (utilisé pour les manettes de jeu)
UDim2	Taille	Déterminer le pixel et la taille scalaire d'une interface graphique
Enum.SizeConstraint	Contrainte de taille	Sélectionne les axes GUIObject.Size sur lesquels une interface graphique sera basée par rapport à la taille de son parent
Boolean	Visible	Détermine si un GUIObject et ses descendants seront rendus
Entier	ZIndex	Détermine l'ordre dans lequel une interface graphique est rendue par rapport aux autres interfaces graphiques

Collecteur de couches

Un LayerCollector est une classe abstraite qui contient 3 types de conteneurs GUI. Un ScreenGui, un SurfaceGui et un BillboardGui. ScreenGui et SurfaceGui sont assez explicites. Un ScreenGui est un conteneur pour les GUIObjects qui apparaissent sur votre écran. Un SurfaceGui est un conteneur pour les GUIObjects qui apparaissent sur des surfaces (comme sur des pièces). Un BillboardGui est un conteneur 2D lié à un objet 3D.

Monture

Un cadre est un type simple mais applicable de GUIObject qui peut être utilisé pour votre interface graphique. Ils héritent des propriétés d'un GuiObject, notamment BackgroundColor3, BackgroundTransparency, Size, Position, etc. Ils peuvent apparaître et être utilisés de différentes manières.

Objets de texte

Les objets texte sont des GUIObjects comme les cadres, mais ils contiennent du texte. Étant donné que les objets texte sont des GUIObjects, ils héritent de leurs propriétés. Les objets texte ont également leurs propres propriétés uniques telles que Texte ou Police. Il existe 3 types d'objets texte.

TextLabel : étiquette contenant du texte.
TextButton : un bouton interactif qui contient du texte.
TextBox : Une étiquette qui peut prendre une entrée. (Comme une barre de recherche ou une boîte de mot de passe)

Objets d'image

Les objets image sont également des GUIObjects comme les cadres, mais ils contiennent une image. (Comme un autocollant). Ils héritent des propriétés d'un GUIObject mais ont également leurs propriétés uniques comme Image, ImageColor3, ImageTransparency, etc. Il existe 2 types d'objets image.

ImageLabel : Une étiquette qui contient une image.
ImageButton : Un bouton interactif qui contient une image.

UDim & UDim2

Un UDim est un composant utilisé lors de l'utilisation de l'interface graphique. Un UDim peut être X ou Y dans une coordonnée UDim2 et avoir 2 propriétés principales.

Échelle : La valeur que cela représente est mise à l'échelle par rapport à l'axe que cet UDim représente dans un UDim2.
Offset : Le composant d'unité de pixel de l'UDim

Notation

Les valeurs UDim2 sont souvent indiquées par des crochets, mais lors de l'écriture des valeurs UDim2 dans la fenêtre des propriétés, les crochets peuvent être omis car Roblox implémentera automatiquement les crochets. Lorsque vous essayez d'écrire une valeur UDim2 dans un script, vous pouvez utiliser le constructeur .new .

UDim2.new(XUDim, YUDim) UDim2.new(XScale, XOffset, YScale, YOffset)

Maintenant, vous vous demandez probablement pourquoi j'ai mis deux manières différentes d'utiliser ce constructeur. (non tu ne l'es pas, mais je te le dis quand même). C'est parce qu'il y a 2 façons d'utiliser ce constructeur.

Façon 1 : Utilisation d'UDims
- Vous pouvez utiliser le constructeur UDim.new pour créer un UDim X et un UDim Y pour votre UDim2
Voie 2 : Au total
- Vous pouvez simplement mettre votre échelle et votre décalage pour chaque axe et cela fonctionnera aussi

Ces méthodes peuvent être mélangées car UDim2.new(0.5, 10, UDim.new(1, 0)) fonctionnera également

Échelle

Ce que le composant d'échelle représente est mis à l'échelle par rapport à l'axe que cet UDim représente (généralement le parent). Par exemple, si nous devions définir la position d'un cadre sur {0.5, 0}, {0.5, 0}, le cadre serait au centre de l'écran. C'est si nous centrons le point d'ancrage, sinon, ça ressemblera à ça. Il est recommandé d'utiliser Scale pour le dimensionnement et le positionnement afin qu'il puisse conserver une taille sur tous les appareils. si vous utilisez offset, cela peut sembler normal sur un ordinateur, mais trop gros sur un téléphone.

Compenser

Le décalage n'est que cela - un décalage de pixel. Si la position d'un objet est {0,100}, {0,150}, il sera placé à 100 pixels de la gauche de l'écran et à 150 pixels du haut de l'écran. L'utilisation de XOffset et YOffset dans Size redimensionnera l'objet en pixels.

Point d'ancrage

Le point d'ancrage est une propriété très importante lors du positionnement et de la mise à l'échelle des interfaces graphiques. Les données de type pour le point d'ancrage sont Vector2 (X & Y). Le point d'ancrage est le point d'origine d'une interface graphique par rapport à sa taille absolue. Fondamentalement, cela signifie que le point d'ancrage d'une interface graphique indique où redimensionner l'interface graphique ou la positionner. Donc, fondamentalement, lorsque vous positionnez quelque chose, vous ne positionnez essentiellement que le point d'ancrage et l'interface graphique elle-même se déplace par rapport au point d'ancrage. Le point d'ancrage fonctionne exactement comme l'échelle. Si la valeur X est de 0.5, le point d'ancrage se déplacera horizontalement vers le milieu.

Tutoriels GUI

Eh bien, maintenant que vous connaissez les interfaces graphiques, créons-en une ! Avant d'y entrer, créons notre ScreenGui où l'interface graphique apparaîtra.

StarterGui
- ÉcranGui

Créez un nouveau ScreenGui dans StarterGui en survolant StarterGui et en cliquant sur le bouton plus, puis recherchez ScreenGui. (Vous pouvez le rechercher si vous en avez besoin) Et c'est la première étape obligatoire ! Vous pouvez consulter les tutoriels ci-dessous si vous le souhaitez. Je serai sur mon chemin, cya!