[2D] DisplayProgressBar()

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

[2D] DisplayProgressBar()

Message par falsam »

Suite à une demande de Bernie sur FreeChat.

Comment afficher une barre de vie dans un environnement 2D.

Cela revient à afficher un ProgressBar dans un sprite pour lequel on va indiquer la position x & y d'affichage, une valeur à afficher et une valeur maximum.

■ Syntaxe : DisplayProgressBar(Sprite, x, y, Value, Maximum)

■ Exemple avec ce code qui affiche une barre de vie qui décroit de 250 à 0

Code : Tout sélectionner

Declare DisplayProgressBar(Sprite, x, y, Value, Maximum)

;Initialisation
If InitSprite()
  InitKeyboard()
  InitMouse()
EndIf

;Creation du screen
OpenWindow(0, 0, 0, 800, 600, "Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(0), 0, 0, 800, 600)

;Création du sprite représentant la barre de vie et initialisation des variables 
LifeMaxi = 250
Life.i = LifeMaxi
LifeBar = CreateSprite(#PB_Any, 200, 24)

Repeat 
  Repeat 
    Event = WindowEvent()
    
    Select Event    
      Case #PB_Event_CloseWindow
        End
    EndSelect  
  Until Event=0
  
  ClearScreen(RGB(135, 206, 235))  
  
  ;Décompte du compteur de vie
  If Life > 0
    Life-1
  EndIf
  
  ;Affichage de la barre de vie
  DisplayProgressBar(LifeBar, 20, 20, Life, LifeMaxi)
    
  ExamineKeyboard()
  FlipBuffers()
Until KeyboardPushed(#PB_Key_Escape)

Procedure DisplayProgressBar(Sprite, x, y, Value, Maximum)
  Protected Width.i = SpriteWidth(Sprite)
  Protected Height.i = SpriteHeight(Sprite)
  
  Protected Coef.f = Width/Maximum
  Protected Index.i = Value * Coef
  
  Protected Text.s, TextWidth.i, TextHeight.i
  
  StartDrawing(SpriteOutput(Sprite))
  DrawingMode(#PB_2DDrawing_Transparent)
  
  ;Dessin du fond
  Box(0, 0, Width, Height, RGB(128, 128, 128))
  
  ;Dessin de l'index 
  Box(0, 0, Index, Height, RGB(154, 205, 50))
  
  ;Dessin du pourcentage
  Text = Str(100 * Index / Maximum / Coef) + "%"
  TextWidth = TextWidth(Text)
  TextHeight= TextHeight(Text)
  DrawText((Width - TextWidth)/2, (Height - TextHeight)/2, Text, RGB(255, 255, 255)) 
  
  ;Dessin du contour
  DrawingMode(#PB_2DDrawing_Outlined)
  Box(0, 0, Width, Height, RGB(0, 0, 0))

  StopDrawing()
  
  ;Affichage du sprite
  DisplaySprite(Sprite, x, y)
EndProcedure
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
Micoute
Messages : 2584
Inscription : dim. 02/oct./2011 16:17
Localisation : 35520 La Mézière

Re: [2D] DisplayProgressBar()

Message par Micoute »

Bonjour falsam, c'est comme le mini-mir (pour ne pas citer de marque), il est petit, mais il fait le maximum. J'adore !
Dernière modification par Micoute le mer. 04/mai/2016 9:51, modifié 1 fois.
Microsoft Windows 10 Famille 64 bits : Carte mère : ASRock 970 Extreme3 R2.0 : Carte Graphique NVIDIA GeForce RTX 3080 : Processeur AMD FX 6300 6 cœurs 12 threads 3,50 GHz PB 6.20 LTS (x64)
Un homme doit être poli, mais il doit aussi être libre !
Bernie
Messages : 282
Inscription : mar. 22/mars/2016 10:12
Localisation : En France

Re: [2D] DisplayProgressBar()

Message par Bernie »

merci falsam pour ton code

et dans le cadre d'un jeux comment tu fait pour faire diminuer la barre à chaque fois que l'ennemi est touché par exemple ?
Avatar de l’utilisateur
Ar-S
Messages : 9540
Inscription : dim. 09/oct./2005 16:51
Contact :

Re: [2D] DisplayProgressBar()

Message par Ar-S »

Bernie : Question
- Dans son code, qu'est-ce qui détermine la taille de la barre verte ?

Si tu ne trouves pas ça par toi même c'est que tu ne comprends pas le code, donc ça ne sert à rien de te filer la réponse
Il est important que tu piges ça pour tes propres codes. (sans compter qu'il a tout écrit en commentaire !)
Relis le et essaye de trouver.
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Avatar de l’utilisateur
microdevweb
Messages : 1802
Inscription : mer. 29/juin/2011 14:11
Localisation : Belgique

Re: [2D] DisplayProgressBar()

Message par microdevweb »

@Bernie,

Ne le prend pas mal mais si tu veux apprendre, essaie de comprendre le code. tous est dans la variable Life (vie en français). Il te suffis donc de changer cette variable dans ton moteur de jeu.

Ne ne te conseille également de revoir les base du développement, j'ai fais une suite vidéos pour ça

:arrow: ICI

Je t'ai fais un exemple (avec le code de Falsam) si tu appuie sur la flèche droite tu retire une vie

Code : Tout sélectionner

Declare DisplayProgressBar(Sprite, x, y, Value, Maximum)

;Initialisation
If InitSprite()
  InitKeyboard()
  InitMouse()
EndIf

;Creation du screen
OpenWindow(0, 0, 0, 800, 600, "Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(0), 0, 0, 800, 600)

;Création du sprite représentant la barre de vie et initialisation des variables 
LifeMaxi = 250
Life.i = LifeMaxi
LifeBar = CreateSprite(#PB_Any, 200, 24)
RightArrowPushed.b=#False
Repeat 
  Repeat 
    Event = WindowEvent()
    
    Select Event    
      Case #PB_Event_CloseWindow
        End
    EndSelect  
  Until Event=0
  
  ClearScreen(RGB(135, 206, 235))  
  
  ;Décompte du compteur de vie
  ; La je retire le décompte automatique
;   If Life > 0
;     Life-1
;   EndIf
  
  ;Affichage de la barre de vie
  DisplayProgressBar(LifeBar, 20, 20, Life, LifeMaxi)
    
  ExamineKeyboard()
  ; Exemple avec la flêche droite du clavier je retire des vies
  ; Attention RightArrowPushed evite lé répétition de l'évenement
  If KeyboardPushed(#PB_Key_Right) And Not RightArrowPushed
      RightArrowPushed=#True
      If Life>0
          Life-1
      EndIf
  EndIf
  If KeyboardReleased(#PB_Key_Right)
      RightArrowPushed=#False
  EndIf
  FlipBuffers()
Until KeyboardPushed(#PB_Key_Escape)

Procedure DisplayProgressBar(Sprite, x, y, Value, Maximum)
  Protected Width.i = SpriteWidth(Sprite)
  Protected Height.i = SpriteHeight(Sprite)
  
  Protected Coef.f = Width/Maximum
  Protected Index.i = Value * Coef
  
  Protected Text.s, TextWidth.i, TextHeight.i
  
  StartDrawing(SpriteOutput(Sprite))
  DrawingMode(#PB_2DDrawing_Transparent)
  
  ;Dessin du fond
  Box(0, 0, Width, Height, RGB(128, 128, 128))
  
  ;Dessin de l'index 
  Box(0, 0, Index, Height, RGB(154, 205, 50))
  
  ;Dessin du pourcentage
  Text = Str(100 * Index / Maximum / Coef) + "%"
  TextWidth = TextWidth(Text)
  TextHeight= TextHeight(Text)
  DrawText((Width - TextWidth)/2, (Height - TextHeight)/2, Text, RGB(255, 255, 255)) 
  
  ;Dessin du contour
  DrawingMode(#PB_2DDrawing_Outlined)
  Box(0, 0, Width, Height, RGB(0, 0, 0))

  StopDrawing()
  
  ;Affichage du sprite
  DisplaySprite(Sprite, x, y)
EndProcedure
Dernière modification par microdevweb le mer. 04/mai/2016 11:52, modifié 1 fois.
Windows 10 64 bits PB: 5.70 ; 5.72 LST
Work at Centre Spatial de Liège
Avatar de l’utilisateur
Ar-S
Messages : 9540
Inscription : dim. 09/oct./2005 16:51
Contact :

Re: [2D] DisplayProgressBar()

Message par Ar-S »

@microdevweb tu es trop gentil, pour qu'il comprenne tu aurais du le laisser cogiter un peu comme je lui ai suggéré, on lui aurait donné la réponse en cas d’échec.
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Shadow
Messages : 1413
Inscription : mer. 04/nov./2015 17:39

Re: [2D] DisplayProgressBar()

Message par Shadow »

C'est pas mal mais faudrait aussi pouvoir choisir la taille, couleur, etc :)
Mais oui je comprends, simple car sinon il comprendra pas.
Processeur: Intel Core I7-4790 - 4 Cœurs - 8 Thread: 3.60 Ghz.
Ram: 32 GB.
Disque: C: SDD 250 GB, D: 3 TB.
Vidéo: NVIDIA GeForce GTX 960: 2 GB DDR5.
Écran: Asus VX248 24 Pouces: 1920 x 1080.
Système: Windows 7 64 Bits.

PureBasic: 5.60 x64 Bits.
Bernie
Messages : 282
Inscription : mar. 22/mars/2016 10:12
Localisation : En France

Re: [2D] DisplayProgressBar()

Message par Bernie »

merci @microdevweb mais avant que tu poste ton code j'avais compris comment faire c'est comme pour un score .
Avatar de l’utilisateur
Ar-S
Messages : 9540
Inscription : dim. 09/oct./2005 16:51
Contact :

Re: [2D] DisplayProgressBar()

Message par Ar-S »

Oui ! Et c'est toujours la même façon de procéder ;)
- Tu as une valeur, score, vie, durée, point, resistance, point de magie bref, c'est pareil !
- Tu incrémentes ou décrémentes cette valeur lors d'une action.
- Tu affiches cette valeur dans ton screen via displaysprite.

@shadow : MP
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Bernie
Messages : 282
Inscription : mar. 22/mars/2016 10:12
Localisation : En France

Re: [2D] DisplayProgressBar()

Message par Bernie »

Ar-S a écrit :Oui ! Et c'est toujours la même façon de procéder ;)
- Tu as une valeur, score, vie, durée, point, resistance, point de magie bref, c'est pareil !
- Tu incrémentes ou décrémentes cette valeur lors d'une action.
- Tu affiches cette valeur dans ton screen via displaysprite.

@shadow : MP

Rassure toi Ar-S j'ai bien appris avec falsam mon jeu est presque fini je travaille sur le niveau du boss ...
Marc56
Messages : 2198
Inscription : sam. 08/févr./2014 15:19

Re: [2D] DisplayProgressBar()

Message par Marc56 »

Hello,

Est-ce un effet dû à directx, mais chaque fois que je lance un de ces codes, la couleur blanche apparait rose/violette.

Pourtant dans l'exemple de ce topic, le texte (xx%) devait être blanc ? RGB(255, 255, 255)

Code : Tout sélectionner

DrawText((Width - TextWidth)/2, (Height - TextHeight)/2, Text, RGB(255, 255, 255))
Le reste (curseur) est bien blanc.
Les codes exemples de PB ne font pas ce problème
Je ne trouve pas d'où ça vient

:?: :|

(Windows 10 x64 - PB x64)
Dernière modification par Marc56 le mer. 04/mai/2016 14:37, modifié 1 fois.
Avatar de l’utilisateur
TazNormand
Messages : 1297
Inscription : ven. 27/oct./2006 12:19
Localisation : Calvados (14)

Re: [2D] DisplayProgressBar()

Message par TazNormand »

@Marc56 : pas de soucis de mon côté, le %tage est blanc de chez blanc, lavé avec OMO je présume :lol:

Je suis sous W7 x64, AMD HD7850, et PB 5.42
Image
Image
Bernie
Messages : 282
Inscription : mar. 22/mars/2016 10:12
Localisation : En France

Re: [2D] DisplayProgressBar()

Message par Bernie »

Marc56 a écrit :Hello,

Est-ce un effet dû à directx, mais chaque fois que je lance un de ces codes, la couleur blanche apparait rose/violette.

Pourtant dans l'exemple de ce topic, le texte (xx%) devait être blanc ? RGB(255, 255, 255)

Code : Tout sélectionner

DrawText((Width - TextWidth)/2, (Height - TextHeight)/2, Text, RGB(255, 255, 255))
(le reste (curseur) est bien blanc)

:?: :|

(Windows 10 x64 - PB x64)
OUi : 255, 255 ,255 c'est la couleur blanche
tu as peux etre un un probleme de reglage des couleurs de ta carte graphique
Marc56
Messages : 2198
Inscription : sam. 08/févr./2014 15:19

Re: [2D] DisplayProgressBar()

Message par Marc56 »

Je viens de tester quelque exemples de la doc, et j'ai bien du blanc, mais toujours du rose/violet pour certains exemples du forum :| donc celui-ci
(Ce n'est pas traumatisant car je ne fais pas encore d'applications utilisant des sprites, mais c'est curieux)

NVIDIA GeForce GT 620
Windows 10 dit que les pilotes sont à jour.
Avatar de l’utilisateur
Ar-S
Messages : 9540
Inscription : dim. 09/oct./2005 16:51
Contact :

Re: [2D] DisplayProgressBar()

Message par Ar-S »

@Marc56 : En effet c'est étonnant !
Essaye peut-être de réinstaller directX si tes pilotes graphiques sont à jour.
(truc tout con mais vérifie que ton cable ecran/carte graph est bien enfoncé)
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Répondre