Vérifié Créer un HUD | #3

REKASH

Master 🏆
Level 5
VeryFriend's

Torrents Stats

Messages
515
J'aime
1 862
Trophées
820
Inscrit
15 Mai 2018
Bonjours,

Dans cette partie 3 nous allons refaire le design de notre HUD et ajouter la barre de faim :)
Rien exceptionnel vu comme sa mais vous comprendrez facilement si vous avez bien suivi les premiers tutoriel.

Alors c'est partis, pour commencer nous allons, ajouter la nourriture et ensuite nous allons parler du design.

Pour ajouter la nourriture, il faudra utiliser le code suivant:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Nous utilisons le même modèle que toutes nos autres lignes de codes.
"Energy" correspond à la nourriture.
Si vous sauvegardez, et que vous avez activé la nourriture, vous remarquerez que la barre de faim de base est toujours présente.
Pour ce faire nous allons l'enlever grâce au code suivant qui est indispansable:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
La partie DarkRP est importante, mais le plus important c'est ce code (vous n'avez pas besoin de le copier une deuxième fois, c'est juste pour vous montrez du quel je parle):

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Désormais la barre de faim de base à disparu :)

C'est partie, attaquons le design !

Sous
hook.Add( "HUDPaint", "VeryleakHUD", function()
Vous allez créer une box ou plus simplement un fond.

Nous allons utiliser draw.RoundedBox:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
❓ Et si je veux changer la couleur du fond ? Utilisez le site suivant HTML COLOR.

❓ Mais dans ton code ci dessus pourquoi il y à 180 à la fin ? 180 c'est tous simplement l'opacité.

Bien sur je vous rendu la tâche plus facile en vous mettant directement les dimensions qui plaise à mon goût, alors si vous voulez les modifier, faites comme vous le sentez :)

Ensuite, nous allons modifier notre code, commençons pas modifier la barre de vie, nous irons dans l'ordre:

Code:
local health = LocalPlayer():Health()
draw.RoundedBox(5, 20, ScrH() - 35, 204, 17, Color (0,0,0,230))
draw.RoundedBox(5, 22, ScrH() - 34, health * 2, 14, Color (255,0,0,255))
draw.SimpleText (health, "VeryleakFont", 130, ScrH() - 35, Color (255,255,255))
draw.SimpleText ("Santé:", "VeryleakFont", 90, ScrH() - 35, Color (255,255,255))

Vous remarquerez que c'est le même sauf que nous avons adapté, la barre de vie, à notre rectangle de fond.
Pour que vous comprenez, nous allons comparer les deux codes (l'ancien et le nouveau).

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
On remarque le présence d'une nouvelle ligne de texte
draw.SimpleText ("Santé:", "VeryleakFont", 90, ScrH() - 35, Color (255,255,255))
Cette ligne permet d'ajouté, le mot "Santé", de plus il est correctement positionné.

Sa nous donne donc cela:


Maintenant occupons nous du reste du code, du kevlar, de la faim, du métier, de l'argent, du salaire et du Nom RP,

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Il est identique au code de la barre de santé, voici un exemple en image:


Traitons désormais le barre de faim:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Il est identique au code de la barre de santé et du kevlar, voici un exemple en image:


Maintenant occupons nous du métier:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Exemple ci-dessous:


Le HUD commence à avoir la classe, ajoutons donc l'argent, que nous avons sur nous:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Exemple ci-dessous:


Ajoutons, le salaire, que nous mettrons en face du métier:

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Exemple ci-dessous:


Pour terminer, ajoutons notre nom rôle-play, nous aurons juste besoin de le déplacer, je vais vous mettre les deux codes pour que vous comparez, et que je vous explique :)


Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.

Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
❓ Pourquoi dans ScrH() il y "- 145, 100, 17", mais à quoi sa correspond, alors "-145" c'est la hauteur de positionnement de la barre, "100" c'est la longueur de la barre et "17" c'est taille du rectangle.

Voici donc le résultat:


Je vous remercie d'avoir suivi le tutoriel sur la création d'un HUD, le prochain tutoriel, concernera le scoreboard.

Cordialement
REKASH
 

Joey LTL

Membre 🏅
Level 1

Torrents Stats

Messages
8
J'aime
1
Trophées
5
Inscrit
2 Avril 2018
Salut tu peut meut le envoyer je peut pas le faire
 

Ange Gardien

l'Accru 🥇
Level 1

Torrents Stats

Messages
50
J'aime
5
Trophées
130
Inscrit
11 Août 2017
Bonjours,

Dans cette partie 3 nous allons refaire le design de notre HUD et ajouter la barre de faim :)
Rien exceptionnel vu comme sa mais vous comprendrez facilement si vous avez bien suivi les premiers tutoriel.

Alors c'est partis, pour commencer nous allons, ajouter la nourriture et ensuite nous allons parler du design.

Pour ajouter la nourriture, il faudra utiliser le code suivant:

[Hidden Content]

Nous utilisons le même modèle que toutes nos autres lignes de codes.
"Energy" correspond à la nourriture.
Si vous sauvegardez, et que vous avez activé la nourriture, vous remarquerez que la barre de faim de base est toujours présente.
Pour ce faire nous allons l'enlever grâce au code suivant qui est indispansable:

[Hidden Content]

La partie DarkRP est importante, mais le plus important c'est ce code (vous n'avez pas besoin de le copier une deuxième fois, c'est juste pour vous montrez du quel je parle):

[Hidden Content]

Désormais la barre de faim de base à disparu :)

C'est partie, attaquons le design !

Sous
Vous allez créer une box ou plus simplement un fond.

Nous allons utiliser draw.RoundedBox:

[Hidden Content]





Bien sur je vous rendu la tâche plus facile en vous mettant directement les dimensions qui plaise à mon goût, alors si vous voulez les modifier, faites comme vous le sentez :)

Ensuite, nous allons modifier notre code, commençons pas modifier la barre de vie, nous irons dans l'ordre:

Code:
local health = LocalPlayer():Health()
draw.RoundedBox(5, 20, ScrH() - 35, 204, 17, Color (0,0,0,230))
draw.RoundedBox(5, 22, ScrH() - 34, health * 2, 14, Color (255,0,0,255))
draw.SimpleText (health, "VeryleakFont", 130, ScrH() - 35, Color (255,255,255))
draw.SimpleText ("Santé:", "VeryleakFont", 90, ScrH() - 35, Color (255,255,255))

Vous remarquerez que c'est le même sauf que nous avons adapté, la barre de vie, à notre rectangle de fond.
Pour que vous comprenez, nous allons comparer les deux codes (l'ancien et le nouveau).

[Hidden Content]

[Hidden Content]

On remarque le présence d'une nouvelle ligne de texte Cette ligne permet d'ajouté, le mot "Santé", de plus il est correctement positionné.

Sa nous donne donc cela:



Maintenant occupons nous du reste du code, du kevlar, de la faim, du métier, de l'argent, du salaire et du Nom RP,

[Hidden Content]

Il est identique au code de la barre de santé, voici un exemple en image:



Traitons désormais le barre de faim:

[Hidden Content]

Il est identique au code de la barre de santé et du kevlar, voici un exemple en image:



Maintenant occupons nous du métier:

[Hidden Content]

Exemple ci-dessous:



Le HUD commence à avoir la classe, ajoutons donc l'argent, que nous avons sur nous:

[Hidden Content]

Exemple ci-dessous:



Ajoutons, le salaire, que nous mettrons en face du métier:

[Hidden Content]

Exemple ci-dessous:



Pour terminer, ajoutons notre nom rôle-play, nous aurons juste besoin de le déplacer, je vais vous mettre les deux codes pour que vous comparez, et que je vous explique :)


[Hidden Content]


[Hidden Content]



Voici donc le résultat:



Je vous remercie d'avoir suivi le tutoriel sur la création d'un HUD, le prochain tutoriel, concernera le scoreboard.

Cordialement
REKASH

Tu pourai faire un Autre tuto Pour maitre des image A cote dans le HUD
Exe = la vie maitre une image coeur
 

Yoda_Master

Membre 🏅
Level 1

Torrents Stats

Messages
44
J'aime
0
Trophées
43
Inscrit
10 Mars 2016

FizeVL

l'Affirmé 🥈
Level 2

Torrents Stats

Messages
45
J'aime
192
Trophées
88
Inscrit
13 Janvier 2019
Bonjours,

Dans cette partie 3 nous allons refaire le design de notre HUD et ajouter la barre de faim :)
Rien exceptionnel vu comme sa mais vous comprendrez facilement si vous avez bien suivi les premiers tutoriel.

Alors c'est partis, pour commencer nous allons, ajouter la nourriture et ensuite nous allons parler du design.

Pour ajouter la nourriture, il faudra utiliser le code suivant:

[Hidden Content]

Nous utilisons le même modèle que toutes nos autres lignes de codes.
"Energy" correspond à la nourriture.
Si vous sauvegardez, et que vous avez activé la nourriture, vous remarquerez que la barre de faim de base est toujours présente.
Pour ce faire nous allons l'enlever grâce au code suivant qui est indispansable:

[Hidden Content]

La partie DarkRP est importante, mais le plus important c'est ce code (vous n'avez pas besoin de le copier une deuxième fois, c'est juste pour vous montrez du quel je parle):

[Hidden Content]

Désormais la barre de faim de base à disparu :)

C'est partie, attaquons le design !

Sous
Vous allez créer une box ou plus simplement un fond.

Nous allons utiliser draw.RoundedBox:

[Hidden Content]





Bien sur je vous rendu la tâche plus facile en vous mettant directement les dimensions qui plaise à mon goût, alors si vous voulez les modifier, faites comme vous le sentez :)

Ensuite, nous allons modifier notre code, commençons pas modifier la barre de vie, nous irons dans l'ordre:

Code:
local health = LocalPlayer():Health()
draw.RoundedBox(5, 20, ScrH() - 35, 204, 17, Color (0,0,0,230))
draw.RoundedBox(5, 22, ScrH() - 34, health * 2, 14, Color (255,0,0,255))
draw.SimpleText (health, "VeryleakFont", 130, ScrH() - 35, Color (255,255,255))
draw.SimpleText ("Santé:", "VeryleakFont", 90, ScrH() - 35, Color (255,255,255))

Vous remarquerez que c'est le même sauf que nous avons adapté, la barre de vie, à notre rectangle de fond.
Pour que vous comprenez, nous allons comparer les deux codes (l'ancien et le nouveau).

[Hidden Content]

[Hidden Content]

On remarque le présence d'une nouvelle ligne de texte Cette ligne permet d'ajouté, le mot "Santé", de plus il est correctement positionné.

Sa nous donne donc cela:



Maintenant occupons nous du reste du code, du kevlar, de la faim, du métier, de l'argent, du salaire et du Nom RP,

[Hidden Content]

Il est identique au code de la barre de santé, voici un exemple en image:



Traitons désormais le barre de faim:

[Hidden Content]

Il est identique au code de la barre de santé et du kevlar, voici un exemple en image:



Maintenant occupons nous du métier:

[Hidden Content]

Exemple ci-dessous:



Le HUD commence à avoir la classe, ajoutons donc l'argent, que nous avons sur nous:

[Hidden Content]

Exemple ci-dessous:



Ajoutons, le salaire, que nous mettrons en face du métier:

[Hidden Content]

Exemple ci-dessous:



Pour terminer, ajoutons notre nom rôle-play, nous aurons juste besoin de le déplacer, je vais vous mettre les deux codes pour que vous comparez, et que je vous explique :)


[Hidden Content]


[Hidden Content]



Voici donc le résultat:



Je vous remercie d'avoir suivi le tutoriel sur la création d'un HUD, le prochain tutoriel, concernera le scoreboard.

Cordialement
REKASH
Merci
 

XNegnon#3601

l'Actif 🥉
Level 1

Torrents Stats

Messages
12
J'aime
0
Trophées
59
Inscrit
8 Juillet 2020
Haut Bas