Aller au contenu principal
ShadowAcademy

Les langages Interfaces NUI FiveM L interface : HTML et CSS

Une page par-dessus le jeu

La page d'une interface NUI s'écrit comme n'importe quelle page web, avec trois différences qui surprennent la première fois.

1. Elle est chargée en permanence

La page est chargée dès le démarrage de la ressource, et reste là. Ce n'est pas elle qui apparaît et disparaît : c'est son contenu, qu'on masque par défaut et que le JavaScript affiche quand le jeu le demande.

<div id="app" class="cache">
    ...
</div>

.cache { display: none; }

Oublier cette classe, c'est afficher le guichet au milieu de l'écran de chaque joueur, dès sa connexion.

2. Le fond doit rester transparent

La page couvre tout l'écran du jeu. Un fond de page coloré -- ou le blanc qu'appliquent certains styles de départ -- cache le jeu entier.

html, body {
    background-color: transparent;
}

Seul le cadre de l'interface a un fond.

3. On la place par rapport à l'écran

L'interface ne suit pas le flux d'un document qu'on fait défiler : elle se pose à un endroit précis de l'écran.

#app {
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 320px;
}

position: fixed place l'élément par rapport à la fenêtre ; right et bottom fixent sa distance aux bords.

Lisible sur n'importe quelle image

Derrière l'interface, le jeu bouge : ciel, nuit, explosions. Un fond sombre légèrement transparent garde le texte lisible sans masquer complètement la scène :

#app {
    background-color: rgba(15, 15, 25, 0.9);
    color: #ffffff;
}

Le quatrième nombre de rgba est l'opacité : 0 transparent, 1 opaque.

Les éléments dont le JavaScript aura besoin

Comme dans le projet de site complet, chaque élément que le script devra retrouver reçoit un identifiant : #app, #solde, #retrait, #montant, #retour, #fermer.

3 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

  • La page du guichet moyen lecon a valider
  • Voir le jeu à travers la page moyen lecon a valider
  • Lisible sur n importe quelle image facile lecon a valider