Wumbaloo

Ce tutoriel est la suite du tutoriel disponible ici: Il était préférable de créer un autre sujet au lieu de poster une réponse dans l'autre afin que tout ça soit clair et bien présenté. Aujourd'hui, on fait la même chose que plus haut mais en version DX ! II) Méthode N° 2: DX Les DX sont différent des GUI dans le sens ou ceux-ci ne peuvent pas être positionné par rapport à un autre élément, je m'explique, prenons la fonction "guiCreateEdit", l'argument facultatif (le 7ème) est "element parent = nil" c'est à dire que si nous lui mettons un élément parent en argument, la position et la taille se feront par rapport à cet élément dit "parent" En DX, tout est calculé en absolu depuis le haut à gauche de notre écran, ce qu'il faut, c'est faire notre "propre" système de relatif et de parent, grâce aux maths, aux variables et à votre cerveau ! Commençons par recréer notre meta.xml dans une nouvelle ressource. Créons ensuite le fichier "c_dx.lua" dans lequel nous allons développer notre petit panel de connexion. Comme fait dans le panel GUI, nous allons afficher notre panel au lancement de la ressource, le changement avec les GUI, c'est que les DX sont affichés à chaque frame affiché par GTA (FPS)! Pour ça, il faut utiliser l'event "onClientRender" combiné à la fonction "addEventHandler" dans notre fonction "resourceStart" pour afficher la fonction "panelConnexion" qui contiendra notre panel en DX, ce qui donne : Maintenant, il nous faut rajouter une variable au dessus de la fonction "resourceStart" afin de connaître la résolution utilisée par l'utilisateur, pour ça, utilisons la fonction "guiGetScreenSize" qui nous retourne deux valeurs: la largeur et la hauteur de l'écran du joueur, nous allons donc mettre le code suivant au début de notre fichier : local largeur, hauteur = guiGetScreenSize() Pour rappel, "local" signifie que nous pouvons utiliser ces variables seulement dans ce fichier "c_dx.lua" et pas dans un autre fichier client. Il faut remplir la fonction "panelConnexion" car si elle s'exécute à chaque frame sans rien faire c'est problématique. Assignons plusieurs variable, la largeur, la hauteur mais aussi la positionX et la position Y. Ces deux dernières seront calculées par rapport à la largeur et la hauteur afin de centrer notre panel. Mais vous allez me dire : Et bien Jamy, il suffit de multiplier notre taille relative par la taille de l'écran du joueur afin que la taille soit adaptée peu importe la résolution du joueur. Comme dans la partie I sur le GUI, le centre est défini par la moitié de l'écran - la moitié de notre panel. Si on suit cette logique, on doit donc écrire le code suivant dans notre fonction "panelConnexion" : function panelConnexion() local panelLargeur, panelHauteur = 0.271 *largeur, 0.384 *hauteur local panelX, panelY = largeur/2 - panelLargeur/2, hauteur/2 - panelHauteur/2 end C'est déjà pas mal de maths, malheureusement pour les non matheux, c'est pas fini, nous devons afficher l'arrière plan de notre panel. Ce qui est cool avec les DX, c'est qu'il y a déjà une fonction pour afficher un rectangle, donc on a pas besoin d'image inutile pour simuler ce rectangle, il nous suffit d'appeler la fonction "dxDrawRectangle" qui débutera à notre panelX, panelY avec pour taille panelLargeur et panelHauteur. bool dxDrawRectangle ( float startX, float startY, float width, float height [, int color = white, bool postGUI = false, bool subPixelPositioning = false ] ) Vous pouvez voir que cette fonction possède en argument optionnel une variable "color" qui peut être utilisée avec "tocolor", c'est une fonction MTA SA dans laquelle nous mettons le RGBA de la couleur que nous voulons et MTA nous la convertie pour l'utilisation dans les dx notamment. MTA nous mâche bien le travail quand même! Ici, nous allons mettre "tocolor(0, 0, 0, 100)" car nous voulons un rectangle noir avec un peu de transparence. Notre fichier ressemble donc à celui-ci: Exécutons notre code et voyons ce que ça fait. Un magnifique rectangle bien centré comme nous le voulons ! Maintenant, il s'agit de faire une superposition avec le fond de la barre de titre, pour calculer la taille en hauteur de cette barre de titre, nous allons reprendre la taille dans la partie I sur le GUI (0.145) puis la multiplier par la taille du panel donc : 0.145 *panelHauteur Entrons donc: dxDrawRectangle(panelX, panelY, panelLargeur, 0.145 *panelHauteur, tocolor(0, 0, 0, 255)) Parfait! C'est exactement ce qu'on veut ! Continuons en ajoutant un texte, pour ça, utilisons la fonction "dxDrawText". bool dxDrawText ( string text, float left, float top [, float right=left, float bottom=top, int color=white, float scale=1, mixed font="default", string alignX="left", string alignY="top", bool clip=false, bool wordBreak=false, bool postGUI=false, bool colorCoded=false, bool subPixelPositioning=false, float fRotation=0, float fRotationCenterX=0, float fRotationCenterY=0 ] ) Ici, il y a beaucoup d'arguments facultatifs en effet mais ils sont très utiles. Pour commencer, on ne spécifie pas une taille dans cette fonction mais une position de début et une position de fin, ce qui signifie que si l'on veut que ce soit centrer en largeur, en position de départ nous devons mettre "panelX" et en position de fin "panelX+panelLargeur", si vous avez compris ça, c'est un jeu d'enfant pour compléter ces arguments. Complétons ensuite les arguments jusqu'au centrage du texte, le font est "pricedown" qui est déjà incluse dans MTA, on a donc pas a créer nous même une police (sachez qu'on peut utiliser des polices personnalisées en DX via dxCreateFont) les valeurs du centrage peuvent être "left", "center" ou "right" pour la largeur et "top", "center" ou "bottom" pour la hauteur, dans notre cas, nous allons mettre "center" aux deux. Ce qui nous donne : dxDrawText("Panel de connexion", panelX, panelY, panelX+panelLargeur, panelY+0.145 *panelHauteur, tocolor(255, 255, 255, 255), 1.75, "pricedown", "center", "center") Après avoir vu la ligne ci-dessus vous allez me dire : Et bien.. Non. Décidément, on vas devoir jouer avec les maths du début jusqu'à la fin. Pour calculer la taille en relatif, nous allons simplement diviser la taille de la résolution en largeur par la taille qui nous correspond sur notre écran, moi je suis en 1920x1080 et la taille qui me correspond est "1.75", je vais donc diviser 1920 par 1.75 ce qui nous donne 1097, ce résultat est le nombre par lequel la largeur de la résolution du joueur doit être divisée. Dans mon cas, j'écris donc "largeur/1097". dxDrawText("Panel de connexion", panelX, panelY, panelX+panelLargeur, panelY+0.145 *panelHauteur, tocolor(255, 255, 255, 255), largeur/1097, "pricedown", "center", "center") Jusqu'ici, tout vas bien, c'est la magie des maths, pour l'instant, préoccupons nous pas des champs de saisie et continuons avec le même principe avec dxDrawImage pour obtenir le résultat que l'on veut, je vous laisse à vos clavier ! Après quelques lignes rajoutées, j'arrive enfin à mon résultat désiré: Voici ma fonction "panelConnexion" en entière: function panelConnexion() local panelLargeur, panelHauteur = 0.271 *largeur, 0.384 *hauteur local panelX, panelY = largeur/2 - panelLargeur/2, hauteur/2 - panelHauteur/2 -- Fond du panel dxDrawRectangle(panelX, panelY, panelLargeur, panelHauteur, tocolor(0, 0, 0, 100)) -- Barre de titre (fond) dxDrawRectangle(panelX, panelY, panelLargeur, 0.145 *panelHauteur, tocolor(0, 0, 0, 255)) -- Barre de titre (texte) dxDrawText("Panel de connexion", panelX, panelY, panelX+panelLargeur, panelY+0.145 *panelHauteur, tocolor(255, 255, 255, 255), largeur/1097, "pricedown", "center", "center") local identifiantsY = panelY+ 0.2 *panelHauteur -- Variables pour moins de bordel dans l'utilisation de la fonction dxDrawText dxDrawText("Entrez vos identifiants :", panelX+ 0.0385 *panelLargeur, identifiantsY, panelX+panelLargeur- 0.0385 *panelLargeur, identifiantsY+ 0.0482 *identifiantsY, tocolor(255, 255, 255, 255), largeur/1097, "clear", "left", "center") -- Nom d'utilisateur (Image) dxDrawImage(panelX+ 0.077 *panelLargeur, panelY+ 0.313 *panelHauteur, 0.088 *panelLargeur, 0.111 *panelHauteur, "images/nom_utilisateur.png") -- Mot de passe (Image) dxDrawImage(panelX+ 0.077 *panelLargeur, panelY+ 0.525 *panelHauteur, 0.088 *panelLargeur, 0.111 *panelHauteur, "images/mot_de_passe.png") local connexionX, connexionY = panelX+ 0.477 *panelLargeur, panelY+ 0.783 *panelHauteur -- Variables pour moins de bordel dans l'utilisation de la fonction dxDrawText dxDrawImage(connexionX, connexionY, 0.3846 *panelLargeur, 0.12 *panelHauteur, "images/connexion_fond.png") -- Afficher l'image avant le texte pour qu'elle soit en dessous du texte dxDrawText("Connexion", connexionX, connexionY, connexionX+ 0.3846 *panelLargeur, connexionY+ 0.12 *panelHauteur, tocolor(255, 255, 255, 255), largeur/1280, "clear", "center", "center") -- Icône en bas à gauche dxDrawImage(panelX+ 0.029 *panelLargeur, panelY+ 0.723 *panelHauteur, 0.1731 *panelLargeur, 0.217 *panelHauteur, "images/icon_bas_gauche.png") end Maintenant, passons à la réalisation du champ de saisie entièrement en DX. Je vous ai facilité la tâche en rédigeant les champs de saisies, vous n'avez plus qu'à les appeler en faisant afficherSaisie(x, y, saisieLargeur, saisieHauteur, texteDeBase) Voici tout ce qui concerne les champs de saisies. function afficherSaisie(x, y, saisieLargeur, saisieHauteur, texte) saisies[texte] = texte -- Implémentation du champ de saisie dans notre liste des champs de saisie dxDrawRectangle(x, y, saisieLargeur, saisieHauteur, tocolor(255, 255, 255, 200)) -- Affichage du fond de notre champ de saisie -- Affiche notre texte avec opération quaternaire si le champ n'a jamais été édité dxDrawText((editSaisie[texte]) and editSaisie[texte] or texte, x+ 0.05 *saisieLargeur, y, x+saisieLargeur, y+saisieHauteur, tocolor(0, 0, 0, 255), largeur/1920, "default", "left", "center") local curseurX, curseurY = getCursorPosition() -- Récupération de la position du curseur if (getKeyState("backspace") and edit == texte) then -- Si appuie sur "Retour" ou le champ en édition est égal au champ affiché editSaisie[texte] = string.sub(editSaisie[texte], 1, string.len(editSaisie[texte])-1) -- Retirer la dernière lettre du champ de saisie end if (curseurX and curseurY) then -- Pour éviter les erreurs dans le débug if (isInBox(curseurX*largeur, curseurY*hauteur, x, x+saisieLargeur, y, y+saisieHauteur)) then -- Fonction utile, vérifie la position du curseur dans un carré tooltip(curseurX, curseurY, "Cliquez pour editer") -- Fonction utile, affiche un message sur la souris if (justClicked) then -- Fonction utile, si joueur clique if (edit ~= texte) then -- Et que le champ en édition est différent de celui affiché edit = texte -- On édite alors le champ affiché if (not editSaisie[texte]) then -- S'il n'existe pas editSaisie[texte] = edit -- On le créé end if (editSaisie[texte] == texte) then -- S'il est égal au texte de base editSaisie[texte] = "" -- On le supprime en remplaçant par "" end end end justClicked = nil end end end local touches = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "backspace", "space", "'"} -- Liste des touches utilisables addEventHandler( "onClientKey", getRootElement(), function(bouton, press) if (press) then -- Si touche enfoncée for _, touche in pairs(touches) do -- On vérifie qu'on autorise la touche if (touche == bouton) then -- Si on la trouve for k, texte in pairs(editSaisie) do -- On cherche notre champ en édition if (k == edit) then -- Si on le trouve if (touche == "backspace") then -- Et que la touche "Retour" est enfoncée editSaisie[k] = string.sub(texte, 1, string.len(texte)-1) -- On efface la dernière lettre elseif (touche == "space") then -- Sinon si la touche "Espace" est enfoncée editSaisie[k] = texte .. " " -- On rajoute un espace else -- Sinon if (getKeyState("lshift") or getKeyState("rshift")) then -- Si une touche pour majuscule est enfoncée touche = string.upper(touche) -- Mettre la lettre en majuscule end editSaisie[k] = texte .. touche -- Ajouter la lettre au champ de saisie end break end end break end end end return false end ) -- Fonctions utiles function isInBox( x, y, xmin, xmax, ymin, ymax) if x and y and xmin and xmax and ymax and ymin then return x >= xmin and x <= xmax and y >= ymin and y <= ymax end end local tooltip_text_color = tocolor( 255, 255, 255, 255 ) local tooltip_background_color = tocolor( 0, 0, 0, 190 ) local tooltipYet = false function tooltip( x, y, text, text2 ) tooltipYet = true text = tostring( text ) if text2 then -- Argument text2 optionnel text2 = tostring( text2 ) end if text == text2 then -- Si text est équivalent au text2, alors on supprime ce dernier text2 = nil end local width = dxGetTextWidth( text, 1, "clear" ) + 20 -- On récupère la largeur pour l'encadré du text if text2 then -- Si text2 width = math.max( width, dxGetTextWidth( text2, 1, "clear" ) + 20 ) -- On récupère la largeur pour l'encadré du text2 text = text .. "\n" .. text2 end local height = 10 * ( text2 and 5 or 3 ) -- On calcule la hauteur de notre encadré x = x *largeur y = y *hauteur -- On affiche le tout dxDrawRectangle( x, y, width, height, tooltip_background_color, true ) dxDrawText( text, x, y, x + width, y + height, tooltip_text_color, 1, "clear", "center", "center", false, false, true ) end addEventHandler("onClientClick", getRootElement(), function (button, state) if (button == "left" and state == "down") then -- Si le clic gauche est enfoncé justClicked = true -- Alors on vient de cliquer elseif (button == "left" and state == "up") then -- Sinon s'il est relaché justClicked = false -- On ne clique plus end end) Si vous voulez vraiment que je détaille tout ce travail, j'en ferai un tutoriel. Vous pouvez télécharger ma ressource utilisée pendant le tutoriel ici : Télécharger via Mega.NZ J'espère que ce tutoriel vous a plus, on se retrouve pour la partie III sur le CEF ! Bon jeu !

Je comprends ce que vous voulez dire mais alors là ce problème je ne le connais pas du tout. Tu as mis tout tes drivers à jour ? Ce site (https://www.driverscloud.com/fr/demarrer) est parfait pour vérifier les pilotes et mettre à jour ceux-ci

Si ton problème ressemble à la vidéo qui suit: Alors le Stream Memory Fix est pour toi, c'est un patch qui permet de mieux gérer les chargements des objets (textures, modèles etc), je crois qu'il nécessite Cleo pour être installé.

Tu as essayé un patch Stream Memory Fix du style http://www.gtainside.com/en/sanandreas/other/18222-stream-memory-fix-2-0/ ? Ou encore http://www.mediafire.com/file/w4vjddwj4hjxlmd/Stream+Memory+fix.rar ?

Tu as essayé une simple réinstallation de ton GTA en entier ?

De ce que j'ai compris il y a un problème avec l'élément data "zombie" mais je ne vois pas cet element data dans la fonction "SpawnZombie", il est en client dans la fonction "Spawn_Placement" peut-être?

Yep, désolé j'ai répondu trop vite sans inspecter le code de la ressource que tu as posté.

Il faudrait utiliser playSound3D au lieu de playSound

Pas de soucis! Content de pouvoir aider!

J'utilise Atom qui est développé par GitHub https://atom.io/

Y'a pas de quoi ! Je continuerai sur un autre poste pour réaliser cette même interface mais en DX

Aujourd'hui on va voir comment réaliser une interface via la méthode GUI et DX, si vous voulez que j'vous apprenne à faire la même chose en CEF dites-le, pour ceux qui ne savent pas, CEF c'est l'abréviation de Chromium Embedded Framework, en gros, c'est l'intégration d'un navigateur WEB en jeu, sur MTA, on utilise Chromium qui nous est développé par Google. Bien, on va partir du fait que vous savez au moins créer un dossier pour ajouter une nouvelle ressource, donc créer un meta.xml et au moins un fichier client, ce qui nous donnerait une arborescence avec notre ressource "tutorial" comme suit: I) Mise en place de l'idée Pour faire simple et utile à tout le monde, dans ce tutoriel on va voir comment créer un panel de connexion de ce style (bien sûr, adapté en fonction des méthodes GUI, DX ou CEF), je l'avais développé pour un serveur qui n'a malheureusement pas eu le temps de voir le jour, bref. Si vous n'avez pas d'idée et vous ne savez pas à quoi ressemblera votre panel de connexion, je vous invite à vous rendre sur Google Image et tapez "Login Panel" ou encore "GTA SA Login Panel" dans la barre de recherche, vous tomberez sur un bon nombre de panels qui vous permettront d'imaginer le vôtre, ne copiez pas bêtement les panels, c'est sans intérêt. Dans mon cas, j'ai une petite idée de ce que je vais réaliser, lorsque vous travaillez sur une interface, veillez à toujours faire un plan sur un logiciel de dessin pour éviter de vous perdre et pour ne pas avoir à recommencer tout le temps, voici mon plan réalisé sur Paint.NET à partir d'une simple capture d'écran du jeu : J'ai utilisé Icons8 pour les icônes (le nom d'utilisateur, le mot de passe et le W en bas à gauche) Après avoir mis sur papier notre idée, le prochain objectif est clair : le produire en jeu le plus fidèlement possible. Pensez à extraire tout les éléments séparés, dans mon cas, je dois extraire la petite icône pour le nom d'utilisateur, l'icône pour le mot de passe, celui en bas à droite (le W entouré) puis le fond du bouton "Connexion" Néanmoins, si vous utilisez comme moi une même forme pour deux éléments, n'extrayez pas les deux éléments, extrayez-en un seul puis modifiez-le en jeu directement. II) Méthode N° 1: GUI Il s'agit de la méthode la plus simple pour commencer, elle est, à mon sens, limitée mais elle est optimisée pour l'utilisateur (moins de ralentissements) Au niveau de l'extraction, je n'extrais qu'un rectangle noir opaque et l'autre un peu transparent de 1x1 pixel puisque nous pouvons par la suite redimensionner l'image comme bon nous semble sans affecter la qualité de celle-ci (c'est qu'un rectangle noir après tout) Voici donc la liste de mes images extraites : Nous sommes prêt à passer sur notre éditeur de texte ! Rendons-nous dans le fichier client de notre panel (ici : c _gui.lua) puis ajoutons un événement qui se déclenchera seulement lorsque la ressource se démarre pour l'utilisateur, après une petite recherche sur le Wiki, nous pouvons trouver l’événement qui va nous aider: onClientResourceStart https://wiki.multitheftauto.com/wiki/OnClientResourceStart Pour vérifier qu'il est compatible avec notre fichier, en haut à droite nous pouvons voir "Clientside event" qui nous rappelle qu'on peut utiliser cet événement seulement côté Client. Intégrons-le dans notre fichier, il exécutera la fonction "resourceStart" pour qu'on ne soit pas perdu, ce qui donne : J'ai mis "getResourceRootElement(getThisResource())" en deuxième argument parce que ça évite qu'à chaque redémarrage de ressource, celle-ci se redémarre, a contrario "getRootElement()" permettra de lancer notre ressource "tutorial" à chaque fois qu'une autre ressource est démarrée. Ensuite, importons nos images précédemment extraites dans notre ressource sans oublier de compléter le "meta.xml", ce qui nous donne : Revenons à notre fichier "c_gui.lua" et créons enfin cette fonction pour afficher le panel ! Nous l'appellerons "panelConnexion". Affichons le fond du panel en utilisant "rectangle_noir_transparent.png" à la dimension de notre plan soit 520x415 via la fonction suivante : element guiCreateStaticImage ( float x, float y, float width, float height, string path, bool relative, [element parent = nil] ) Nous pouvons voir que cette fonction parle de "relative" en guise d'argument N° 6, mais qu'est-ce que c'est ? En fait, il nous faut utiliser le système de positionnement relatif au maximum, parce que si vous travaillez en absolue et que vous développez un panel qui mesure 1920x1080 et que vous dites à votre pote "Regarde j'ai fais un magnifique panel !" et que lui possède un écran 800x600, il ne va rien voir puisque c'est trop grand pour son écran. C'est pour ça qu'on a inventé le relatif, parce que si vous développez un panel en entrant en dimension 1 en X et 1 en Y, ça prendra tout votre écran peu importe si vous avez l'écran de votre pote (800x600) ou un écran 4K UHD (3840x2160), vous verrez le panel en plein écran. Enfin bref, travaillons en relatif, pour adapter nos mesures, il suffit de prendre la dimension de l'élément du panel et de le diviser par la dimension sur lequel le plan a été désigné (je suis en 1920x1080 en l’occurrence). Dans notre cas, le fond du panel mesure 520x415 ce qui donne en X: 520/1920 = 0.271 et en Y = 415/1080 = 0.384. Le centre d'un élément est définie par la largeur de la zone divisée par 2 moins la taille de l'élément divisé par 2. Dans notre cas, si on veut centrer notre panel horizontalement il faut faire (1920/2-520/2) ce qui nous donnerait 700 pixels pour l'axe X. Pour simplifier tout ça, faisons une fonction indépendante de notre code pour centrer un élément sur notre écran, voici comment je l'ai rédigé: function centrerElement(element) local ecranL, ecranH = guiGetScreenSize() local largeur, hauteur = guiGetSize(element, false) guiSetPosition(element, ecranL/2-largeur/2, ecranH/2-hauteur/2, false) end Nous pourrons maintenant centrer n'importe quel élément en faisans "centrerElement(element)" et ainsi ne plus se soucier de la position. Revenons au fichier client, et écrivons cette fonction une bonne fois pour toutes. Voici ce que ma fonction panelConnexion donne: function panelConnexion() local panel = guiCreateStaticImage(0, 0, 0.271, 0.384, "images/rectangle_noir_transparent.png", true) centrerElement(panel) -- Centrer le panel de connexion end Mon fichier client ressemble à ça : Lançons tout ça en jeu! Munissez-vous d'un compte ACL, connectez-vous, affichez le debugscript au niveau 3 (/debugscript 3) au cas où il y aurait une erreur, faites un '/refresh' de votre serveur, démarrez la ressource puis appréciez! Un magnifique rectangle transparent au centre de l'écran! C'est le début de votre panel. Maintenant que tout ça est expliqué, avançons plus rapidement, je vous propose d'ajouter la barre qui nous servira de titre pour notre panel. Le plus dur a été fait, il faut désormais disposer les éléments dans le panel, je vous ai expliqué le relatif au début de ce chapitre, mais figurez-vous qu'on peut aussi utiliser le relatif par rapport à un élément et pas seulement par rapport à l'écran! Ce qui veut dire que si on veut placer un élément tout à gauche de notre panel à sa bordure, on écrira en position "0" en abscisse (axe X), allons-y, prenons la fonction guiCreateStaticImage est remplissons la pour faire en sorte de respecter le plan, ça nous donne: local barre_titre_fond = guiCreateStaticImage(0, 0, 1, 0.145, "images/rectangle_noir.png", true, panel) J'ai mis 0 car je veux que l'image s'affiche en haut à gauche de l'écran, la taille en largeur est de 1 parce qu'il faut que la barre de titre fasse tout le panel en largeur et 0.145 car sur mon plan ma barre de titre fait 60 pixels, et mon panel 415 pixels, donc il faut faire 60/415 pour avoir la taille relative. Notez le dernier argument qui est "panel" ce qui signifie que cette barre de titre est attachée à l'élément panel, les positions sont donc relative à celui-ci. Attaquons le texte! "Label" est aussi le nom pour designer une zone de texte, nous allons utiliser "guiCreateLabel" element guiCreateLabel ( float x, float y, float width, float height, string text, bool relative, [element parent = nil] ) Pour centrer le texte, nous allons simplement commencer par afficher le texte en haut à gauche du panel, a la taille de la barre de titre, faisons donc: local barre_titre_texte = guiCreateLabel(0, 0, 1, 1, "Panel de connexion", true, barre_titre_fond) Rien de compliqué, puis mettons-le en forme via les fonctions "guiLabelSetHorizontalAlign" et "guiLabelSetVerticalAlign" ce qui donne: local barre_titre_texte = guiCreateLabel(0, 0, 1, 1, "Panel de connexion", true, barre_titre_fond) guiLabelSetHorizontalAlign(barre_titre_texte, "center") guiLabelSetVerticalAlign(barre_titre_texte, "center") Pour changer la police, il y a la fonction "guiSetFont", MTA possède des polices de base qui sont disponible ici: Standard GUI Font Names Dans notre cas, nous utilisons une police personnalisée qui est "Pricedown", nous devons donc la créer, procurez vous la police sur internet ou extrayez la de votre ordinateur si vous l'avez puis placez la dans votre ressource. Ajoutez ensuite la police dans le meta.xml, j'en ai profité pour l'organisé comme suit: <meta> <info author="Wumbaloo Willy" type="script" description="Tutorial."/> <script src="c_gui.lua" type="client" /> <!-- Images --> <file src="images/connexion_fond.png" /> <file src="images/icon_bas_gauche.png" /> <file src="images/mot_de_passe.png" /> <file src="images/nom_utilisateur.png" /> <file src="images/rectangle_noir.png" /> <file src="images/rectangle_noir_transparent.png" /> <!-- Polices --> <file src="polices/pricedown.ttf" /> </meta> Revenons côté client et importons la police personnalisée. Pour ça, on utilise la fonction "guiCreateFont" qui prend deux arguments: le chemin d'accès vers la police et la taille de la police. On créé donc la police avec "guiCreateFont" puis on l'utilise avec "guiSetFont", rien de compliqué. Tout ça nous donne notre fonction panelConnexion qui ressemble à ça: function panelConnexion() local panel = guiCreateStaticImage(0, 0, 0.271, 0.384, "images/rectangle_noir_transparent.png", true) centrerElement(panel) -- Centrer le panel de connexion -- Barre de titre (fond) local barre_titre_fond = guiCreateStaticImage(0, 0, 1, 0.145, "images/rectangle_noir.png", true, panel) -- Barre de titre (texte) local barre_titre_texte = guiCreateLabel(0, 0, 1, 1, "Panel de connexion", true, barre_titre_fond) guiLabelSetHorizontalAlign(barre_titre_texte, "center") guiLabelSetVerticalAlign(barre_titre_texte, "center") local pricedown_32px = guiCreateFont("polices/pricedown.ttf", 32) -- Création de la police personnalisée guiSetFont(barre_titre_texte, pricedown_32px) end En jeu voici à quoi notre panel ressemble: C'est exactement ce qu'on voulait! Ensuite, mettons en forme notre panel à l'aide des fonctions "guiCreateLabel", "guiCreateStaticImage" et aussi "guiCreateEdit" et voici ce que ça nous donne ! Je compte sur vous, on a vu tout ce qu'il fallait voir pour continuer ! Voici ma fonction panelConnexion : function panelConnexion() local panel = guiCreateStaticImage(0, 0, 0.271, 0.384, "images/rectangle_noir_transparent.png", true) -- 520x415 centrerElement(panel) -- Centrer le panel de connexion -- Barre de titre (fond) local barre_titre_fond = guiCreateStaticImage(0, 0, 1, 0.145, "images/rectangle_noir.png", true, panel) -- Barre de titre (texte) local barre_titre_texte = guiCreateLabel(0, 0, 1, 1, "Panel de connexion", true, barre_titre_fond) guiLabelSetHorizontalAlign(barre_titre_texte, "center") guiLabelSetVerticalAlign(barre_titre_texte, "center") local pricedown_32px = guiCreateFont("polices/pricedown.ttf", 32) -- Création de la police personnalisée guiSetFont(barre_titre_texte, pricedown_32px) -- Texte d'information local information_texte = guiCreateLabel(0.0385, 0.2, 1-0.385, 0.0482, "Entrez vos identifiants :", true, panel) guiLabelSetHorizontalAlign(information_texte, "left") guiLabelSetVerticalAlign(information_texte, "center") local verdana_16px = guiCreateFont("polices/verdana.ttf", 16) -- Création de la police personnalisée guiSetFont(information_texte, verdana_16px) -- Nom d'utilisateur local icon_utilisateur = guiCreateStaticImage(0.077, 0.313, 0.088, 0.111, "images/nom_utilisateur.png", true, panel) utilisateur_texte = guiCreateEdit(0.231, 0.325, 0.64, 0.1012, "Nom d'utilisateur", true, panel) -- Mot de passe local icon_mot_de_passe = guiCreateStaticImage(0.077, 0.525, 0.088, 0.111, "images/mot_de_passe.png", true, panel) mot_de_passe_texte = guiCreateEdit(0.231, 0.5301, 0.64, 0.1012, "1234", true, panel) -- Connexion bouton_connexion = guiCreateStaticImage(0.477, 0.783, 0.3846, 0.12, "images/connexion_fond.png", true, panel) bouton_texte = guiCreateLabel(0, 0, 1, 1, "Connexion", true, bouton_connexion) guiLabelSetHorizontalAlign(bouton_texte, "center") guiLabelSetVerticalAlign(bouton_texte, "center") local verdana_14px = guiCreateFont("polices/verdana.ttf", 14) -- Création de la police personnalisée guiSetFont(bouton_texte, verdana_14px) -- Icône en bas à gauche local icon_bas_gauche = guiCreateStaticImage(0.029, 0.723, 0.1731, 0.217, "images/icon_bas_gauche.png", true, panel) end J'ai volontairement utilisé plusieurs tailles de polices mais vous pouvez très bien utiliser celles de MTA de base, de même, j'ai mis quelques variables en global et d'autres en local parce que je pense les utiliser dans d'autres fonctions par la suite. Oh, aussi, n'oubliez pas d'utiliser guiEditSetMasked pour rendre les champs de mot de passe masqué, avec de petites étoiles. Pour finir proprement, ajoutons un événement lorsque nous cliquons sur le bouton "Connexion" ! Il nous suffit d'utiliser l'événement "onClientGUIClick" qui sera relié à une nouvelle fonction qu'on va appeler "seConnecter", du coup, on ajoute l'événement après avoir créé notre bouton de connexion comme ça: addEventHandler("onClientGUIClick", bouton_connexion, seConnecter) Puis on fait une petite fonction "seConnecter" qui affiche un message dans le chat. function seConnecter() outputChatBox("Connexion en cours...") end Vous pouvez essayer en jeu. Voila nous avons notre panel entièrement en GUI ! Nous avons réalisé une interface de A à Z et avons même débordé un peu en proposant d'interagir avec notre magnifique bouton de connexion ! En bref, si avoir le panel peut vous aider (ou si vous avez simplement la flemme de le refaire) je vous le met à disposition ici: Télécharger via Mega.NZ Si ça vous plaît, faites-le moi savoir et je continuerai sur le chapitre avec les DX et pour finir en CEF, on verra même quelques fonctions bonus pour changer la couleur d'un élément quand on passe dessus ou encore la transparence de celui-ci. C'est mon premier tutoriel, dites-moi ce que je dois changer! J'espère que je me suis fais comprendre et je reste à votre disposition en dessous! Merci d'avoir lu! Wumbaloo.

Pour débuter mais pour optimiser c'est bien de connaître ces notions je trouve

Pas de soucis, il y a un début à tout ! Ici, la console te dit que l'argument 1 entré pour ta fonction "getAccount" est un booléen (soit 'true' soit 'false) alors qu'il nécessite un string (chaîne de caractères) il faudrait donc remonter à la ligne où ta fonction "tryToLoginPlayer" ou l'event "onClientSendLoginDataToServer" est appelée. Je te propose de faire un CTRL + F (pour rechercher dans un fichier) dans ton fichier pour essayer de trouver où cette fonction est appelée afin qu'on comprenne pourquoi le premier argument qu'elle reçoit est un booléen et non un string.

Salutations, Une variable ne peut pas avoir d'espace, généralement, on les remplace par le caractère "tiré du bas" qui est celui-ci: _ Ici, tu as traduis "password" par "Mot de passe" mais comme j'ai dis plus haut, il ne peut pas y avoir d'espace, je te propose de le renommer en "Mot_de_passe" et ça fonctionnera. Voilà, fait moi savoir s'il y a encore des soucis après ça!

Content de t'avoir aidé, n'hésite pas si tu as des question!

Salut, Tu trouveras les fichiers d'éditeur de map à mettre sur ton serveur dans le dossier "[editor]" qui se trouve via ce chemin d'accès: \MTA\server\mods\deathmatch\resources Tiens pour me faire comprendre j'ai fais un screen : Bonne journée!

Problem Solved, he was using TriggerEvent instead of TriggerClientEvent.

Je sais reproduire exactement ce qu'il y a sur la vidéo après quelques recherches Sujet clos du coup

Oh excuse je n'avais pas vu le "Je viens de testé" ><

Des nouvelles?

Tu as écris: <object name="resource.dayz"></object> Au lieu de: <object name="resource.DayZ"></object> Les majuscules sont importantes. Assure-toi que tu fais ces changements serveur éteint. J'ai testé en local, effectivement c'est bien les majuscules qui posaient problème.

Il y a donc un problème dans ton ACL.xml, poste le à la suite de mon message pour voir ce qu'il cloche.

Dans la console tu as bien un message disant "[DayZ] CONNECTED TO VEHICLE DATABASE." et "[DayZ] VEHICLES HAVE BEEN LOADED." au démarrage du serveur ? Je n'ai jamais travaillé avec le gamemode DayZ alors j'essaye de t'aider comme je peux, si quelqu'un qui s'y connait mieux avec ce gamemode passe ici, j'espère qu'il te répondra, en attendant je ne vais pas te laisser dans la merde

Si tu as déjà réglé l'ACL avec ton nom pour que tu sois admin, ouvre la console avec F8 puis écrit "debugscript 3", un texte devrait apparaître en bas, regarde si une erreur survient lors de la création des véhicules.