Cloud Wolf – Make Custom UI Bars in Minecraft

Hey guys clive here and today i have a highly requested video i was planning on putting something else out that i did a poll on but this one seemed even more wanted from my recent posts about a project i’m working on anyway so as you can tell in the bottom right hand corner

I have these little mana crystals that are where my bubbles should be uh so today we’re going to be going over how to make these mana crystals and i will include a resource pack and data pack download in the description and just get you started so you can kind of

Change some things once i show you what the different things mean but it’s a very simple but powerful tool for ui display here let’s just take a look at all that it can do so if i step on this it’ll bring me back up to full if i step on this

It’ll take me all the way down to nothing and it also works in series of half so it works in half it has up to 20 values essentially so you can have half of a value here okay so that’s how that thing works so let’s get into

How it actually is displayed that way so you have the the key part is a resource pack using a font uh so the way this works is you go into your minecraft in your resource pack you have a folder in under assets minecraft font and then there’s a file called default.json

This file if you have it uh will essentially tell the game uh different ways to display unicode characters that aren’t assigned already so what this means is i can tell it the unicode character using slash u uh and i could do a unique character of zero zero one zero

And it’ll do delete okay but if i do a unicode character that is above what the game knows then it will allow me to assign custom ones myself so you can assign custom ones to e 000 all the way up to ffff in hexadecimal coding hexadecimal coding each digit has

16 different values going from 0 to f so if i play the zero it’ll play it’ll show a little gem in the chat if i play one it will show half of a gem if i play two it will show the full gem okay so let’s go into how you set these up

So you have to call it a bitmap there’s a few different types bitmap is what i find the best for this application then you tell it the location slash file and the file name and file type so it’s an icon and it’s a dot png file so if i go

Into the respective location under textures custom which is the same here textures custom so it assumes that you’re already in the textures folder so then i go to custom it doesn’t have to be the minecraft namespace i just do it for this then i have icon.png icon.png is right

Here and it’s a picture of a gem then you have icon half is a picture of a half gem icon off is a picture of no gem then there’s a couple more stats here you have ascent height and what car character it is so here’s e thousand here’s a thousand one here’s

E thousand two okay now the interesting thing here is height and ascent so ascent is basically a vertical shift and it can’t be more than the height of the image so if i pick an ascent of if my image is nine by nine i can try to use ascent to

Push it down but that actually won’t work because uh if you put a negative ascent it will go up if you put a positive ascent it will uh shift it kind of down it’s kind of weird you can but you can change mess with the value of a cent

But it can only be up to whatever the height is so for that reason i actually in order to get this to work you have to add extra empty space into the top of your image and that’s how you’re able to shift the image down if you wanted to shift it up

You could use the ascent variable i believe without having to i think you can just throw in negative ascent otherwise you could use the shifting uh principle that i do here so i have a file here and i just add empty space to the top and i usually like to add empty

Space that’s some factor of uh some factor of how big the image is and then i also like to add two little dots in the corner that have an opacity level of one percent and i didn’t do that yet but i’m going to do that anyways uh and the reason i do this

These two little dots is because people who use optifine which is a mod uh that quite a few people use they the mod for some reason likes to uh condense pictures so if your picture has empty space it will chop all the empty space off but if you have a one percent alpha

Pixel which basically nobody can see in the corners it can’t condense that space because it needs to keep the pixel uh intact so it won’t chop it off so that’s just like a little thing that you might come across and that’s something important to know but anyways

So i add a bunch of empty space to the top so through logic if you add empty space to the top it will shift thing down and then i can add ascent artificially back in to shift it back up a little bit so that’s kind of my process here so

What i did was i put the character and i gave it i kept shifting added adding a negative space until it got all the way to the bottom uh and then what essentially i did after that was i added the ascent value back be like i shifted it until it was just

Kind of touching or below or like just past where i needed it and then i used the scent to move it back up a little bit to make it aligned with stuff like the armor so if i do give at p iron chest plates this is aligned with the

Location of the other one now if you wanted to do keep the bubble bar because the bubble bar actually goes right here you can shift this thing up again and by reducing the height you wouldn’t reduce the height value you would have to reduce the height value and reduce the empty space here

So if you want to change the scale you can change the high value here and if i make the high value more or less if i make it a bigger high value than what the actual image is it will blow up my picture if i make the height value less than it

Actually is then it will shrink the picture just like that so then the last piece of the puzzle is how do we get them as close together as they’re supposed to be so let me show you what happens if i do this like that you’ll see that the two are

Touching each other the little edge pixels are touching each other but in the ui of the official game they actually overlap so you can see the hearts actually overlap here so you can either do that by making your textures having a texture for one of the edges in another edge that is different

Which can be a little bit annoying to work with or you can use something created by amber on the mcc discord known as negative spaces so in this i have included her file for negative spaces which essentially allows you takes takes up a ton of your

Usable fonts it takes up from f 8000 0001 to f830 but what these new fonts allow you to do is shift things to the left so if i go ahead and add slash u f and i believe it is ignore how how big this is

If i use f 802 that shifts it back by two pixels which is essentially going to make them touch each other if i did ff then they might even overlap or go off the screen let’s do f9 and now you can see that they’re kind of overlapping in a weird fashion

So once you have the negative spaces and you have the icons to print all you have to do is put together a tell raw which has 10 of these icons with a negative space between each of the icons except for at the edges and some additional forward spaces that also use the

Amber’s pack which move it shift it to the right and then finally you just need to have a bunch of variations based on what score they have so if they have a score of zero you need to display all of the two ones if you have a score of eight you need to

Display a certain amount of full ones and half ones uh and just have every combination this is the most efficient way than trying to build it dynamically and i did it for you here anyways that just about sums everything up go ahead and leave a like if you liked

It and check out the description with all the downloads there anyways thanks for watching and i’ll see you next time peace you