Make Custom UI Bars in Minecraft

[@Applecakes]

I think custom unicode is a great skill for mapmakers to understand, im glad your teaching people and putting it a situation in which they would find it useful.

[@enderjora]

This will be way better for my mana system than a boss bar, so great!

[@vampante]

bossbars are really laggy, i don't suggest them even if it is the only option to make it look fancy

[@Cl0udWolf]

@@vampante ya they seem to be a bit bad for performance and their lack of per player dependence makes them not easy to work with

[@enderjora]

@@vampante Yeah, my bossbars were a little laggy. I basically crammed this in place of the bossbar code and made the necessary adjustments, and now it is working pretty damn well. I *might* make a quarter and three-quarters piece and be even more complex, but I am probably too lazy for that.

[@themissinglink2481]

@@Cl0udWolf Does the custom ui bars replace the water bar ui?

[@Cl0udWolf]

@@themissinglink2481 it can but u can shift it upwards so it doesnt

[@jaxandavashowoff]

I just discovered you you have the best content I can make literally anything in Minecraft because of you thanks

[@nikohausen1479]

Just requested it in Discord, thank you for uploading it so fast! :D

[@GeoAce51]

Oh, this is lovely. My friend and I went through around this stuff and after about 2 hours we managed to get a working version and understand what we're doing. This will make my map's healthbar system a lot better, gonna credit you for the provided datapack ofc.

[@Cl0udWolf]

cool, you can also do this for both left and right sides

[@GeoAce51]

@@Cl0udWolf Oh, yeah we switched it to the left side. It was a bit annoying to figure out the best way to move it to the top of the screen (we're using title instead of actionbar so it's a bit bigger) but seeing as ascent can't go above height it was sort of limiting.

[@Cl0udWolf]

@@GeoAce51 u can simply add empty space below the font, not forgetting to add the optifine 1% alpha pixels at the bottom

[@GeoAce51]

@@Cl0udWolf Yeah I was doing that but the hearts are about 11x11 (the actual texture I mean, the file size is 11x50) but even still it was a little hard to get it up decently, but I think it's fine right now. Though I don't recall an optifine alpha pixel, what's that?

[@Cl0udWolf]

@@GeoAce51 i discussed it in the video maybe? I thought I did. But if it’s 11x50 and the ascent is 50 then it should move up a lot and u can make it even bigger, although the title can be hard to adjust cause it inherently blows things up so 1 pixel is like 8 pixels, harder to fine tune

[@b1bu]

The solution I had for the spacing before was so much worse, your videos help a lot, thank you

[@NeunEinser]

A higher ascent value makes characters appear higher up, so you can go indefinitely down, but not up. You git it the wrong way around in the video ;) That's also why I like to put the icons at the top of the image and the empty space at the bottom, since you are unlimited in how far down you go anyways.

[@Xaevia]

If anyone was wondering, the max size of the image you can place in these custom image fonts appears to be 256x256. If anyone knows of a way to put in something bigger, please let me know! Also, still works in 1.20.1

[@ElOtroElito]

Thanks, man. I was wondering this.

[@kubune.]

tysm

[@randomaccount2644]

You've found very clever workarounds to mapmaking problems! This gives us so much capability!

[@thesuitablecommand]

I have had this saved for like a year and I am just now looking at it... this is brilliant!! It is the perfect solution to something I am trying to do!! I am working on a better HUD data pack, and I wanted a way to show elytra durability... this is a really good way to do it. I have a bossbar solution, but I wasn't in love with it. Thank you!!

[@joaquinribademar9044]

awesome, i just changed the colors (from blue to red) to implement temperature! nice tutorial

[@rhaelse1236]

I didn't know you could add textures for new characters. I have was retexturing already in game characters and usin an action bar to display them

[@CodeCreature]

Oh cool! I wasn't sure if this was something that would have to be done with a resource pack or not

[@antipastamony]

why is this better than doing it dynamically? it's been a while since I've worked on my pack, but the way I did it was with a single tellraw command. I had 3 different sets of images, one for the icon farthest to the right, one for all the icons to the left, and one for all the unfilled icons. the one on the right would display partial values (like your half-icon, but for me there was a higher resolution of decimal values). the one on the left would show however many full icons needed to be shown before it. the 3rd set would show however many empty sprites were needed to complete the bar. by using 3 distinct custom fonts I could assign these sets of images to the numbers from 0 to 9, allowing me to display the entire bar using tellraw's ability to display scoreboard values. as such, the entire title command would display 5 parts: an offset to align the bar, 3 numbers, and a negative offset to give it an overall width of 0 including the first offset (this was important for another piece of the puzzle, but doesn't really matter for the sake of this discussion). my computer is getting repaired at the moment, so I can't get the assets used to help with the explanation, but I do have some unlisted videos on my channel showing off some of the tests I did for the system. the first shows my version of a mana bar. kzbin.info/www/bejne/oojJZZyui6uNndU the second shows my recreation of the breath meter alongside the default breath meeter. this allowed me to move the breath meter above my mana bar. kzbin.info/www/bejne/aavOoKt7bZefntE

[@Cl0udWolf]

Dynamically meaning taking in scoreboards and adjusting tellraw rather than knowing how it should look for each score. Hard doing like I did here is better because scoreboard checks r cheap, and any dynamic method like I showed in my hp video requires more than just scoreboard checks in the commands

[@antipastamony]

@@Cl0udWolf oh I’ll have to check on your HP video. I assume what I described counts as dynamic, though I’m not sure why doing it through telltale would be so much more expensive. are scoreboard checks inside execute just that much more efficient?

[@Cl0udWolf]

@@antipastamony idk what u men’s by telltale and tellraw is not the actionbar but in the chat, idk what ur method does but using Unicode and commands hard coding is the least expensive commands

[@antipastamony]

@@Cl0udWolf I guess the thing that has me confused is the comment about anything else requiring more than scoreboard commands. what I described performs a few scoreboard operations (I think 3?) then uses the calculated values inside 3 score components in a tellraw command. does the inefficiency stem from the score component or am I missing something obvious?

[@Cl0udWolf]

@@antipastamony I don’t see how displaying a number becomes displaying a picture. Or an amount of pictures via unicode

[@Zambozoo]

Updating the actionbar cuts off messages from using a bed (and I believe using music discs as well). Is there a good system to display both the custom UI and the in game message?

[@Cl0udWolf]

Not really, u can check when they try to use a bed or disc I think and not run the title for a few ticks

[@raxo4311]

Perhaps you could use title or subtitle instead and somehow make the icons appear smaller 🤔

[@proficode]

you forgot to add scoreboard players add @a mana 0 in ui:main and thanks for your datapack + texturepack

[@solidasstone]

can you make this tutorial for the newer version? because this one dosen't working to me =(

[@Cl0udWolf]

Works for me even in 1.18

[@solidasstone]

@@Cl0udWolf can you help me with it? I don't know why it's not working

[@Kangdil]

Do you know that you can also change the ascent so you dont need to make the texture lower

[@mb3429]

I'm wondering if you could do something like this with shaders, since on my current project I'm using the armor points as a visual scoreboard, and the action bar is already taken up. Would you be able to use predicates with the thing you did in your screen overlay video for this?

[@The_Munch]

Hey, I know this is not related to this video, but I thought I'd ask a commandblock expert about a cool thing I found. Basically, I slowed down time in Minecraft using a commandblock checking for a certain entity in a radius of 999999 blocks. Having a lot of these running at once creates a stopped time effect, but the client isn't affected. My hypothesis is that this happens because the game can't search all those 999999 blocks for an entity every tick, and so it slows down the amount of ticks per second, but I'd love to hear what you think, if you read all this, that is.

[@Kalightortaio]

You're just causing the TPS to drop. Essentially, you're lagging out the server.

[@dominek9480]

is it possible to make a "space" that will move text up and down? Or does it neet to be preseted?

[@subway_surfers5251]

Could you make an inventory hud/armor hud with durability like the mod inventory hud using this or is that impossible

[@Cl0udWolf]

idk what that looks like but probably

[@Ryanmatix]

In the latest version of minecraft it seems to add a shadow to the icons, which looks a bit ugly. Would there be anyway to fix this?

[@ToughDialga007]

How about the air bubbles? They get covere, is there a way to make so they move up and out of the way when player is underwater?

[@ToughDialga007]

I may have figured it out myself

[@ToughDialga007]

Hmmm… do you know hot to make animated gui clock, I’d love to make one on the side of the hot bar, so it would turn and show what time it is

[@Cl0udWolf]

use unicode and actionbars

[@ToughDialga007]

@@Cl0udWolf I’m still new to this, would you be able provide an example some sort? So I’d have the base to work from?

[@Cl0udWolf]

@@ToughDialga007 u add Unicode characters like I did in this video then display different ones depending on the time

[@ToughDialga007]

@@Cl0udWolf true, I’ll play around with it, thanks :)

[@depa1379]

Is possibile to use this type of mana with plugin?

[@DemekAirsoft]

Any idea to keep it from covering the air bar (when diving)?

[@Cl0udWolf]

might need to shift it up when diving or in general

[@mosttaza]

Tip: u can make a black screen transition using a black font texture with /title it seems like you blink

[@TheFinalformsora]

Is there a way to place the display to the edge of the screen whether its windowed or fullscreen?

[@ViktorGaming]

I have a question about the playsound command if you dont mind me asking, so basically I have a concept where I want to make custom sounds and make the monsters play those exact sounds when I want to but the sound to be quiter if I am far and louder if they are close to me. Is there any way I can do something to make that work?

[@Cl0udWolf]

It already does that if u play the sound at the entity. It should have direction for loudness make multiple files

[@ViktorGaming]

@@Cl0udWolf I tried playing the sound at the entity but it didnt work, how should the command be?

[@NormalSMPVanilla]

Do you know how i could position it at very top of screen?

[@Cl0udWolf]

use blank texture space on bottom of texture

[@NormalSMPVanilla]

@@Cl0udWolf How do you make it match for each game resolution?

[@Cl0udWolf]

@@NormalSMPVanilla can’t do much about that

[@krytec_gaming]

How do you make the symbols go over the health and not in the chat?

[@kidkyle712]

How far can you go with this kind of custom ui elements in vanilla? I'm creating some sort of project server and would like to maybe apply this. Would it be possible, you think, to for example use a bossbar or title to combine an image assigned to a unicode character and actual text to create some form of a dialogue popup ?

[@Cl0udWolf]

Maybe but it would be unclickable

[@kidkyle712]

@@Cl0udWolf yeah I know, obviously

[@runkelpokk9]

i love your videos, so helpfull i hope you never stop making them

[@ToughDialga007]

in 1.19.2 there is some random shadow like thing behind the image that i have, and i dont know how to fix it, i tried everything, but nothing

[@Cl0udWolf]

There are shader resource pack assets that can remove shadows it that’s a concern

[@ToughDialga007]

@@Cl0udWolf so I need to find a separate resource pack that will fix the problem?

[@ToughDialga007]

@@Cl0udWolf i guess that’s a yes

[@Cl0udWolf]

@@ToughDialga007 u can incorporate it into yours. It’s a shader core asset

[@ToughDialga007]

@@Cl0udWolf thanks, I’ll look into it and figure it out

[@jasperplayz2138]

How do I add this to an existing texture pack?

[@zaksen5918]

so, have i can summon entity with name, that use this char? it posible?

[@Cl0udWolf]

Yup

[@Iigua]

I don't know if you saw my comment on the poll but I think a tutorial on how to paint a gui over a chest or a hopper's gui using fonts would be rlly cool

[@Cl0udWolf]

yes its definitely possible and interesting. whats cute if you can make ur chest ui only require items players can click on, and edit the page layout via the name of the chest + fonts

[@Iigua]

@@Cl0udWolf yes! I've been wanting to do something like this but can't get it to work, for custom crafting benches, utility blocks, all sorts of datapack user interface madness

[@Cl0udWolf]

@@Iigua ya it would be nice

[@jakob_z]

I didn't think even think about that, I knew of both this method and the item gui thing, but that would be so cool

[@Cl0udWolf]

@@jakob_z I have some theory but it could make a UI generator quite easily with it

[@jdawgtor]

Thanks for making this video, I did want to know if the fact that it uses the actionbar means you can only have one new stat? For example I couldn't have a mana bar, and temperature bar at the same time?

[@Cl0udWolf]

u can but u need to get creative with spacing since one bar moving will impact the others, horizontally is easy but stacking vertically u need lots of texture combos

[@slithercode4219]

THIS IS the Stuff I needed thx cloudwollffff u r da goatt

[@osci5]

Can you show in next video how with unicode change gui add clickable image on gui, or change boss bar?

[@staf1840]

You should make a scoreboard that tracks the players amount of water bubbles and if it is smaller then 300 then you could shift the mana bar up, bc now it covers it i think

[@Cl0udWolf]

Sure that can work but u will also need 3 more Unicode and another function for displaying the up shifted

[@staf1840]

@@Cl0udWolf I know, but I just felt like it would have been a great addition to the video because a lot of people who watch this are probably gonna ask about it

[@Cl0udWolf]

@@staf1840 wasn’t really thinking of that at the time since I use this stuff for controlled environments that don’t really have swimming

[@staf1840]

@@Cl0udWolf Aight np bro, I figured this out myself when I was like 12 so I don't actually need it lol.

[@Cl0udWolf]

@@staf1840 ok so?

[@rx97_mc]

How come you didn't showcase the `"font"` param in json. I feel like custom fonts is better since u can use actual characters for the bar

[@ouocat8222]

Question, I know we have to set the image "taller" to move them up, but why can't we set ascent to negative value to move it down? btw great tutorials!

[@Cl0udWolf]

Idk test it :P

[@ouocat8222]

@@Cl0udWolf Are you sure you didn't messed that up with height?

[@stantoncomet]

What photo editor are you using? I’m looking for a good one ;)

[@Cl0udWolf]

fire alpaca

[@stantoncomet]

@@Cl0udWolf thank you :3

[@raxo4311]

I like getpaint.net

[@PilotMiaoumi]

What if other things are also using the action bar?

[@Cl0udWolf]

up to u to find a way to put them all together

[@guiltra1661]

thank you for this amazing tutorial, i've tried to replicate it to display a custom mana bar yet whenever adding empty space to the icon in paint, it just displays it a whole lot smaller in minecraft and doesn't lower its height whatsoever, do you know how i can solve this?

[@Cl0udWolf]

Just do it without empty space and use a negative ascent value

[@guiltra1661]

Nevermind it's actually working, tysm

[@Joshb.1219]

Do you still have a discord? Looks like the link has expired

[@Cl0udWolf]

Check latest video

[@EpicBen208]

is it possible to make more then one bar?

[@dabbopabblo]

Dude this is LEGENDARY

[@EternalFlame06]

Can you please make a tutorial for custom dimensions, biomes and structures. And how to generate the structures naturally without replacing other vanilla structures.

[@Cl0udWolf]

While I would like to have a tutorial on them I don’t use custom dimensions in any of my projects and it’s a whole thing to learn how to do it myself so it’s not likely to happen right now

[@sethikablip8607]

You need a mod no?

[@sixtenlundin9053]

Is there a way to remove the drop shadow? (1.19.3)

[@Cl0udWolf]

there is a shader technique to do it, maybe ill cover it in a video

[@cron3x]

Is there a reason why u use fire alpaca, what are the benefits?

[@Cl0udWolf]

It’s free and I like the default key mapping

[@cron3x]

@@Cl0udWolf ah ok, should i try it?

[@Cl0udWolf]

@@cron3x if u dont have something u like sure

[@cron3x]

@@Cl0udWolf OK cool, thanks

[@-nubnub_280-8]

is this multiplayer friendly

[@dragondrak37G]

Can I do this I bedrock edition

[@itsoreoiseatable]

you can say me how i can do ? i not really understand and i downloaded you pack i reload the datapack and use the texture pack and that dones't works so pls help me

[@Catfoolyou]

Is it possible to have multiple actionbars?

[@Cl0udWolf]

No but u can use negative fonts to effectively get it

[@Catfoolyou]

@@Cl0udWolf How? When I tried to add a second action bar the first one disappeared... Can you please explain this?

[@Cl0udWolf]

@@Catfoolyou u can’t. As I said u can just utilize the first one negative font spaces to move the cursor left to right

[@Byblacklebg]

I don't know why but it doesn't work for me , i did the same as the tutorial, i'm in 1.17.1 anyone can help me ?

[@Anistuffs]

Does the size automatically change dependending upon the GUI scale? Because if not, this is really unusable since different people use different GUI scale.

[@Cl0udWolf]

As long as ur in the actionbar it does

[@bionicpanda8159]

Hi, would you mind if I make a derivative work of this datapack for a map I'm making? I'll be sure to credit back to your channel, this video, along with amber's negative space font.

[@Cl0udWolf]

Of course, this video was made for map makers

[@itsSaltGoodman]

how do you find stuff like this?

[@Cl0udWolf]

magically

[@azyregd]

how to add 1 more thing

[@duffyscottc]

so cool and useful!!!!

[@jonow7243]

I needed this

[@nicoo.caballero]

with this you could do something like the ruby system of origin realms?

[@Cl0udWolf]

I don’t know what that is

[@nicoo.caballero]

Origin realms is a minecraft server

[@Krian_The_Demon]

As usual mega-cool

[@alexandercasas577]

Change the resolution or gui size and you will broke it

[@rbb_tv137]

what about bedrock :(

[@jenshub]

Pretty neat

[@laoy9771]

nice vid

[@vesaucy6747]

mindcraft

[@Adh682]

Hi

[@TryEZ_]

nadie viene por el bot de eufonia? xD

[@gustavo8338]

Don't work

[@custer_]

Can't you make a bedrock?