Tutoriel : Layout RetroFE

🕹️ Tutoriel : Layout RetroFE

1. Structure du projet

Organiser vos fichiers est la première étape pour garder votre layout clair et évolutif.

  • /layouts/MonLayout/
    • layout.xml – définition principale des éléments à l’écran
    • splash.xml – écran de démarrage (optionnel)
    • menu.xml – configuration des menus et raccourcis
    • animations.xml – séquences d’animation (transitions, surbrillances)
    • /fonts/ – polices TrueType (.ttf)
    • /styles/ – fichiers CSS-like si supportés
    • /images/ – icônes, fonds ou logos personnalisés (si nécessaire)

Assurez-vous que chaque dossier soit référencé correctement dans vos fichiers XML pour éviter les chemins brisés.

2. Le fichier layout.xml pas à pas

2.1 Déclaration initiale

<layout width="1920" height="1080"
        font="fonts/Roboto-Bold.ttf"
        fontSize="48"
        fontColor="FFFFFF">
  • width / height : résolution virtuelle utilisée pour positionner les éléments
  • font : chemin relatif vers votre police
  • fontSize : taille par défaut du texte
  • fontColor : couleur par défaut en hexadécimal

2.2 Couche de fond unie

<rect x="0" y="0" width="1920" height="1080" color="000000"/>
  • <rect> : crée un rectangle plein
  • color : format RGB sans le signe #
  • Empilez plusieurs <rect> pour créer des bandes ou des gradients manuels

2.3 Zone de capture d’écran

<reloadableImage type="screenshot"
                 x="150" y="200"
                 width="512" height="288"/>
  • type="screenshot" : affiche automatiquement la capture du jeu sélectionné
  • Vous pouvez multiplier ces blocs ou varier les tailles pour un mur de vignettes

2.4 Gestion du texte

<text value="Ma collection RetroFE"
      x="960" y="60"
      xOrigin="center"
      fontSize="64"/>
  • value : chaîne brute, accents autorisés
  • xOrigin / yOrigin : point d’ancrage (left / center / right / top / middle / bottom)
  • Propriétés additionnelles : shadowColor, outlineWidth, letterSpacing (selon version)

2.5 Positionnement avancé

  • Origines :
    • xOrigin="center" centre horizontalement par rapport à x
    • yOrigin="middle" ou center centre verticalement
  • Offsets relatifs : combinez x / y et xOrigin / yOrigin pour des alignements responsives
  • Groupes : utilisez plusieurs <group> si supportés pour déplacer un ensemble d’éléments en bloc

3. Intégration de menus (menu.xml)

<menu id="root">
  <category id="favorites" name="Favorites" icon="images/star.png"/>
  <category id="retro"     name="Vintage"   icon="images/vintage.png"/>
  <item id="settings"      name="Settings"  command="open_settings"/>
</menu>
  • category vs item :
    • Categories : mènent à d’autres listes
    • Items : déclenchent une action (command) ou lancent un jeu
  • Attributs courants : icon, command, sortOrder

4. Animations (animations.xml)

<animations>
  <animation id="hover" loop="false" frameTime="0.05">
    <frame file="images/hover1.png"/>
    <frame file="images/hover2.png"/>
  </animation>
</animations>
  • loop : boucle infinie ou unique
  • frameTime : durée en secondes par image
  • Liez cette animation à un élément <image> dans layout.xml via animation="hover"

5. Splash screen avancé (splash.xml)

<layout width="1920" height="1080" minShowTime="3">
  <rect x="0" y="0" width="1920" height="1080" color="111111"/>
  <text value="Chargement..."
        x="960" y="900"
        xOrigin="center"
        fontSize="48"/>
  <progressBar x="660" y="960"
               width="600" height="20"
               colorBg="555555"
               colorFg="00FF00"/>
</layout>
  • minShowTime : durée minimale d’affichage en secondes
  • <progressBar> : barre native pour indiquer l’avancement (selon support)

6. Polices et styles

  • Installez plusieurs polices dans /fonts/ et déclarez-les via font sur chaque <text> si besoin
  • Espacements :
    • letterSpacing="2"
    • lineSpacing="1.2"
  • Couleurs dynamiques : modifiez fontColor à la volée en liant des événements (selon version)

7. Astuces et bonnes pratiques

  • Testez systématiquement sur la résolution cible pour éviter les débordements
  • Regroupez les éléments partageant le même style dans des <group> pour faciliter la maintenance
  • Versionnez vos fichiers XML pour un historique clair des évolutions
  • Commentez vos sections critiques avec <!-- Commentaire --> pour plus de lisibilité
  • Utilisez des variables ou des propriétés globales si votre build RetroFE le permet pour un thème modifiable facilement

Conclusion

Vous disposez maintenant d’un aperçu détaillé pour créer un layout RetroFE riche en fonctionnalités, optimisé pour les résolutions modernes, sans le superflu des icônes dans les exemples de code. Adaptez chaque section à votre univers, testez les animations et les menus, et partagez vos créations avec la communauté !