Démarrage rapide
Créez votre première interface et exportez-la en tant que ressource MTA:SA en quelques minutes.
Bienvenue dans Easelt Builder — un concepteur visuel dans le navigateur pour les GUI dx de MTA:SA, par Easelt · C4. Ce démarrage rapide vous accompagne de bout en bout, d'un canevas vierge jusqu'à une ressource MTA exécutable : vous allez choisir une résolution, déposer votre premier élément, le styliser, câbler un peu de logique, le tester en direct, puis exporter un .zip prêt à déposer.
L'aperçu en 60 secondes
Voici tout le parcours en un coup d'œil. Chaque étape ci-dessous est détaillée dans sa propre section, mais voici l'allure d'un premier projet :
- Choisir une résolutionChoisissez votre résolution cible (par ex.
1920x1080) dans la barre supérieure pour que les positions restent correctes partout. - Ajouter un élémentCliquez sur un outil de la boîte à outils — essayez
Button— et il se dépose sur le canevas. - Le styliserUtilisez l'inspecteur pour définir la couleur de remplissage, les coins, le texte, le contour et l'ombre.
- ArrangerAjoutez d'autres éléments et alignez-les à l'aide des guides d'alignement et de la grille/magnétisme.
- Ajouter de la logiqueOptionnellement, ouvrez Blueprint et câblez un clic pour ouvrir une fenêtre, basculer la visibilité ou changer du texte.
- TesterAppuyez sur ▶ Test dans Blueprint pour l'essayer en direct, puis sur Esc pour arrêter.
- EnregistrerAppuyez sur Ctrl S — Easelt enregistre aussi automatiquement au fil de votre travail.
- ExporterAllez dans Fichier → Exporter la ressource MTA pour obtenir un
.zipque vous pouvez déposer sur votre serveur.
Étape 1 — Choisissez votre résolution cible
Avant de placer quoi que ce soit, définissez la résolution cible dans la barre supérieure — par exemple 1920x1080. Cela indique à Easelt Builder l'écran par rapport auquel vous concevez, afin que la mise en page sur le canevas corresponde à ce qu'un joueur à cette résolution verra.
Comme Easelt dispose les éléments de façon responsive, les positions restent correctes sur les autres résolutions aussi — choisissez la résolution à laquelle vous concevez, et votre GUI s'adapte proprement pour tous les autres.
Étape 2 — Ajoutez votre premier élément
Ouvrez la boîte à outils et cliquez sur un outil pour ajouter son élément — commencez avec Button. L'élément se dépose directement sur le canevas, prêt à être positionné et mis en forme. Chaque élément prend en charge les trois mêmes gestes de manipulation directe :
Étape 3 — Stylisez-le dans l'inspecteur
Avec votre élément sélectionné, l'inspecteur affiche tout ce que vous pouvez styliser. Parcourez chaque contrôle pour donner à votre Button l'apparence souhaitée :
| Contrôle | Ce qu'il fait |
|---|---|
| Couleur de remplissage | Définit la couleur de fond de l'élément à l'aide du sélecteur de couleur. |
| Coins | Arrondit les coins de l'élément à votre goût. |
| Texte | Modifie le libellé et son apparence textuelle. |
| Contour | Ajoute une bordure/un trait autour de l'élément. |
| Ombre | Projette une ombre derrière l'élément pour créer de la profondeur. |
Cliquez sur le sélecteur de couleur à côté de Couleur de remplissage pour choisir n'importe quelle couleur — c'est le moyen le plus rapide de faire correspondre un élément au thème de votre serveur.
Étape 4 — Ajoutez d'autres éléments et arrangez-les
Les vraies GUI sont composées de plusieurs éléments. Ajoutez-en davantage depuis la boîte à outils, puis alignez-les précisément à l'aide des deux aides au positionnement d'Easelt :
- Guides d'alignement — des lignes intelligentes apparaissent pendant que vous glissez, afin que les bords et les centres s'accordent avec les éléments voisins.
- Grille / magnétisme — les éléments s'accrochent à la grille pour un espacement net et régulier sans estimer les pixels à l'œil.
Étape 5 — Ajoutez de la logique dans Blueprint (optionnel)
Vous voulez que votre GUI *fasse* réellement quelque chose ? Ouvrez Blueprint et câblez le comportement visuellement — aucun Lua requis. À partir d'un seul clic, vous pouvez par exemple :
- Ouvrir une fenêtre
- Basculer la visibilité d'un élément
- Changer le texte d'un élément
Blueprint est optionnel — une mise en page purement visuelle s'exporte et s'exécute parfaitement sans aucune logique câblée.
Étape 6 — Testez-le en direct
Dans Blueprint, appuyez sur ▶ Test pour exécuter votre GUI en direct et essayer les interactions que vous avez câblées — cliquez sur votre bouton, regardez la fenêtre s'ouvrir, voyez le texte changer. Appuyez sur Esc pour arrêter le test et revenir à l'édition.
Étape 7 — Enregistrez votre travail
Appuyez sur Ctrl S pour enregistrer. Easelt Builder enregistre aussi automatiquement au fil de votre travail, donc votre projet est protégé même si vous oubliez — mais un enregistrement manuel est une bonne habitude avant d'exporter.
Étape 8 — Exportez votre ressource MTA
Quand vous êtes satisfait, transformez votre conception en une vraie ressource. Allez dans Fichier → Exporter la ressource MTA pour télécharger un .zip. Cette archive est une ressource MTA:SA complète et prête à déposer, contenant :
| Fichier | Ce que c'est |
|---|---|
gui.lua | Votre GUI générée : les éléments que vous avez dessinés et leur mise en page. |
lib.lua | La bibliothèque de support sur laquelle repose le code généré. |
meta.xml | Le manifeste de la ressource qui indique à MTA:SA ce qu'il faut charger. |
| assets | Toutes les images et autres fichiers utilisés par votre conception. |
Décompressez le .zip dans le dossier resources de votre serveur, puis démarrez-le comme n'importe quelle autre ressource MTA — aucune édition manuelle requise.
Pratique : aperçu sans l'interface d'édition
À tout moment, appuyez sur P pour prévisualiser votre conception — cela masque l'interface d'édition (boîte à outils, inspecteur et panneaux) pour que vous voyiez uniquement la GUI telle qu'un joueur la verrait. Appuyez de nouveau sur P pour ramener l'éditeur.
Étapes suivantes
Vous avez créé et exporté votre première GUI — beau travail. Rendez-vous ensuite sur ces pages pour aller plus loin :