Progress-Reporting C# Progress Bars on a Canvas (With Updating Text!) | Unity Tutorial

Подписаться 23 тыс.

Просмотров 8 тыс.

50% 1

Learn how to create Progress Bars that report their progress by raising events! In this tutorial you'll learn how to, from scratch, create a new progress bar using C# and the Unity UI System. You'll learn how to raise UnityEvents (to hook up in the inspector) or delegate functions (to hook up with code) as the progress bar updates. In our example we'll update some TextMeshProUGUI text with the progress as it fills up.
💸 Ongoing sales 💸
⚫ See all active asset sales on the Asset Store: assetstore.uni...
⚫ Save 25% off your first Asset Store Order: prf.hn/click/c...
⚫ Save up to 50% on NEW Assets: assetstore.uni...
👨‍💻 As always, all code from this video is available on GitHub: github.com/lla...
❤ Believe in LlamAcademy's mission and have received value from the videos? Become a Patreon Supporter or RU-vid Member:
⚫ Patreon: / llamacademy
⚫ RU-vid Member: / @llamacademy or click the Join button on any video
----
Most tutorials come from knowledge gained making survival.llama... Llama Survival - a top-down zombie survival shooter for Android and iOS.
I also have some Unity Assets (affiliate link): assetstore.uni...
Some links may be affiliate links, which at no additional cost to you, gives me a small portion of the purchase.
#unitytutorial #tutorialtuesday #gamedev #tutorial #unity #llamacademy #gamedevelopment
Chapters:
00:00 Progress Bars in Games & Short Explanation of How to Create Them
01:25 Setting up Progress Bars on a Canvas
02:40 ProgressBar.cs - Variables and Start
04:03 ProgressBar.cs - Overloaded SetProgress
06:40 Hooking up Components & Events
08:02 Demo
09:02 Final Thoughts and Warning

Опубликовано:

17 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 18

@ronigleydsonvilasnovas8067 2 года назад

very cool and easy to implement. thanks for the tutorial.

@jorbascrumps 2 года назад

Content was solid but the flex is what convinced me to like the video 💪

@LlamAcademy 2 года назад

💪💪😁 I wondered if anybody was watching at the very end to see those!

@thedave1602 Год назад

Thanks for this.

@codearchive3218 2 года назад

How do I set the top button as a button itself that does this? so I click on the top button and it does that progress bar still then becomes a button again after the time passes?

@LlamAcademy 2 года назад

Sounds like maybe you want a button progress bar where the image reference is a fill on top of the default button. Once the progress completed you can set the button.enabled to false so it cannot be clicked, and either use a Coroutine or an Invoke to re-enable the button after some time

@codearchive3218 2 года назад

@@LlamAcademy Yes! I would love too see a tutorial on this in the best way possible! as I know you've done a video on it here and also explained it here also and I know what all those things are you mentioned, but I have zero idea on how to implement it! lol subbed because you replied, thank you.

@DullaghanCormac 2 года назад

Hi, Thank you for the video. Just wondering why the code line at 6:34 is "ProgressImage.fillAmount = Progress; OnProgress?.Invoke(Progress);" instead of "ProgressImage.fillAmount = Progress; OnProgress?.Invoke(ProgressImage.fillAmount);" please? You did so within the if statement above before. Thanks again for the great helpful video! (And funny flex at the end)

@LlamAcademy 2 года назад

There's no real difference there. If you used OnProgress?.Invoke(ProgressImage.fillAmount); you would get the same result. No real reason to use one over the other! 😁 I enjoyed the flex a lot

@DullaghanCormac 2 года назад

@@LlamAcademy Thank you for the reply! I wasn't sure you would. Great to see you're active so I've subscribed now. May I ask another question please, which is how to have the bar remain fully there but have the full bars colour change through from Green->Yellow->Red please? I guess this isn't using a gradient and changing fill but rather changing the colour of the fill on a gradient instead? Not sure what to Google search to get help on this. Thanks for your time again! 🦙

@DullaghanCormac 2 года назад

PS: I have been following your other great video to get the gradient to work: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cUQVLgohAjY.html

@DullaghanCormac 2 года назад

Oh never mind! I was far too sleepy last night! 😅 The obvious answer was to simply comment out the line: ProgressImage.fillAmount = Progress; Thanks for your time anyway! 😁

@LlamAcademy 2 года назад

@@DullaghanCormac I'm glad you got it figured out!

@dev.ashesh Год назад

How to create a progress bar that also relies on other multiple progress bars, more like a Total progress bar. I already made a total progress bar but only fills if a bar it relies on is 100%.. heres how my progress bar works now: Lets say i have random amount of progress bar but lets make it 2 bars for now as example. So Bar1 and Bar2 and TotalBar, how it is now is TotalBar is always at 0% and only goes to 50% when Bar1 is full.. What i am trying to do is TotalBar should fill even if bar1 isnt full.. like if bar1 is 50%, totalbar should also fill to 25%.. What am i doing wrong? Bar 1

@LlamAcademy Год назад

This sounds like you may have stacked multiple progress bars. You can use this script to set/animate in progress bars independently, then in your game code you can control the specific logic about filling progress bar 1, 2, or 3. If progress bar 3 depends on 1 being full first, just set the progress of both as they should be at the same time. What’s covered here is just the basics of progress bars. How you fill them is up to you!