Cloud Wolf – How to add new GUIs to Minecraft (Java Edition)

Hey guys club here and today we will be covering how to add custom ui such as this one in-game so the first thing you have to do when adding custom ui is decide what kind of input method you need for this there are three main methods used there is a barrel or chest

A chest minecart and an ender chest and each have their unique advantages and disadvantages the barrel has the advantage of being easy to make look like a custom crafter you can easily put a armor stand with a 3d model shift it down in order to disguise it as whatever your custom block is

And a advantage and disadvantage is that barrels can have hoppers should deposit items into them and take items out of them if you want something automated that can be pretty useful uh and finally the third kind of disadvantage is that other players can take from them it could be seen as an

Advantage to some people but essentially if i’m accessing the barrel other people can also access the barrel and take things that i’m trying to craft or take items in and out the kind of trade-offs of the chest minecart the advantage is you can easily hide it and make it

Follow the player such as some kind of ui you would see on a server where you have a compass and you right click the compass and it opens up a ui again another kind of disadvantage to this is that other players can potentially open this while the player that is holding it has

It opened so that could be a bit annoying to people so the third one is the ender chest this one is the most multiplayer friendly in the sense that people can’t open the ender chest and take your items because the ender chest is player specific container in player specific storage one

Of the disadvantages is it’s very hard to visually change it because when you open an enter chest it extends the top of the animation into the block above it so a singular block can’t really hide it that well the other issue is there’s particles and the sound effect is pretty unique

But if you’re willing to put up with that this is the most multiplayer friendly option so once you have picked what kind of input method you want to use let’s go over how to add the ui texture such as this into your game so inside the resource pack that will be

Included in the link in the description you can just download it if you want to browse the files as we’re going through it you can go to assets minecraft models item and inside here you can check out barrier so barrier has a custom model data override which basically says when the

Custom model data tag is a specific number it will display a different model so that’s to say when i give myself a barrier that has custom model data of 2 it will give me the ui that is located here this model and the model looks like this so

That specific model if you go into the ui folder is called menu and menu has a parent of root root is essentially just a plane a 2d plane that applies a texture to it that is the appropriate size and it has some different display settings and then this just changes the texture

That’s used on that plane the texture is located in minecraft textures custom ui and you can basically add textures to this folder that looks similar you just copy and paste one of these base ones and rename it to your one that you like so i’ll just rename this to new

And i will open it inside a texture editing program and you can edit the texture here one thing to note is that you have to contain a empty space wherever you want things like items to show in your ui and that is because the root model has a display property of translation

Where the translation space is at position one what this means is that the model goes rendered on top of the items now if you want to render the model below the items for something such as a smithing table where it has a picture of a ingot that goes below the items inside

The slot that’s possible just by going into the models and making a new model of root let’s call this underlay and this might already be inside the files but i’m just showing you what it is so instead of doing one we’ll just draw to either zero or negative one i think

Negative one is a proper value for that uh and you’ll have to adjust the other translations because maybe you have two items so you want to put those two items that display the ui kind of in separate locations but if you do something like this and then let’s go into menu and let’s

Use underlay then any items will go on top of the ui just like that and this is good if you have something where you want to have some kind of a texture that goes underneath the item so now that you know how to essentially make pages we have to place this into

The right spot now i’m just going to use a barrel but this kind of applies to any kind of ui so in the configuration of the 3d model it is set up so that the translation makes it overlay correctly when the item’s in the bottom right corner but

You may want to have multiple uis right like different ui stuff so you’ll have to make a a model that overlays it properly when it’s in the slot next to that or maybe somewhere else because you want to have a button in the bottom right corner i don’t

Really know what you’re trying to do but it’s kind of assumed that the bottom right corner is a safe place to put things so now we get into the command section and for this i actually made three data packs that you can download in the description that each are

Slightly different but have a similar structure based on what type of crafter your or what type of ui you’re trying to implement in the game but the kind of way that you design it is the same for everything there’s just some nuances with how to put items in and take items

Out of the ui that kind of change so i will cover the main structure but i’m not going to cover each code line by line and write it with you because there’s 28 functions which is not too much but it’s too much for me to go line

By line with you because there’s a couple hundred lines that all do very unique stuff so some of the ways that i have set up kind of this framework is kind of trying to design it as flexible as possible so let’s go over what kind of things are created initially

So on reload you have a ui scoreboard which this is just general information about the ui like fake players for doing different calculations then there’s uid and this refers to which ui you’re using basically it’s a unique score that gets applied to each ui so that you can link it back to the

Player that’s kind of manipulating the ui next we have ui page which has to do with which page you’re on inside the ui so in that case this would be oh this will be page zero and this is page one and this is page two

The next is ui index and that’s kind of a secondary page and that’s used in the vending machine example where you basically have a gold ingot that goes as input and i can change which potion i get for it because it’s a vending machine and that’s what the indexes use so index

Basically is going to change which potion is being displayed the final scoreboard here is open ui and that’s for detecting when you open the ui uh but there will be a different one depending on what there’s different logic depending on which uh one you’re using so for the ender

Chest you are going to have open ui one which is for opening and under chest and finally we have a shulker box that is placed at a hard-coded location that’s basically used to copy items out and in from storage using slash loot so now we look inside main which is run

Every single tick of the game so 20 times per second so it essentially just it looks for somebody that is opening a ui and it tries to find a ui okay and these two commands will cover these set of commands we’ll cover later but this basically is just logic ran at uis and

This is just logic to kill items dropped out of a ui only when that ui is active for efficiency purposes essentially if somebody is using a ui then they could be taking items out of it and then let’s kill those items but you can kind of if you’re having issues with for some

Reason people still getting those items spawned you can move that around so let’s take a look at what ui find does this is something there is a lot of functions here you will not have to touch i’m just going to tell you that right off the bat i will direct you to

What you’re supposed to actually modify in order to add or edit the ui but i’m just showing you how i implemented this just for the sake of knowing kind of like how the structure is so inside find we have a couple functions here so at the start that’s where we begin

And we essentially just set a score to 12 and we copy the player’s ui id so each player is going to get a ui id at some point but when somebody doesn’t have a ui id you’re just copying zero meaning you’re not opening a chest and

Then it runs a raycast okay so the raycast is going to have to do everything before we continue here and the raycast essentially just moves forward in steps of 0.5 looking for a marker within 0.5 that is a ui and when it finds that marker then it will check if

You have the same id as the marker you’re looking at this kind of logic means that you are looking at an id you’re looking at a marker that is uh one you already looked at so the found command is actually going to this is some like nuances to detect when they

Close the chest so essentially we don’t reset their score that causes this line of commands to run until we detect that they left the chest and we detect that they left the chest when this no longer is true so we see are you looking at the same one or do you have no

Assigned id meaning that you are not looking in a chest so the very first time this string of commands is run this one will trigger this one will not trigger so then we run found so found essentially copies the marker’s id onto a fake player and it sets the loop score to

Negative one which means we found something if the score reaches zero then that means that this loop kind of completed without detecting a marker because you remove one as long as it’s still one so it will reach zero if you don’t detect something but this sets it to negative one which

Really basically tells the ray cast to stop and it gives this thing a tag knowing that the ui is active it’s being used so back inside start if it’s negative one that means we found a valid ui that we are either still looking at or is a new one that we just

Started looking at and it copies the id to the player now this is what happens if it doesn’t detect a ui or you aren’t looking at the one that you have linked so basically we’re just going to set the we’re going to exit the ui which is just a function that’s ran that

Closes out of the ui for the player and returns their items if necessary then we’re going to set their id to 0 and then we’re going to set their open ui to zero so we stop running this raycast command every tick okay so all those things combined essentially let me detect when i’m

Opening a ui and when i’m closing a ui and that’s not that’s not used in the chest minecart system i’ll just brush over those really quickly at the end i’ll brush over the other two we’re just using the barrel for the simple case um but essentially it raycast so it’s still

Raycasting at me right now right and then when i look away it stops raycasting and i get my score set to zero so here you see my score is 42 and now it’s zero just like that and you can see that if i put the gold ingots inside here i get them back

Okay so that’s how it associates the ui with a specific player now let’s go ahead and see the other thing that happens in main which is any ui that is considered active gets a different function ran as it so this ui removes the active tag so that

When the player exits the ui it will no longer have the tag and while the player is still in the ui basically spam adds the tag so it’s you’re kind of like adding remove add or move out or move every tick okay then this is setting the page change to zero it’s

Basically a flag detecting if you changed pages within the same tick and this is important because if i click if i click on a page here it needs to change the page and it needs to change the page without reading the changes on the page and

We’ll go over that you’ll see that in a second here so what it does is it copies the items onto a data storage and it tries to copy those items onto the markers mbt data if it succeeds that means that it was able to copy it which

Means that the two the the previous ticks data that was saved on the marker is not the same as the current ticks which means something changed in the chest and only when something changed do you run the refresh function so otherwise basically only these commands are run

For the marker but if something is different then go ahead and run a refresh that means something changed in your ui so when something changes in your ui a lot of stuff happens and this is where you are actually going to mess with things so all this code leave alone the only

Code that you would mess with is this here so if you want to add a new page just copy a line here paste the line here change the number for page four and change the folder for whatever my page okay uh obviously in the default download it will already have

These set of pages which you can remove or change or modify and then you go into the page folder because that’s where these files are directing you to and you just copy one of these and you rename it to my page okay just like that and things will

Happen inside there and i’ll show you what different things mean inside there so that’s kind of what you mess with personally as someone using this framework uh anyways so the first thing that you do is you find who is controlling the ui so it tries to find one anybody that is

Looking at the ui specifically just one player it will only use one player later then you count basically how many things are inside the container this is just helpful for when you first open the container if the container was empty then signify that the page is changing

This is just kind of a debugging thing so it’s useful for stuff like the ender chest where you do need to clear the u you need to restore the previous enter chest when they leave it it’s not super useful for barrels but when you first place a barrel ui it won’t have anything

In it so this kind of accounts for that so next we basically make sure that the page has at least some value so we add zero and then we figure out what page are we using okay so then based on what page we run a different start function okay so once

We’ve loaded or done whatever the page is this essentially just copies the data onto the marker just to make sure that it doesn’t that it’s updated on what is in the uh container okay so basically if you don’t have this line of code it will run the uh

It will run the refresh command multiple at least two times each time you use it because the next tick your items have changed when you changed stuff from the logic here uh then it just removes the controlling user and then it sets the kill score to one which basically is something that

Gets spam set to one and zero uh like when the armor stand is this this basically is spammed set two one and zero just to signify if any ui is being used then go ahead and kill any items that are dropped out of the ui so now let’s take a look at pages

Because pages are kind of important so inside the menu we have a function called start and the structure for the pages is going to be really similar based on what you’re trying to have accomplished in it so first you want to clear any custom items the player has clicked on okay so

This custom tag of null1b inside the ui namespace tag signifies that it is a item that you’re trying to that is like a button it’s something that they’re not supposed to have there’s just something you’re supposed to click and this all items tag is basically every item in the game so clear anything

That has this mvt okay so then it copies this is where you basically isolate what you’re trying to return to the player and this is basically for any input that the player is putting into the chest that you don’t want to be there so for example if i’m on the home

Page and i throw anything get anywhere in the ui it just comes back to me okay and the reason for that is i don’t want people to put anything inside this ui it’s simply just a button ui which means nothing should go inside of it so we copy everything that was on the

Container which is the data storage of what is in what was in the input for the current frame we copy that to the return and storage and then we delete anything that has null tag because when we copy that it will also include these buttons so we delete those buttons as well

Then we go to the coordinates of that shulker box and we run the return function the return function is very very simple it essentially just runs a loop for every item in that array and returns that item that’s in the array so then we have some logic that’s based

On the page change stuff so we want to check we want to check what buttons were pressed and we only want to check that when the page change is zero and that’s because if you change pages the way that you check for button presses might detect a button press when the buttons

Were just loading in so if we go into the function for button you’ll see how it checks for buttons and it’s kind of rudimentary but it’s very effective so essentially we have a button score and the button score is set to zero and then we check if there is

Not an item at slot 11 so if there isn’t an item here which means i clicked it because if i click it there will not be an item there then set the button score to 1 if there isn’t an item at slot 15 set the button score to 3.

Okay so that will basically mean you can only click one button and it will check which button you pressed and it will only allow one input because the score will if both are true then it will just do the bottom one okay so then based on which button was

Pressed we’re changing the page value so this changes the page score if you change the page score that means it’s going to try and change the page and then finally if the page score is not the one that you’re currently on this is page zero so if it’s not zero then

Turn on the page change flag and refresh the ui which basically runs the entire set of functions again that were inside here a second time and then finally if the page is still the same so it has not changed if you’re still on page zero then run the mask

Function and this is kind of the last thing you run inside of a new page is the mask function and it’s basically putting it’s removing all of the items from the ui and putting all of the applicable items that go where they’re supposed to by default so

Here is slot 26 where you put the display and here are the three buttons that you place just like that so it’s kind of like your default buttons and you’ll include the null 1b so that’s how you do inputs like custom button pages like this right

But now we have to go to a vending machine because this one actually shows the only other important thing which is on page changes and input output behavior so i put an input i get an output i put multiple inputs i can shift and get multiple outputs i

Put inputs and i change it and i get that and it also covers allowing people to put things in the ui so inside vend that’s where it’s a little bit more messy so if you have something that has inputs and outputs you’re going to want to copy the vend folder

So that you have kind of the framework for things that do inputs and outputs so this is how you detect whether they are shift clicking or regular clicking you can go through the commands yourself but it essentially cop figures out how many output tagged items are in their

Inventory how many output tagged items are in their inventory and the thing that they have clicked because when you click on something clear can detect that but when you click on something the it’s not in the inventory and then it basically compares those values to determine with either

One or two whether they are clicking or shift clicking because if they’re shift clicking then these two values will be the same if they are normal clicking then this value will be one some value higher than this value okay so then it gets rid of all the

Buttons as usual and this is where the return function gets a little bit special so we the items that we decide to return to the player are everything that isn’t a button and isn’t in slot 11 because you don’t want to return things in slot 11. so

That’s why when i go ahead and put some drip stone here it returns it to me when i put it here it doesn’t return it to me all right and finally we run the return functions just to give things back now this is where the logic kicks in

Where it’s is a little bit more complicated so we run the buttons first check the buttons then we check the load and then we check the buy so the buttons is similar to before except there’s some nice new buttons so one of the buttons is a back button and

That’s what button id 1 does so if you run button 1 it just sets the page to 0 which takes you back to the main menu but if you run 2 or 3 if you run 2 it will add 1 to the index if you run three it will remove one from

The index and if the index is betw past the range it’s supposed to be in it kind of locks to the top or bottom so if it’s less than negative one then it lock puts it at three and if it’s greater than four it puts it at 0 to make kind of a

Circular value so the value just counts 0 1 2 3 4 0 1 2 3 0 1 2 3 or 3 2 1 0 3 2 1 0. and then the other thing we need to do here is we need to set the page change if you are not on

Page three because this is page three and we need to refresh if you’re not on page three this is something most people forget i like i personally forgot to change this when i was implementing my own pages so make sure that this value changes to the page that you’re on

Okay so now let’s take a look at what loading does so inside load we essentially remove the previous load value this is basically what items we want to load into the ui that’s what that means so we check if there is a gold ingot in

That slot then we truly want to load and this logic for like a crafter would be way more complicated if you’re trying to implement a crafter good luck it’s way more complicated you need to check like all the different combinations that could be there and if you find the right

Combination that matches then you decide to load but anyway so some kind of logic happens and when the logic is done and it’s true then we decide okay we’re good we’re officially loading this thing so when we officially load the thing we make sure that index has at least some

Value on it so we add zero and then we figure out which thing we’re trying to load here so if the index is zero we copy this item we basically place this item mbt onto the load okay and it’s the same mbt just different potion types

Note here that null 1b is still present because this is a button but we also have an extra mbt of output meaning this is a button that they click that will detect output it’s a special button that you’re looking for being clicked and this output flag is used in your

Detection of your shift versus left click you don’t detect shift versus left click for regular null because uh regular buttons don’t need that behavior okay so now we after load we run buy so buy is checking if we’re trying to buy something so we check if the score is

One and if there is still a gold ingot there because you want to just you want to ensure that if they are going to buy this thing they definitely meet the criteria so you don’t have any glitches or exploits then we will buy one because if

The i o score is one that is a click if it’s two it’s a shift so if it’s shift you buy all so under buy one we do a couple spicy things here so we remove one which is a item modifier and when we remove one it removes one

From the count see just remove one and we remove one from the item that is in the slot so it will take away one gold ingot and then we essentially copy the item that was loaded from this function so we copy this item and we remove the slot we set the slot

To zero and we remove the ui that indicates that it’s a special item because we want to just give a player the genuine item and then we loot give it to the player so we just copy it to the shulker box and we give it to the player then

So then we stored how many gold ingots are left and if there is uh only one gold ingot left then we’re just going to remove the load data so this basically means that if in this frame there was only one right and i click it it will remove the load so it will

Not display that item it won’t display it inside the mask okay cool so that’s buy one and then we have buy all by all is slightly different you would think it’s worse but it’s actually way easier so we go into vending and we go to buy all so we basically just remove

Whatever is at slot 11. uh we we copy the count of whatever as at slot 11. so how many we copy how many golden gets there are on to the item that we’re trying to give back we set the slot to zero we remove the ui and we

Give it back and then we remove slot 11 because you took everything and then we removed the load storage because we’re not we don’t want to load that item anymore because it was purchased okay so then the final step is to run the mask if you’re on the same page so the mask

Is going to be the same as before input your custom items right but we also have some extra nuance here with the input slot so we copy we we basically copy what is that slot 11 onto a data storage okay and then we check if whatever is in there is some kind of

Null like if there was a button in there for some reason then we just remove it we’re like ignore that guy but if it is still on that slot then you are going to insert it so you’re kind of actually copying from tick to tick and propagating this item

So the item that you see in here is actually every tick is being copied and put back well every time it refreshes it’s being copied and put back even though you don’t see it change uh and then you all and then this line loads whatever was on load and since

Load has a slot of 15 it’ll just put the thing in slot 15. and then we have regular masking stuff and that’s it so that’s kind of the entirety of how this data pack works probably took way longer than i wanted maybe 30 minutes or so but that kind of goes through everything

And you can kind of play with it and try and make your own pages uh using this framework now if you want to use something that is not the barrel or the chest like such as the minecart the logic is exactly the same that’s that’s the cool part the logic that you

Have to change inside these pages is pretty much exactly the same the only difference is if you go into mask it uses item replace entity instead of a item replace block okay so that’s really the only difference is it’s item replace entity and it’s data remove entity instead of data remove block that’s

Really the only difference and all the other stuff is already handled there there’s some interesting uh kind of logical stuff that goes on so the way that the chest minecart works is it uses a resource pack that i got from uh misod and the resource pack essentially does something very simple

It makes minecarts invisible so my cards are invisible but it creates a custom 3d model of a minecart that gets put inside the tile offset of minecarts so the one caveat that like the one problem or not compatible thing about using the chest minecart system is it essentially

Will make it so you cannot use tile blocks for your minecart so you can’t put a tnt inside of a minecart unless you’ve already loaded it if that makes sense and i’m sure that you can figure out how to get back to using it but it essentially

If it finds a mine cart then it puts a chat uh it puts something in the mine cart so i’m sure you can find a way to use it again like to mess with the models but it could be annoying if you’re doing that for some reason but

It’s pretty rare that you actually do that so if i do summon minecart you’ll notice that there is a minecart there but you will also notice that there was a little tick like a flash depending on my frame rate capture rate where it was not there and that’s

Because this is actually a 3d model of a minecart not an actual minecart so then when i summon a minecart that has a tag of invisible it will not apply that 3d model and thus it will the minecart will be invisible and that’s how you hide the chest minecart uh so anyways the

Actual code is a little bit different because you’re spawning this thing and teleporting it to the player that owns it so i just look for the mbt that has this custom tag and i go ahead and spawn this thing so i this just gives me a compass with an mbt of ui 1b

And when i have it it will spawn the thing and actually i forget this but it has to be added s and we’ll just reload that so it’s a little bit better there we go so it spawns it at me and then when i right-click it will just anywhere it’ll

Just open the ui because it’s in there’s a minecart in my head you can see the shadow and then essentially it’s very similar logic except uh i have this extra line down here that is applied to minecarts that are not invisible and then i have this extra logic which

Basically closes the ui so it kills the my card when you’re not holding it okay so all of the code is the same you’re just using a different path when you’re setting items you’re not using item modify and block you’re using item modify entity

Uh but a lot of the logic is the same then for enter chess enter chess have their own kind of special handling system so if i have stuff in my under test well that’s a problem if i want to use the ui so basically it copies that

Those items to a button on my head with a specific cursive binding enchantment level and then when i look away it takes that off my head and puts it back inside my ender chest and you i already set up all the code so you don’t have to worry if i put a

Custom helmet on my head and use the ui it won’t it won’t put a button and everything is completely restored all of the tags are removed that are special so it kind of handles all that for you and again instead of using masks uh instead of sending the masks to the

Block items you’re sending it to the player ender items and the some other things are a little bit special like for example to completely clear everything you can’t use data remove because it’s the player so you have to set every single slots to air if that makes sense so inside your page structure

Let me show you the differences here so if we go inside the vending page structure and i go to mask you’ll see the mask is a little bit more complicated because you have to replace app p tag equals this so you have to replace the player and you have to

Replace you have to go to the player and you have to replace their ender chest slots and you have to run the function clear instead of that remove and that’s really the only differences anyways guys so that is kind of the whole framework i’m actually i know that

Maybe if you’ve gotten to this point of the video you’re really interested in using this framework um or maybe you just like watching my videos i don’t know if those people exist but i have been working on a website potentially that i may put together that kind of

Does all this for you for basic ui cases in terms of click button and it will run whatever function you inputted similar to like an advancement how an advancement runs a reward function i just wanted to put out this video before i even go into making this website because

Even if i do have the website it’d be nice just to have an explanation of how to do this sort of thing because if i make a video on the website it’s not really going to cover all the in-depth code of how the thing works

But i do have the start of a website working so you see i have this menu right and when i hover my mouse over the slots it changes it highlights just like in game and when i left when i right click it will pull up a little mini menu that doesn’t do anything

Important yet but it overlays it onto this slot so i want to make it so that when i right click it will do like a little animation so it’ll like do a little animation for a menu and it would have like buttons and input that you can do for each of

The different spots and then it would just generate a data pack for you and this would basically work for anything like uh if you’re making like a server or some kind of like if you’re trying to say recreate skywars you could or high pixel bed wars you could recreate

Their bedwars shop uis actually pretty i like i want to make it so you could recreate them using this website generator anyways guys if you’re interested in seeing more make sure you subscribe like the video and i’ll see you next time peace