Responsive - gLua

Envie d'apprendre les bases du responsive ? Ce tutoriel est fait pour vous !

Responsive - gLua

Envie d'apprendre les bases du responsive ? Ce tutoriel est fait pour vous !

Crée le 31 déc. 2020

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 :

local Frame = vgui.Create( "DFrame" )
Frame:SetPos( 800, 400)
Frame:SetSize( 500, 300 )
Frame:SetTitle( "" ) 
Frame:SetVisible( true ) 
Frame:ShowCloseButton( false ) 
Frame:MakePopup()

local myButton = vgui.Create( "DButton", Frame)
myButton:SetText("Fermer le menu")
myButton:SetPos( 350, 0)
myButton:SetSize( 150, 50 )                 
myButton.DoClick = function()
    surface.PlaySound( "buttons/button15.wav" )
    Frame:Remove()
end

local killerButton = vgui.Create( "DButton", Frame)
killerButton:SetText("Tuez moi")
killerButton:SetPos( 215, 200)
killerButton:SetSize( 150, 50 )             
killerButton.DoClick = function()
    surface.PlaySound( "buttons/button15.wav" )
    chat.AddText(Color(150,150,150), "Et bah non !")
end

Résultat première résolution

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 ?

Résultat seconde résolution

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

Frame:SetSize( 500, 300 )

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 :

Frame:SetSize( 1920/500, 1080/300 )

En effet cela ne va pas fonctionner (vous pouvez tester, vous allez avoir des petits problèmes).

Cependant, comme ceci tout fonctionnera comme avant :

Frame:SetSize( 1920/3.84, 1080/3.6 )

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 :

Frame:SetSize( ScrW()/3.84, ScrH()/3.6 )

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 :

Envie de lire la suite de ce tutoriel ?

Connecte-toi dès maintenant, et accède entièrement à tous les tutoriels de GCA !

#gLua

#UI Design

#Garry's Mod

#Lua

#dev

Écrit par Deadman#8349

9

Sommaire