How to make a Mana Bar in the UI (Unity Tutorial for Beginners)
ฝัง
- เผยแพร่เมื่อ 21 พ.ย. 2024
- Grab the Project files and Utilities at unitycodemonke...
Let's create a Mana Bar in the UI along with some simple Mana Regen code and then polish it with a animated texture.
If you have any questions post them in the comments and I'll do my best to answer them.
See you next time!
Grab the game bundle at unitycodemonke...
Get the Code Monkey Utilities at unitycodemonke...
#unity3d #tutorial #unity2d
--------------------------------------------------------------------
Hello and welcome, I am your Code Monkey and here you will learn everything about Game Development in Unity 2D using C#.
I've been developing games for several years with 7 published games on Steam and now I'm sharing my knowledge to help you on your own game development journey.
You can see my games at www.endlessloopstudios.com
--------------------------------------------------------------------
Website: unitycodemonke...
Twitter: / unitycodemonkey
Facebook: / unitycodemonkey
Did you know about the RawImage component? What interesting things have you done with it?
Learn more about raw images i dont use this ever i use every time image.
What do you mean by Unity Type? Version? I'm using Unity 2018.3
Hmm I am a beginner so I don't know
My first time hearing about it! It's very useful, thank you.
Trying it for the first time thank you
thank you dude but just an advice, speeding up some parts is a really good idea for video timing but on some parts (especially creating elements on hierarchy) are hard to catch. I stuck on the creating mask part about 5 - 6 minutes. Thank you, anyway. Great work.
For those that wants to use this with a healthsystem where current and max health is not between 0 and 1, you can convert those values by passing SetSize(maxHealth / currentHealth), that will normalize the value. Remember to have them as floats.
It is a good idea to have them as floats but, because I am an intellectual, I cast them before division lmao.
Please don't be like me.
This is the ultimate tutorial!
Worked with Unity for 5 years and still learned a thing with RawImage UV Rect and using ImageType.Filled Horizontal instead of using a Slider.
Great tips!!
Finally, a good tutorial on doing progress bars with something other than the basic sprite fillAmount approach, which, as you said, is way too simplistic. Would love to see some examples of what you can do with shaders for the UI as well as more tutorials on achieving more advanced UI effects just as this one - there's definitely not a lot of it out there.
Excellent, It would be a great if bit slows down when speeding up the trivial task or put list of steps you perform in slide so absolute beginner can follow!
Good lord, after 5 different energy/ health bar tutorials I have found one that works for me and looks good too
Love your videos I finally made a game but small
Awesome! Everyone starts small, keep at it!
Me to
@@CodeMonkeyUnity Do you also release games? O.o :)
What software you are using in screen recorder , video editing
And what for video recording and modification
For recording I use OBS, for editing Premiere. And for the talking videos I use After Effects for the Audio Spectrum effect.
Yeah for the audio you also probably think of audacity, it's great and free
I am using Bandicam you should try
alternatively you make your barMask a filled image and you can change the fill, just like before with the bar. Could be a bit easier.
what happens to the animation @15:54? was that a cut in the video or is the animation resetting?
Just a video cut, the animation is always smooth.
@@CodeMonkeyUnity I see alright :)
This is amazing!!! Thank you for the tutorial!!!
an actually good ad
Good tutorial. Thank you very much.
well timed i was just making health and shield bars.
question if you have multiple units how do you get the ui bars over them or should i make an ingame bar.
If you're making a game with multiple units like say a RTS I would create bars in the World instead of the UI.
Otherwise you're constantly having to calculate World position into UI coordinates.
@@CodeMonkeyUnity thank you ^.^ keep up the good work. im loving the vids. looking forward to the multiplayer update and you videos on that.
i get an error that says "There is no argument given that corresponds to the required formal parameter 'amount' of 'Mana.GetManaNormalized(int)'
Can you please help me with this?
I have a question. If this were to be called using a button on the keyboard (new input system), how could we stop it from repeating every frame?
hello, i'm vietnamese
If your edgerect is moving in the wrong direction, just add a - before your fill amount ( -barImage.fillAmount)
I am relatively new to Unity, and I've had to stop at 0:45 to change the speed to 0.25x just to get the speed to look normal. With all due respect, why would you speed up important moments that take less than 5 seconds in real life just to save milliseconds? Leave the viewer the option to alter the speed of your video. By doing that yourself, it forces the user to stop, go back, change the speed, and play detective to figure out what they missed. I've had to replay the first and second minute of the video over five times on 0.25x because you've sped this up so quickly.
The content is great. But the manner in which some of it is delivered is illogical and frankly obnoxious.
Cheers.
Why is it good to you that you advertises your channel everywhere and make videos for free?
Unity says “ArgumentException: The Object you want to instantiate is null” when I try to create the button. How do I solve this? And please reply
Now how would I spend mana from my Skills script? im using the old Input system with a simple use skill on key press.
How would this be done if you used a call to Start() instead of using Awake() like you did? Or, perhaps better asked, why did you make that change?
also - love your videos, the speed/brevity is wonderful. thanks a bunch.
It would work the same, Start(); get called right after Awake();
Normally I put the initialization code of an object on Awake(); and on Start(); I add whatever connections I need with other objects.
Hello,if i have my own UI(not the one from your code) how can i make it when click that button spend mana?
This is not for beginners but thank you anyways :)
What part is it not for beginners? It's a very simple UI sprite, I cannot think of anything simpler.
If you know the absolute basics you should have no problem following this tutorial
th-cam.com/video/E6A4WvsDeLE/w-d-xo.html
@@CodeMonkeyUnity What I meant was code part and maybe it's because of my inability :)
I have a doubt sir. In my game, I am having a shooting bar. Which means , If I hold the shoot button, then the shooting bar gets decreased and if the bar is at 0 then the player should stop shooting. And the shooting bar regenerates. Problem is if I press the shoot button it is decreasing but it is not stopping to shoot. It is continuously shooting after bar is at 0 while holding the button. And I solved this problem by using setactive. But after that, another problem came, that is, if I press the button, it is not shooting after the bar is 0, yeah that's fine, but the bullets are only disabled, so it is creating many disabled bullets in hierarchy. What should I do sir plz 😥😥
What is the purpose of normalization with the method GetManaNormalized() and what is the purpose of returning manaAmount / MANA_MAX?
Normalized values help you use them in any scenario without knowing what the underlying min and max values are. So for example you can display the size of a Mana bar without having to know MANA_MAX.
With a normalized value you can calculate whatever relative value you want.
pls help how do i call the tryspendmana function from a key, like
if(Input.GetKeyDown(KeyCode.T)){
mana.TrySpendMana(30);
}
that is my exact code, yet it does not show up that i used any. =[[[[
How do you attach the Mana bar to your Spells so when you shot a Spell it uses some of Mana bar ?
thanks, this is so helpful
I can't make border. It doesn't showing. Help me please. Thanks
Thanks a lot, it helped!
So the sizeDelta approach doesn't seem to be working anymore despite setting the achors to the left. It just starts resizing from the center instead so it's being squeezed instead of filled from the left.
Edit: you gotta set the pivot point to 0 0 to make it work.
Thanks, I was having the same problem and setting the pivot point to 0 0 on the Mask worked for me.
Can this code be used simply like in the video, if the UI button "Spend Mana" is replaced by an action - say:
if[canJump]
{
mana.TrySpendMana(20);
}
?
I've tried this for a while now with no results, and cannot seem to make it work. I have the mana bar in it's own script, and I'm referencing it to my movement script with
Mana refScript;
void Start()
{
refScript = GetComponent();
}
Right now, when (refScript.TrySpendMana(20);) placed into the jump-function it simply states "Object reference not set to an instance of an object".
Do you know what's wrong?
Mana is not a MonoBehaviour class so you cannot grab it with GetComponent();
You need to instantiate the Mana class somewhere and pass it in to your player script and also to the bar to update the visual.
@@CodeMonkeyUnity Well, it appears then that there is a solution to this mystery! However, now I'll need to figure out what you just wrote, hehe. (There is a reason I'm in a beginner tutorial here).
Actually posted about this to your Discord as well, but thank you immensely for taking the time to answer me!
really appreciate your videos but i wish you wouldnt move so fast
You can download the completed project files from the website and pause the videos if you want to follow along.
What an amazing video !!
Stuck @ around 11 min. I've set my barMask to anchor on the left side, but when I adjust the width it still shrinks from both sides towards the centre. What I do notice is that when you modify your anchor, the blue circle denoting object origin shifts position, but mine does not. Why is that?
Don't know what I'm doing differently, and everything else is working well =(
It's not the anchor that you need to change, its the pivot. Hold shift when clicking on the button.
@@CodeMonkeyUnity you're a champion! I'll try that as soon as I get home 🐒❤️
Question. I have made the mana system as shown and it works. I also made a dash system in another script ,from the movement tutorial. Now I want the player to dash only when there is enough mana but I cannot come up with a solution. Pls help
First test if you have mana, if not do nothing, if you do then spend the mana and do the dash.
How did you make that border 1:40? What is this sorcery?
There's a Border image tinted in black that is slightly larger than the Background image.
@@CodeMonkeyUnity, lol ok thank you. I also didn't have it anchored the same way so I didn't have the same fields exactly.
I needed to do that simple border too and paused the video 50 times wondering what was going on xd
@@SLEUR32 0.5 speed video xD
This. 100% agree. I got it, but it took coming down to understand that the border was hidden behind to create the boarder.
I use Monodevelop but it doesn't recommend any options during the scripting
What should I do ?
MonoDevelop is very old and I don't think it's Unity Supported anymore, install Visual Studio Community or Visual Studio Code and install the Unity Tools.
After creating the UI > Image ("background") as a child of the ManaBar, when I set the Width and Height to 0 it fails to inherit from the parent object ("ManaBar") and I'm left with an empty rectangle with no color. Do you know what I am doing wrong?
Make sure the RectTransform is set to extend on all sides. Anchor Min 0,0 and Anchor Max 1,1.
When you do that and set the width and height to 0 it will extend to occupy the size of the parent.
@@CodeMonkeyUnity Thank you! This solved the problem!
Thanks for this. I admit that I got hopelessly stuck around 60 seconds in.
I decided to get 'basic-fancy' and import a gradient box to serve as texture in substitute for the 1x1 pixel.
Unfortunately it refuses to be linked to the Image (script) component in the inspector - and (1.5 hours later) I gave up and wrote this comment. ^_^;;
It does accept to be linked to a Raw Image script component - but that has none of the convenient fill elements.
With guidance the mystery has been solved! :c)
The 'basic-fancy' image was imported as a raw image so all I had to do was to click the imported asset, - go to 'Texture Type' and select 'Sprite (2D and UI). Now I should be able to follow along with the tutorial properly! :cD
why we separating the progress of the bar on the mana class instead of just do it on the main class
You should always keep your classes as decoupled as possible in order to keep your code clean to be easier to follow, understand and maintain.
It also allows you to completely change how you display Mana without having to modify the underlying class at all, just change the visual.
@@CodeMonkeyUnity true ,
than you
Is it okay if we use some of the assets from the project files in a game?
Sure, go for it!
Can i use this code for the base of a stamina bar?? help pls
Sure, this is just a visual, it can represent whatever you want in your game.
@@CodeMonkeyUnity Thank you! :))
where do u get the white 1x1
Just make it in any image program like Paint or Photoshop
Uff I love it ! :D
Hey I'm not using Code Monkey so to use my mana which in my case is turbo I used this:
if (Input.GetKeyDown(KeyCode.X))
turbo.TrySpendTurbo(20);
But it doesn't work, also my bar starts at 0 instead of 100.
Can you help me out?
I also did the clamp
If your bar isnt changing do some Debug.Log's to make sure the underlying variable is indeed being modified when you do TrySpendTurbo and make sure the bar is updating with that variable.
@@CodeMonkeyUnity Thanks it's working now
Can you activate the "tryspendmana" with a key instead of a button ?
Sure, it's just a function call, you can call it from anywhere
Hi! First of all, great tutorial, as always. Second thing: in my attack script i need to make a condition that when the mana is at 40, the player can attack. But the problem is that i can't refer the manaAmount int in my if condition, and if i try, it gives me a NullReferenceException error. Obviously i referenced the mana script in my attack script.
Here's my code:
if (playerController.isGrounded && Input.GetMouseButtonDown(0) && stand.activeSelf && energyAmount >= 40f)
{
Attack();
}
Hope you can help me ;)
isn't better to refill mana correctly in while loop?
A while loop would fill the whole Mana in a single frame rather than over time.
how would you make this degen? instead of regen
Instead of increasing on update you would decrease.
dude... cant even download the files because his website keeps telling me to validate my email when i already clicked on that link in my gmail and it said "User Already Validated"😮💨
If the account is validated then you should be able to download the files, maybe log out and back in again?
Thanks you
Mine keeps saying "Object reference is not set to an instance of an object"
Sounds like you left some field null
@@CodeMonkeyUnity I have no clue what that means, but I fixed it lol. When I get home hopefully I remember to put what fixed it here for others.
i cant download this
Why not? What happens when you press the "Download Project Files" button?
What error message?
Can i connect it to my vfx effects wich i created?
Not sure what you mean, sure you can add extra vfx on top of the bar
@@CodeMonkeyUnity can tou connect thwm to quirk s?
Hello bro .. Please download progress bar projects create bro
good ad
What is the mana?
This can be used for whatever you want, could be mana or could be stamina
How do u make a 1x1 texture pixel?
On any image program like Paint or Photoshop.
@@CodeMonkeyUnity oh thx :)
Why is this an add?
Hello when I learn to work with your program can i make my own games?
Unity is the game engine and yes you can make your own games with it.
Ok bye
3rd Thank you CM!!
nice tks
*can I do this on mobile*
Sure, there's nothing different about mobile regarding this UI element.
@Code Monkey ahh thanks
I liked your video but it must be a little difficult for beginners because just for a loading bar bunch of code no way
It all depends on how detailed you want your bar to be.
At it's simplest form it's just one line of code to set the bar size
barImage.fillAmount = barSize;
DOOD!
I couldn't understand anything because of irrational timing decisions of the video. For example, masking operation is the most important part to complete the task but eventhough I watched it in 0.25 speed hundreds of time, I still couldn't figure out the complete opreration. Boooooo
At 10:30 the video is at normal speed as I explain how all the elements are set up. You have a game object with a Mask and a Image then a child of that game object with the bar sprite.
@@CodeMonkeyUnity Yeah but for example the process which you properly put anchor points of the mask and bar is still blurry for me. It has been 3 days I am trying to understand why left anchor attached bar sprite halves when you change aspect ratio, lets say 9:16 to 16:9. You managed it somehow and shared the codes thanks for that of course. But I just wanted to make a feedback for your future works.
I mean you used stretched anchors for every other canvas object, except mask and bar. And when I change the aspect ratio, everything fits perfectly well except mask and the bar.
Hii
Terrible tutorial. No idea why you'd need to speed certain sections up so quickly. Really makes the tutorial much harder to follow. We have the option to speed to video up ourselves.
You also have the options to slow down the video and pause it when needed.
This is your learning journey, its not a race, so take your time and focus on learning.
@@CodeMonkeyUnity Use your brain. Leave the video at a constant speed and it's much easier to follow/change to what speed I want. You constantly changing the speed of the video is jarring and very poor for a tutorial which is why you never see this behaviour in other tutorials. Also, read the comments. I'm not the only one complaining. The first rule about making good tutorials is to not over assume knowledge of the person watching.
Man, You are going WAY too fast. Can't Follow up.
You can use the options in the TH-cam player to slow down or pause the video.
Remember your goal is to learn, so don't worry about trying to learn as fast as possible, pause as much as you need to understand the content.