- Initiateur de la discussion
Wasied
Psychopathe
- Messages
- 909
- Score réaction
- 394
- Points
- 210
Bonjour à tous,
Vu que je m'ennuie un peu, j'ai décidé d'aider ceux qui arrivent dans le GLua.
J'ai décidé donc de faire entrer mes "connaissances" en développement pour vous fournir un tutoriel sur le développement optimisé d'un HUD sur Garry's Mod.
Si vous avez des propositions pour optimiser encore plus le code, n'hésitez pas !
Avant tout :
- Pour ceux qui ne s'y connaissent vraiment pas dans le développement en général, je vous conseille d'aller voir des vidéos sur YouTube à ce propos.
- Sachez juste que les "--" signifient un commentaire dans le code, l'équivalent du "#" en Python par hasard, donc ils ne sont pas pris en compte lors de l'exécution du code.
- J'ai mis beaucoup de commentaires en français dans ce code pour les débutants, mais prenez l'habitude de les écrire en Anglais, langue "universelle" du développement.
- Si vous ne comprenez pas un terme ou autre, n'hésitez pas à répondre à ce post et j'essayerai de vous répondre ou vous rediriger vers des vidéos explicatives.
- Sachez que le GLua se code en Anglais et pas en Français.
- Il vous faut absolument le GMOD WIKI si vous ne vous y connaissez pas !
Le code (Notez que ce code s'exécutera côté "client" car c'est le client (=joueur) qui doit le voir)
Nous allons commencer par ce qu'on appelle un "hook".
Un hook vous permettra d'exécuter un code lorsqu'un événement a lieu.
Par exemple dans le code suivant, l'événement sera "HUDPaint" qui permettra d'afficher l'HUD sur l'écran de l'utilisateur
Une fois cela fait, nous allons commencer par ajouter les variables.
Les variables, en GROS, cela permet de stocker une valeur, qui peut varier.
(Dico : les variables sont des symboles qui associent un nom à une valeur. Le nom est unique.)
Dans le code, vu qu'on fait un HUD assez basique, on veut juste afficher la vie, l'armure et la faim.
Pour savoir comment récupérer la vie, l'armure et la faim, on va aller voir sur le Gmod Wiki, et nous trouvons ceci :
Vie : https://wiki.garrysmod.com/page/Entity/Health
Armure : https://wiki.garrysmod.com/page/Player/Armor
Pour la faim, c'est un peu plus spécial.. Etant donné qu'elle n'est disponible que sur le mode de jeu "DarkRP", il faut aller voir dans le "DarkRP Wiki" où on trouvera ceci :
Faim : getDarkRPVar("Energy")
Donc avec ceci, nous savons ce que vont valoir nos 3 valeurs de vie, d'armure et de faim.
On va pouvoir l'intégrer au code.
Nous allons donc faire comme ceci :
Donc là, on a défini les variables ainsi que leurs valeurs, il ne suffira plus que les dessiner sur l'écran du joueur.
Remarque : Le "LocalPlayer()" permet de récupérer le joueur qui exécutera le code comme je l'ai indiqué. Il faut toujours respecter les majuscules et ne pas oublier les () à la fin. Cette fonction vous sera très utile dans vos codes. (Uniquement côté client, voir wiki)
Remarque : Le "local" devant les variables sont utiles question optimisation/sécurité. Une variable local signifiera qu'elle ne pourra être appelée uniquement dans le fichier dans laquelle elle se situe (et puis, vous verrez même plus tard que c'est même plus précis que dans tous le fichier). Imaginez que j'appelle ma variable "lol" pour la vie dans mon HUD mais que je ne la défini pas en local, si je fais un autre addon avec une variable qui a le même nom, "lol", il y aura des erreurs. Un peu compliqué à expliquer, habituez-vous juste à les mettre en local.
Avant de dessiner le tout sur l'écran, nous allons optimiser un peu le tout.
Le problème avec notre code actuellement, c'est que si on défini la vie d'un joueur à 500, la barre de vie va aller beaucoup trop loin sur l'écran, et ça va être moche.
Donc nous ce que l'on veut, c'est que la vie soit limité entre 0 et 100, ce qui permettra que si la vie est en dessous de 0, cela sort 0, et que si la vie est au-dessus de 100, cela sort 100. Vous allez comprendre pourquoi après.
Pour régler ce problème, nous avons une magnifique fonction qui nous est préparée : math.Clamp
Je vous laisse aller fouiller et comprendre plus précisément ce qu'elle fait, mais en gros, elle récupère la valeur X sauf si X est plus petit que A ou que X est plus grand que B.
En pratique, la valeur "vie" qu'on a défini en haut, si elle est plus petite que 0 dans ce cas, elle vaudra 0, si elle est plus grande que 100, elle vaudra 100.
Il suffit de le mettre en pratique comme ils le disent sur le wiki.
Voilà, là notre code est bon, on peut commencer à dessiner les barres...
Pour cela, nous allons utiliser le "surface.DrawRect".
Voilà, là votre barre de vie sera dessinée, il suffira juste de faire comme ça pour toutes les barres, juste changer la position de chacune des barres, puis c'est fini.
Voici le code final :
Si vous voulez, vous pouvez même rajouter des backgrounds (=arrières-plans) derrière les barres, c'est exactement la même chose, faut jouer jouer avec la position et la taille des barres comme on a vu. La seule limite du développement c'est votre imagination (après ne pensez pas que vous allez faire un VCMod avec ces compétences, c'est vraiment la base ceci)
Voilà, j'espère que ce petit tutoriel vous aura aidé !
Si vous avez des propositions ou des modifications à apporter, n'hésitez pas !
Merci,
Wasied.
Vu que je m'ennuie un peu, j'ai décidé d'aider ceux qui arrivent dans le GLua.
J'ai décidé donc de faire entrer mes "connaissances" en développement pour vous fournir un tutoriel sur le développement optimisé d'un HUD sur Garry's Mod.
Si vous avez des propositions pour optimiser encore plus le code, n'hésitez pas !
Avant tout :
- Pour ceux qui ne s'y connaissent vraiment pas dans le développement en général, je vous conseille d'aller voir des vidéos sur YouTube à ce propos.
- Sachez juste que les "--" signifient un commentaire dans le code, l'équivalent du "#" en Python par hasard, donc ils ne sont pas pris en compte lors de l'exécution du code.
- J'ai mis beaucoup de commentaires en français dans ce code pour les débutants, mais prenez l'habitude de les écrire en Anglais, langue "universelle" du développement.
- Si vous ne comprenez pas un terme ou autre, n'hésitez pas à répondre à ce post et j'essayerai de vous répondre ou vous rediriger vers des vidéos explicatives.
- Sachez que le GLua se code en Anglais et pas en Français.
- Il vous faut absolument le GMOD WIKI si vous ne vous y connaissez pas !
Le code (Notez que ce code s'exécutera côté "client" car c'est le client (=joueur) qui doit le voir)
Nous allons commencer par ce qu'on appelle un "hook".
Un hook vous permettra d'exécuter un code lorsqu'un événement a lieu.
Par exemple dans le code suivant, l'événement sera "HUDPaint" qui permettra d'afficher l'HUD sur l'écran de l'utilisateur
Code:
hook.Add("HUDPaint", "WasiedHUD", function()
-- Votre code
end)Les variables, en GROS, cela permet de stocker une valeur, qui peut varier.
(Dico : les variables sont des symboles qui associent un nom à une valeur. Le nom est unique.)
Dans le code, vu qu'on fait un HUD assez basique, on veut juste afficher la vie, l'armure et la faim.
Pour savoir comment récupérer la vie, l'armure et la faim, on va aller voir sur le Gmod Wiki, et nous trouvons ceci :
Vie : https://wiki.garrysmod.com/page/Entity/Health
Armure : https://wiki.garrysmod.com/page/Player/Armor
Pour la faim, c'est un peu plus spécial.. Etant donné qu'elle n'est disponible que sur le mode de jeu "DarkRP", il faut aller voir dans le "DarkRP Wiki" où on trouvera ceci :
Faim : getDarkRPVar("Energy")
Donc avec ceci, nous savons ce que vont valoir nos 3 valeurs de vie, d'armure et de faim.
On va pouvoir l'intégrer au code.
Nous allons donc faire comme ceci :
Code:
hook.Add("HUDPaint", "WasiedHUD", function() -- Remarquez ici qu'on a fait une tabulation, c'est pour rendre le code propre et lisible à tous, c'est très important ! local vie = LocalPlayer():Health() -- Ici, nous définissons que la variable vie (que nous avons définie en local, vous verrez plus bas pourquoi) qui vaut à la vie du joueur local (soit le joueur qui exécute le code) local armure = LocalPlayer():Armor() -- Même chose mais avec l'armure local faim = LocalPlayer():getDarkRPVar("Energy") -- Ici, nous définissons que la faim vaut ce que nous avons vu ci-dessus du joueur local
end)Remarque : Le "LocalPlayer()" permet de récupérer le joueur qui exécutera le code comme je l'ai indiqué. Il faut toujours respecter les majuscules et ne pas oublier les () à la fin. Cette fonction vous sera très utile dans vos codes. (Uniquement côté client, voir wiki)
Remarque : Le "local" devant les variables sont utiles question optimisation/sécurité. Une variable local signifiera qu'elle ne pourra être appelée uniquement dans le fichier dans laquelle elle se situe (et puis, vous verrez même plus tard que c'est même plus précis que dans tous le fichier). Imaginez que j'appelle ma variable "lol" pour la vie dans mon HUD mais que je ne la défini pas en local, si je fais un autre addon avec une variable qui a le même nom, "lol", il y aura des erreurs. Un peu compliqué à expliquer, habituez-vous juste à les mettre en local.
Avant de dessiner le tout sur l'écran, nous allons optimiser un peu le tout.
Le problème avec notre code actuellement, c'est que si on défini la vie d'un joueur à 500, la barre de vie va aller beaucoup trop loin sur l'écran, et ça va être moche.
Donc nous ce que l'on veut, c'est que la vie soit limité entre 0 et 100, ce qui permettra que si la vie est en dessous de 0, cela sort 0, et que si la vie est au-dessus de 100, cela sort 100. Vous allez comprendre pourquoi après.
Pour régler ce problème, nous avons une magnifique fonction qui nous est préparée : math.Clamp
Je vous laisse aller fouiller et comprendre plus précisément ce qu'elle fait, mais en gros, elle récupère la valeur X sauf si X est plus petit que A ou que X est plus grand que B.
En pratique, la valeur "vie" qu'on a défini en haut, si elle est plus petite que 0 dans ce cas, elle vaudra 0, si elle est plus grande que 100, elle vaudra 100.
Il suffit de le mettre en pratique comme ils le disent sur le wiki.
Code:
hook.Add("HUDPaint", "WasiedHUD", function() -- Tabulation importante ! local vie = math.Clamp(LocalPlayer():Health(), 0, 100) -- Variable de vie local armure = math.Clamp(LocalPlayer():Armor(), 0, 100) -- Variable d'armure local faim = LocalPlayer():getDarkRPVar("Energy") -- Variable de faim
-- Remarquez que nous n'avons pas mis de math.Clamp pour la faim, tout simplement car il est impossible d'avoir + de 100 ou - de 0 niveau de faim (ils l'ont déjà fait pour nous)
end)Pour cela, nous allons utiliser le "surface.DrawRect".
Code:
hook.Add("HUDPaint", "WasiedHUD", function() local vie = math.Clamp(LocalPlayer():Health(), 0, 100) -- Variable de vie local armure = math.Clamp(LocalPlayer():Armor(), 0, 100) -- Variable d'armure local faim = LocalPlayer():getDarkRPVar("Energy") -- Variable de faim surface.SetDrawColor(255,0,0) -- On défini la couleur de la barre qu'on va dessiner en RGB (rouge) surface.DrawRect(5, ScrH()-30, vie, 20) -- Ici on dessine le rectangle, comme sur le wiki. -- 5 -> Il sera situé à 5 pixels de l'écran de gauche à droite -- ScrH()-30 -> ScrH() permet de récupérer la hauteur de l'écran, donc il sera situé à la taille de l'écran - 30. -- Cela permettra de mettre l'HUD en bas, parce que si on avait juste mis 30, il serait situé à 30 pixel à partir du haut de l'écran. -- C'est une simple soustraction, imaginez que votre écran fait 100 pixel de haut, vous faites simplement 100-30. -- Si vous êtes bon en math, vous savez que ça fait 70, donc si mettez 70 cela fonctionnera exactement de la même manière. -- Le problème c'est que chaque écran a une taille différente, donc nous adaptons à tous les écrans de tous les joueurs pour qu'il soit situé à la même place sur l'écran de tout le monde. -- vie -> On fait appel à la variable qu'on avait défini en haut. C'est grâce à cela que la barre de vie bouge en fonction de votre vie. -- En gros, vous dites que la vie du joueur sera la longueur de la barre. -- Donc si la vie du joueur est de 50, la barre sera de 50 pixel ! -- 20 -> Simplement la hauteur de la barre, vous faites comme vous voulez, chacun ses gouts !
end)Voici le code final :
Code:
hook.Add("HUDPaint", "WasiedHUD", function() local vie = math.Clamp(LocalPlayer():Health(), 0, 100) -- Variable de vie local armure = math.Clamp(LocalPlayer():Armor(), 0, 100) -- Variable d'armure local faim = LocalPlayer():getDarkRPVar("Energy") -- Variable de faim surface.SetDrawColor(255,0,0) -- Couleur de la vie surface.DrawRect(5, ScrH()-30, vie, 20) -- Barre de la vie surface.SetDrawColor(0,255,0) -- Couleur de la faim surface.DrawRect(5, ScrH()-60, faim, 20) -- Barre de la faim if armor != 0 then -- Ici, ce n'est pas obligatoire, mais c'est une vérificiation qui fait en sorte que si l'armure vaut 0, elle ne s'affiche pas (juste question pratique) surface.SetDrawColor(0,0,255) -- Couleur de l'armure surface.DrawRect(5, ScrH()-90, armure, 20) -- Barre de l'armure end
end)Voilà, j'espère que ce petit tutoriel vous aura aidé !
Si vous avez des propositions ou des modifications à apporter, n'hésitez pas !
Merci,
Wasied.
Dernière édition:
