PureBasic

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

Bonjour falsam, c'est comme le mini-mir (pour ne pas citer de marque), il est petit, mais il fait le maximum. J'adore !

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 ?

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.

@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

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

@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.

C'est pas mal mais faudrait aussi pouvoir choisir la taille, couleur, etc

Mais oui je comprends, simple car sinon il comprendra pas.

merci @microdevweb mais avant que tu poste ton code j'avais compris comment faire c'est comme pour un score .

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

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 ...

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)

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

Je suis sous W7 x64, AMD HD7850, et PB 5.42

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

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.

@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é)

PureBasic

[2D] DisplayProgressBar()

[2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()

Re: [2D] DisplayProgressBar()