Prérequis
- Un logiciel d'édition de fichiers (Notepad, Notepad++, SublimeText, Visual Studio...)
- Garry's Mod (oui oui, j'vous promet !)
- Optionnel : Un peu de logique mathématique (savoir faire des divisions)
Définition
Le responsive ? Kézako
Une interface réactive est une interface dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable sur des écrans de tailles très différentes.
Et en français ?
En gros, le responsive vous permet d'adapter votre interface à chaque écran.
Les bases
Nous allons partir du principe que vous êtes déjà familier avec la création d'un menu basique (le principe est le même pour un HUD).
Positions absolue et relative
Ces mots ne vous parlent pas forcément mais vous aller comprendre très facilement.
- Position absolue : Une position qui ne bougera jamais quel que soit la taille de votre écran, imaginons que vous possédiez un écran de 1920x1080p, si vous placez un pixel en 1910x1060 et que vous donnez votre code à un ami qui possède un écran de 1280x720p, il ne pourra pas voir le pixel que vous voulez afficher étant donné qu'il dépasse de son écran !
- Position relative : Une position qui, comme son nom l'indique, est relative à la taille de votre écran. Reprenons l'exemple précedent, vous placez un pixel en 1910x1060 mais cette fois ci de manière responsive, votre ami le verra affiché au même endroit que vous sur votre écran ! Mais comme un exemple vaut mieux que mille mots, voilà le type de problèmes qui vous prouvent que votre code n'est pas responsive :
Et donc ? Ça fonctionne très bien comme ça, pourquoi changer ?
Tu ne crois pas si bien dire Billy, change donc ta résolution et relance le code pour voir ?
Tu vois ! Ça n'a rien changé !
Hep hep hep, tout doux Billy ! Effectivement, dans le menu en lui-même nous avons eu de la chance que la fonction SetPos soit relativement responsive, CEPENDANT, le menu principal a pu se décaler en bas à droite de ton écran, ce que nous ne voulons pas !
Régler tout nos problèmes de responsive
En règle générale
Reprenons le code précédent que je vous ai fourni, si je vous donne la ligne suivante
Cela signifie que notre élément "Frame" aura une largeur de 500 pixels et une longueur de 300 pixels. Cependant ce n'est pas responsive tel que vu précédemment ! Pour corriger ce problème, nous allons faire un peu de maths. Vous aller devoir connaitre la résolution de votre écran. Par exemple 1920x1080p. Puis vous allez faire le calcul suivant LargeurEcran / LargeurElement soit 1920/500 ce qui nous donne 3.84. Gardez cette valeur de côté. Faites de même avec la longueur, on obtient 1080/300 soit 3.6. Sauf que vous ne pouvez pas les utiliser comme ceci :
En effet cela ne va pas fonctionner (vous pouvez tester, vous allez avoir des petits problèmes). Cependant, comme ceci tout fonctionnera comme avant :
Tout fonctionne comme avant ! C'est magnifique, par contre si vous changez votre résolution, vous pourrez constater que ce n'est toujours pas responsive ! En effet, pour l'instant on l'a juste adapté à une seule résolution. Laissez-moi introduire les deux fonctions principales pour faire du responsive, je vous présente ScrW et ScrH ! Ces deux fonctions renvoient respectivement la largeur et la longueur de l'écran en pixels. On peut donc en déduire le code suivant :
Et à partir de maintenant si vous changez votre résolution, vous pourrez voir que c'est bien responsive !
Fonctions rapides
Voici deux petites fonctions que vous pouvez utiliser pour aller plus vite :
En respectant les priorités de calcul basiques, on fait ScrW()/pixels qui va nous donner le calcul que nous avons fait précédemment, puis ScrW()/leRésultat qui nous donne le nombre de pixels à utiliser pour être responsive. Pour les utiliser, rien de plus simple :
Si votre résolution d'écran est différente de 1920x1080 vous pouvez spécifier en second paramètre les largeur et hauteur (en pixels) de votre écran.
Dans un menu
Vous avez la solution de facilité qui fonctionne pour quasiment tous les éléments (si ce n'est pour tous), CenterHorizontal et CenterVertical ! Ces fonctions sont très utiles comme nous allons le voir.
Comment utiliser les fonctions CenterHorizontal et CenterVertical ?
- Première étape : Vous aller supprimer la ligne myButton:SetPos(x, y) du code que je vous ai fourni plus tôt
- Deuxième étape : Vous aller rajouter les lignes suivantes :
Ces deux lignes vont centrer votre élément à 75% en largeur et 5% en hauteur (Par rapport à l'élément parent, où à la taille de l'écran si il n'a pas de parents). Vous disposez également d'une autre fonction qui vous servira à centrer un élément au centre de son parent, Center. Par exemple :
Prenez juste garde à bien supprimer les éventuels SetPos, CenterHorizontal ou CenterVertical qu'il y aurait pour cet élément.
Questionnaire
Voyons voir si vous avez compris, essayez de savoir si les éléments suivants sont responsives ou non (réponses en fin de page) :
- element1:SetPos(ScrW()/98.25652253, ScrH()/1.02365)
- element2:SetPos(ScrW()+96, ScrH() - 50)
- element3:SetPos(ScrW()/26 - 8, ScrH()/85)
- element4:SetPos(ScrW()/2 , ScrH()/35/96)
Bonus - Polices
Et oui, qui aurait cru que les polices d'écritures n'étaient pas responsive par défaut ? Pour les adapter, nous allons reprendre le même principe qu'auparavant. Voici un exemple de police non responsive :
Vous disposez de deux moyens pour la rendre responsive.
La méthode facile
Il existe une fonction faite exprès pour résoudre ce problème de police non-responsive, je vous présente ScreenScale ! Vous allez devoir légèrement adapter votre code comme suit :
A vous de trouver la valeur exacte pour la taille de police que vous voulez utiliser !
La méthode tout aussi facile
Cette méthode est moins utilisées que la première cependant vous pouvez la connaitre, elle permet d'être très précis :
Bien sûr, à vous de jouer avec la valeur qui divise le ScrH pour trouver la taille qui correspond à ce que vous voulez !
Réponses au questionnaire
element1:SetPos(ScrW()/98.25652253, ScrH()/1.02365)
Cet élément est responsive. Il respecte bien les règles que nous avons énoncées plus haut.
element2:SetPos(ScrW()+96, ScrH() - 50)
Cet élément n'est pas responsive. Si vous retirez une position absolue à une position relative vous allez obtenir quelque chose de moins en moins précis à mesure que la position absolue augmentera. Il ne faut JAMAIS retirer une position absolue à une position relative. Il vaut mieux refaire vos calculs.
element3:SetPos(ScrW()/26 - 8, ScrH()/85)
Cet élément n'est pas responsive. Pour les mêmes raisons que l'élément 2.
element4:SetPos(ScrW()/2 , ScrH()/35/96)
Cet élément est responsive. En effet, vous divisez la taille de l'écran plusieurs fois mais cela reste responsive.
Liens utiles
Passer au chapitre suivant :