[GMOD Lua] Créer une fenêtre basique !

    Publicités

Users Who Are Viewing This Thread (Total: 1, Members: 0, Guests: 1)

[.Roy

V
Dec 6, 2013
540
7
744
29
Danemark
538000cooltext244592586146323.png

Coucou la compagnie ! Je ne sais pas si la programmation sur Garry's Mod (en Lua) intéresse qui que ce soit... mais bon, je créé tout de même ce Tuto pour le plaisir de le faire !

857609cooltext244593895772573.png

Les prérequis :
• Le jeu (Captain Obvious)
• Un peu de connaissance en programmation (un tout pitit peu)
• Un éditeur de script ou même de texte come Notepad++ ou Atom, mais vous pourriez aussi utiliser Microsoft Word ou le notepad pourris de windows !
• Le fameux Brain.exe ;)

Les scripts pour Garry's Mod se font en Lua, mais un Lua modifié avec beaucoup de nouvelles fonctions et hooks propre à Garry's Mod !

Il y a plusieurs type de Scripts :
• Les scripts Server-Side, exécutés par le Serveur
• Les scripts Client-Side, exécuté par le Client (vous en l'occurence)
• Les scripts Shared, qui sont partagés entre le Serveur et le Client

Les fenêtres de Garry's Mod sont appelées Panneau Derma, ou Derma Panel en Anglais. Les scripts des Dermas sont des scripts Client-Side.

Pour que Garry's Mod détecte votre script et puisse l'ouvrir, il vous faudra le placer dans le dossier "lua" de votre dossier "garrysmod".

621bced07e034af1838fd92ca2681916.png

Vous pourrez nommer votre fichier comme vous le souhaitez, mais il devra bien sûr avoir l'extension "*.lua"

325337cooltext244594542049077.png

Les lignes suivantes sont la création de la fenêtre, c'est à dire, l'endroit où vous définirez la couleur, la taille, l'emplacement et autre chose basique de votre Derma.

Code:
local maFenetre = vgui.Create("DFrame") -- Cette ligne définie "maFenêtre" comme un nouveau DFrame, c'est à dire la fenêtre en elle-même sans ses composants
maFenetre:MakePopup() -- Si vous ajoutez cette ligne, votre fenêtre apparaîtra lorsque votre script sera ouvert dans Garry's Mod !
maFenetre:SetSize(300, 150) -- Cette ligne définie la hauteur et la largeur de la fenêtre, dons sa taille. Le premier nombre est la hauteur en pixels, le second la largeur en pixels.
maFenetre:SetTitle("Ma Fenêtre") -- Cette ligne vous permet de définir le nom de votre fenêtre qui apparaîtra en jeu.
maFenetre:SetVisible(true) -- Cette ligne permet de définir si la fenêtre sera visible. True = Oui, False = Non
maFenetre:ShowCloseButton(true) -- Cette ligne permet de définir si oui ou nom, le boûton permettant de fermer la fenêtre sera visible. True = Oui, False = Non
maFenetre:SetCursor("arrow") -- Cette ligne vous sert à définir le curseur qui sera afficher quand votre souris sera sur la fenêtre, cette fonction est un peu inutile !
maFenetre:Center() -- Si vous ajoutez cette ligne, la fenêtre apparaîtra au centre de l'écran !

Maintenant, testons le script, pour se faire, lancez Garry's Mod, et commencez une partie Sandbox en solo. Une fois arrivé, ouvrez la console (F10), et écrivez ceci :
42803eb8dcc94f219f2f211456b64d83.png

Bien sûr, remplacez "NOM DE VOTRE DERMA.lua" par le nom de votre fichier "*.lua" que vous avez enregistrez, enlevez aussi les guillemets.


Le résultat est celui que nous attendions, la fenêtre apparaît grâce à "MakePopup()" :
530579a4c2de48bd90f034b7942868d4.png

On remarque que les propriétés de la fenêtre sont celle que nous avons entré dans le script !


Voilà, vous avez créé une fenêtre... mais pourquoi ne pas ajouter un autre élément comme un bouton ??

Le procédé est le même que pour la fenêtre, vous allez voir !
Code:
[/SIZE][/SIZE][/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=5][SIZE=4][SIZE=5][SIZE=4][SIZE=5][SIZE=4][LEFT]local monBouton = vgui.Create("DButton", maFenetre) -- Cette ligne définie "monBouton" comme un nouveau DButton, vous remarquerez qu'il y a un second paramètre après "DButton" ! Ce-dernier sert à définir le Parent du bouton, c'est à dire à quoi il appartient, en l’occurrence c'est "maFenetre" qui est le DFrame que nous avons créé plus haut. En faisant ça, le bouton restera attaché à la fenêtre !
monBouton:SetPos(10, 30) -- Cette ligne sert à définir les positions X et Y du bouton par rapport à son parent, dans ce cas "maFenetre". Premier nombre = X, Second nombre = Y
monBouton:SetSize(100, 50) -- Vous connaissez déjà cette ligne !
monBouton:SetVisible(true) -- Celle-ci aussi :D
monBouton:SetText("Hello World !) -- Cette ligne permet de décider du texte affiché sur le bouton
monBouton.DoClick = function () -- Les trois lignes qui suivent sont la pour définir la fonction assignée au bouton. La fonction de ce bouton est donc d'afficher dans le chat du joueur ayant appuyé le message "Hello World !". LocalPlayer() désigne le Client qui est en train d'exécuter le Script.
     LocalPlayer():ChatPrint("Hello World !)
end
[/LEFT]

6927b8f9cf444702b3fbb648cdad03a7.png

On peut observer ici que j'ai appuyé 4 fois sur le bouton !
Je vous invite à aller sur Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris! pour prendre connaissance des différents éléments que vous pouvez ajouter à votre Derma ! Cette liste est en Anglais.

307051cooltext244598457109388.png


Allé Hop ! Un p'tit bonus pour la route. Ici je vais vous apprendre à éditer l'apparence de votre fenêtre et de votre bouton grâce à ces lignes :
Code:
maFenetre.Paint = function()
     surface.SetDrawColor(255(rouge), 255(vert), 255(bleu), 255(opacité)) -- Ici c'est pour choisir la couleur de votre fenêtre grâce au système RGB, le dernier nombre et l'opacité, le plus opaque est 255. Vous l'aurez compris, la couleur de ma fenêtre sera donc le blanc !
     surface.DrawRect( 0, 0, maFenetre:GetWide()(obtenir la largeur de votre panel), maFenetre:GetTall()(obtenir la hauteur de votre panel)) -- Cette ligne "dessine" le rectangle final. Les deux premiers nombre sont la position X et la position Y qui sont inutile à préciser dans ce cas
end

d4e7cda289cf41ac98f65bc1a3d271b0.png


Oui oui, ce n'est pas magnifique, mais c'est ce que je voulais obtenir ! À vous de créer des trucs de oufs comme ça :
07b02e328aec1ad1b8f04457de18827a.png

Ou ça :
1024x768.jpg


931724cooltext244600186800411.png


Voilà ! C'est fini ! J'espère que quelqu'un trouvera ça instructif... n'hésitez pas à mettre un p'tit merci ! C'est gratuit !