Screens and components
This page explains how to compose a screen by hand in UI Design, from the starting template to the animations.
Create a screen
Section titled “Create a screen”- In the Écrans (Screens) column, click the +, labelled Nouvel écran (New screen).
- Give it a Nom (Name).
- Choose the Standard or Stud tab. It sets the style of the screen.
- Choose a template.
- Leave Remplir avec les icônes Island Pilot (Fill with Island Pilot icons) ticked, or untick it to keep the slots empty.
- Click Créer (Create).
| Type | Templates |
|---|---|
| HUD | HUD vide (Empty HUD), HUD complet (Full HUD), HUD simulateur (Simulator HUD) |
| Menu | Menu vide (Empty menu), Boutique (Shop), Boutique à fiches (Card shop), Récompenses quotidiennes (Daily rewards), Récompenses en panneaux (Panel rewards), Inventaire (Inventory), Paramètres (Settings), Pass de combat (Battle pass), Index, Améliorations (Upgrades), Quêtes (Quests), Classement (Leaderboard) |
| Popup | Récompense (Reward), Confirmation d’achat (Purchase confirmation), Victoire (Victory), Renaissance (Rebirth) |
The templates come with their sounds (hover, click, purchase, closing, opening), and every window comes with a close button that you can move.
Place components
Section titled “Place components”In Bibliothèque › Composants (Library › Components), click a component or drag it onto the screen: Fenêtre (Window), Panneau (Panel), Bouton (Button), Bouton prix (Price button), Bouton icône (Icon button), Titre (Title), Texte (Text), Compteur (Counter), Barre de progression (Progress bar), Case d’objet (Item slot), Pastille (Badge), Minuteur (Timer), Image.
An element placed on a window or a panel becomes part of it and moves with it.
| Gesture | Effect |
|---|---|
| Drag | Move, with snapping (Alt: without snapping) |
Shift + click |
Add to the selection |
| Double-click | Edit the text |
| Arrow keys | Move by 1 pixel (Shift: 10 pixels) |
Ctrl + wheel |
Zoom the canvas |
Ctrl+Z, Ctrl+Y |
Undo, redo |
The Raccourcis (Shortcuts) icon in the canvas toolbar lists the others. Undo covers the layout, not the image library.
Adjust an element
Section titled “Adjust an element”Select the element, then open Propriétés (Properties). The Nom du calque (Layer name) becomes the widget’s name in UEFN and stays unique on the screen.
Anchors
Section titled “Anchors”The Ancrage (Anchor), in Position et taille (Position and size), is the edge the element stays attached to in UEFN, whatever the screen format. There are nine choices: Haut gauche (Top left), Haut (Top), Haut droite (Top right), Gauche (Left), Centre (Centre), Droite (Right), Bas gauche (Bottom left), Bas (Bottom), Bas droite (Bottom right).
Island Pilot picks it from the element’s position and updates it when you move the element. If you set it by hand, it no longer changes until you right-click Ancrer au bord le plus proche de l’écran (Anchor to the nearest edge of the screen). Inside a window or a panel, the anchor refers to that parent.
Colours and fonts
Section titled “Colours and fonts”These settings are in Apparence (Appearance).
- Couleur (Colour): the swatches are the game’s palette. You can also choose another colour, or go back to Par défaut (Default).
- Police (Font): 23 free-to-use font families come with Island Pilot. You will have to import them into UEFN by hand.
- Arrondi (px) (Corner rounding (px)): replaces the general rounding for this element.
There is no general palette setting to adjust by hand. To change the palette, ask the UI Designer.
Animations
Section titled “Animations”| Moment | Choices |
|---|---|
| Entrée (Entry) | Pop, Fondu (Fade), Glisse vers le haut (Slide up), Glisse vers le bas (Slide down), Glisse vers la gauche (Slide left), Glisse vers la droite (Slide right) |
| En attente (Idle) | Pulsation (Pulse), Rebond (Bounce), Flottement (Float), Tremblement (Shake), Reflet (Shine), Rotation |
| Clic (Click) | Écrasement (Squash) |
The Lire les animations (Play animations) button in the canvas toolbar plays them, with the button sounds. In UEFN, part of this setup stays manual.
The right-click menu
Section titled “The right-click menu”| On | Actions |
|---|---|
| An element | Modifier le texte (Edit text), Dupliquer (Duplicate), Copier (Copy), Coller (Paste), Premier plan (Bring to front), Avancer d’un plan (Bring forward), Reculer d’un plan (Send backward), Arrière-plan (Send to back), Sortir du groupe (Remove from group), Verrouiller (Lock), Masquer (Hide), Supprimer (Delete), and Bouton fermer indépendant (Independent close button) on a window whose close button is built in |
| The canvas background | Coller ici (Paste here), Tout sélectionner (Select all), Nouvel écran…, quick add of a window, a button or a title |
| A screen | Ouvrir (Open), Renommer… (Rename…), Dupliquer, Créer avec l’IA… (Create with AI…), Implémenter dans UEFN… (Implement in UEFN…) (or Mettre à jour dans UEFN… (Update in UEFN…) and Tout reconstruire dans UEFN… (Rebuild everything in UEFN…) once built), Supprimer l’écran… (Delete screen…) |
The last screen of a project cannot be deleted. Deleting a screen does not delete the widget already created in UEFN.