Every Type of Progress Bar available in Godot | Dicode

Поделиться
HTML-код
  • Опубликовано: 2 авг 2024
  • No matter what game you are creating you will need to make a progress bar. Progress bar are not just limited to health bars but can be use in many others ways like in showing data or to make a visual timer bar.
    Not only some basic progress bar but you can also make some custom progress bar in Godot by combining two different progress bar in one
    Time stamp:
    (0:00) : overview
    (0:37) : basics of progress bar
    (1:39): Horizontal progress bar
    (2:25): vertical progress bar
    (3:00): circular progress bar
    (4:10): custom style progress bar
    If you have questions like:
    How to make progress bar in Godot?
    How to make health bar in Godot ?
    What type of progress bar are available in Godot ?
    How to make custom progress bar in Godot ?
    all these question is answered in this video
    If you found it helpful
    like and subscribe !

Комментарии • 69

  • @hubububu9417
    @hubububu9417 20 дней назад +1

    straight to the point. thank you

  • @stephanrobertgames
    @stephanrobertgames 11 часов назад

    Awesome tut thank u, will take this directly in my kh fan game

  • @N0stalgicLeaf
    @N0stalgicLeaf 2 года назад +32

    This technique for combining progress bars is so simple and effective I can't believe I didn't think of it. Great stuff.

    • @dicode1q
      @dicode1q  2 года назад +5

      Happy to help!

    • @WarrenMarshallBiz
      @WarrenMarshallBiz 2 года назад +3

      Right? That was a major lightbulb moment for me, haha...

  • @cyzaine
    @cyzaine Год назад +8

    Wow... the combined bar solution is amazing in its simplicity, but crazy in the power it gives. REAL good work showcasing that!

  • @lautarofranchi480
    @lautarofranchi480 22 дня назад +1

    great tutorial! I dont need it right now, but I will save it for later!

  • @Tacnoblode
    @Tacnoblode Год назад +3

    i thought id have to do some actual coding and trickery to make that circular health bar, thanks for this tutorial!

  • @YourFavoriteEnemy
    @YourFavoriteEnemy Год назад +2

    This should be a thinking-out-of-the-box guide for every indie game dev.

  • @powersave2
    @powersave2 3 года назад +5

    Excellent mini tutorial! I look forward to checking out more from you!

    • @dicode1q
      @dicode1q  3 года назад +1

      Thanks , new video is comming soon

  • @joshmauldin2579
    @joshmauldin2579 2 года назад +1

    fantastic guide - I've really enjoyed your videos, keep it up!

  • @accumulator4825
    @accumulator4825 Год назад +1

    Awesome tutorial, thank you! Never thought of combining them...

  • @realMenta
    @realMenta 2 года назад

    Thank you for the quick yet useful tutorial!

  • @ianmckenzie6715
    @ianmckenzie6715 26 дней назад +1

    fixed everything thank you

  • @naytron210
    @naytron210 Год назад +1

    So cool how simple this technique is! Excellent tutorial, thanks! Thorough and concise. Sub earned 👍

  • @8bit-sized15
    @8bit-sized15 2 года назад +3

    I already knew most of this, but it is a good reminder + custom progress is great! I will try it!

  • @niccpolitic6129
    @niccpolitic6129 2 года назад

    Great tutorial! Thanks a lot, I didnt realize you could combine two progress bar types like that.

  • @SaiponathGames
    @SaiponathGames 3 года назад +1

    Great work man! You certainly need more subscribers!

  • @redcubegamedev3860
    @redcubegamedev3860 3 года назад +5

    Great work! didn't know it was so easy thanks, you've just earned yourself a sub!

    • @dicode1q
      @dicode1q  3 года назад +3

      Thanks, nice to hear that it helps...

  • @elproctologo24
    @elproctologo24 2 года назад +3

    I have to watch Godot videos in English, because in Spanish Godot is not too popular, and this channel is too good

  • @felipefacundes1
    @felipefacundes1 10 месяцев назад

    Thank you very much for the excellent class!!!

  • @atomicwoodpecker0123
    @atomicwoodpecker0123 2 года назад +3

    That's actually a pretty neat and creative solution

  • @adamrees3740
    @adamrees3740 2 месяца назад +1

    Excellent Tutorial. Thank You

  • @chicapercebe
    @chicapercebe 2 года назад +1

    very informative video thank you :)

  • @dirkkruger1934
    @dirkkruger1934 2 года назад

    Yooooo this is amazing. Thank you.

  • @Chrisknyfe
    @Chrisknyfe 3 года назад +4

    awesome :) looks like the Kingdom Hearts health bar

    • @dicode1q
      @dicode1q  3 года назад +2

      Yup, it's very similar to that

  • @boerbol9422
    @boerbol9422 2 года назад

    ok that's very creative and impressive!

  • @animelafuerza
    @animelafuerza 2 года назад

    Excelent video, thank you

  • @NudGameDev
    @NudGameDev Год назад

    that's a lot of useful infos!

  • @Crisisdarkness
    @Crisisdarkness 3 года назад +3

    Estimated friend, you have a lot of potential, nobody had made a video like yours that will show all the options, you explained well, your videos are well prepared, congratulations, that is why I definitely subscribe. So I could make a pentagonal progress bar?

    • @dicode1q
      @dicode1q  3 года назад +2

      Thanks 😊, I am glad you find it helpful.
      And yes you can make pentagonal progress bar by aligning several horizontal bars or whatever works for you.

  • @LORDSofCHAOS333
    @LORDSofCHAOS333 Год назад +1

    really cool and helpful

  • @RyanScottForReal
    @RyanScottForReal 3 года назад

    Great quality video!

  • @dmchalyi
    @dmchalyi Год назад +1

    Thanks a lot!

  • @KelvinCipta
    @KelvinCipta 2 года назад +1

    Nice idea

  • @drac8854
    @drac8854 3 года назад

    Great work man

  • @allissell2552
    @allissell2552 8 месяцев назад

    You are not gonna believe but youtube sent notification of this video today, yes

    • @dicode1q
      @dicode1q  8 месяцев назад

      😂

    • @allissell2552
      @allissell2552 8 месяцев назад

      @@dicode1q another one today, bro you hacked youtube algorithm

  • @GENVR
    @GENVR 2 года назад +1

    Awsome!=)

  • @owenlloyd2528
    @owenlloyd2528 Год назад

    Thank you

  • @redearth3234
    @redearth3234 Год назад +1

    Good info

  • @dalvinjosias2963
    @dalvinjosias2963 10 месяцев назад +1

    wow Godot is insanely good

  • @samuelchristian2688
    @samuelchristian2688 3 года назад

    Wow cool tysm

  • @DRND12
    @DRND12 Год назад

    thank you🙃

    • @dicode1q
      @dicode1q  Год назад

      Welcome 🙃

    • @kingandroid5088
      @kingandroid5088 Год назад

      drnd ايش تسوي هنا 😂😂

    • @DRND12
      @DRND12 Год назад

      @@kingandroid5088 ليش تبحث في تعليقات الاجانب 🙂

  • @agriasoaks6721
    @agriasoaks6721 2 года назад

    You see, I tried to make circular progress bar I set the minimum size and tic the expand nine patch rec but when I load the texture the size does not follow the property I set before. Does anyone have solution for this?

  • @gokceyldz3626
    @gokceyldz3626 2 года назад

    Can I make a progress bar like where the value is just a little image that travels to the end of progress bar in Godot?

  • @ghb323
    @ghb323 Год назад

    What about slanted fill edge? Something like kirby star allies's boss HP meter?

    • @dicode1q
      @dicode1q  Год назад

      You have to use images in that case, you have to create background image, overlay image(foreground image) and one image for the progress.

    • @ghb323
      @ghb323 Год назад

      @@dicode1q what about making it so that if at 0%, the bar would be not have a triangle at the starting point (furi game has this, and the triangle entirely disappears rather than goes off the edge) and not have a triangle of empty space at 100%?

    • @dicode1q
      @dicode1q  Год назад +1

      @@ghb323I don't think it can be done with progress bar node. Also I am not sure it's the best way, but i would do it by masking using Light2d node. I will first create a white rectangle image representing the area I want to display. Then In Light2d node there is a property called "mode" there you can select mask and put the rectangle image in it.
      Then I will place the progress bar's background image and progress image (with a slope edge) on the top of background.
      (Light2d will be at the top of everything)
      Now throught code I will move the progress image left and right.
      And because of masking when the progress image go out of the background image it will not be visible.
      You can see this video about masking to understand better: ruclips.net/video/2ZD82i71-90/видео.html

  • @WtvShadow
    @WtvShadow Год назад

    how do i make the corners round to make the progress bar feel less blocky?

    • @dicode1q
      @dicode1q  Год назад

      In the inspector go to
      "Theme Overrides" then "Styles".
      Now you can edit background and foreground seperately.
      So from the drop-down select "New StyleBoxFlat" .
      Click on it and You will get
      "Corner Radius".

  • @cucubob9535
    @cucubob9535 4 месяца назад

    how do i code this?

  • @lufasumafalu5069
    @lufasumafalu5069 Год назад

    your irish accent is too thick

    • @dicode1q
      @dicode1q  Год назад

      I am not from Irish, I am from India

  • @andrewmcallister3529
    @andrewmcallister3529 2 года назад

    poo in loo

  • @issangolocoulibaly8325
    @issangolocoulibaly8325 3 года назад +1

    Thank you

    • @dicode1q
      @dicode1q  3 года назад

      You're welcome...