Aujourd'hui nous allons apprendre à **créer un système de langages en Lua.**

Il existe différentes méthodes, mais nous allons nous focaliser

Créer un système de langage

Dans ce tuto, nous allons voir comment faire pour que votre addon gmod se charge automatiquement lors du démarrage de

Faire un autoload pour ses addons sur gmod

### Prérequis

* Un logiciel d'édition de fichiers (Notepad, [Notepad++](https://notepad-plus-plus.org/downloads/), [SublimeText](https://www.sublimetext.com/3), [Visual Studio](https://code.visualstudio.com/)...)
* Garry's Mod *(oui oui, j'vous promet !)*
* Optionnel

Créer des addons responsives

### Création de l'entité

#### ↪ Les fichiers

Dans votre addon, vous aurez besoin de créer un dossier nommé **entities**, qui se

Créer une entité simple

gLua

### Prérequis

* Un logiciel d'édition de fichiers (Notepad, [Notepad++](https://notepad-plus-plus.org/downloads/), [SublimeText](https://www.sublimetext.com/3), [Visual Studio](https://code.visualstudio.com/)...)
* 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 : 

``` lua
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](https://i.imgur.com/rT13IBC.png)
*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](https://i.imgur.com/81iUgHn.png)
*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
``` lua
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 : 
``` lua
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 : 
``` lua
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 :
``` lua
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 : 

``` lua
-- default value for base = 1920
local function respW(pixels, base)
  base = base or 1920
  return ScrW()/(base/pixels)
end

-- default value for base = 1080
local function respH(pixels, base)
  base = base or 1080
  return ScrH()/(base/pixels)
end
```
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 :
``` lua
Frame:SetSize( respW(500), respH(300) )
```
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 : 
``` lua
myButton:CenterHorizontal(0.75)
myButton:CenterVertical(0.05)
```

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 : 
``` lua
Frame:Center()
```
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 :
```lua
surface.CreateFont( "MyPersonnalFont", {
	font = "Arial",
	extended = false,
	size = 13,
	weight = 500,
})
```

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 : 
```lua
surface.CreateFont( "MyPersonnalFont", {
	font = "Arial",
	extended = false,
	size = ScreenScale( 3 ),
	weight = 500,
})
```
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 : 
```lua
surface.CreateFont( "MyPersonnalFont", {
	font = "Arial",
	extended = false,
	size = ScrH()/0.26,
	weight = 500,
})
```
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

*  [Fonction ScrW\(\)](https://wiki.facepunch.com/gmod/Global.ScrW)
*  [Fonction ScrH\(\)](https://wiki.facepunch.com/gmod/Global.ScrH)
*  [Fonction ScreenScale\(\)](https://wiki.facepunch.com/gmod/Global.ScreenScale)
*  [Fonction element:Center\(\)](https://wiki.facepunch.com/gmod/Panel:Center)

Une compilation d'astuces relatives au développement d'addons sur Garry's Mod avec Lua