welcome to a series about roblox ui libraries um i am deity maybe you know me maybe you know you don't uh i i created the shut up siri i created the mercury ui library with abstract you might know us if you do hi if you don't you anyway so i'm gonna be trying to show you the basics of creating ui libraries since there are no to-date tutorials or if they are if there are they're if they're not you anyway um we're just gonna go right into it so what is a ui library it's very simple you just create some ui elements that you can always reuse in your code without having to rewrite the entire code for its behavior it's very cool very awesome especially if they look good like mercury or [Music] i don't know pepsi's ui library looks trash in my opinion but whatever uh yeah so let's get right into it first we're just going to create a simple screen ui you can name it what you want i'll just name it my library for the sake of the tutorial and we're going to add a frame in it and we're going to call it main now this will be if you can if you could tell this will be our main frame that's going to hold basically everything so what i like to do in the start uh let me just change the view here so just go on the frame change the anchor point to 0.5 and the position to 0.5 0.50 i'm not like that i'll explain what this does in a bit and change the size to like 400 and 300 okay so we have our basic window outline for our ui library so what this does anchor point is basically where the position of the window starts say anchor point is at zero zero that will be top left and then so we set it to zero zero so it's top left the point you can see this like white square behind the resizing square so if we set the position to 20 pixels offset not 200 it is going to [Music] be off 20 pixels at this top left corner now if we set it to 1 and 0 it's going to be top right and as you can see it's going to be 20 pixels to the right from this top right corner and if we set it to 0.5 and 0 it's going to be in the middle plus 20 pixels that we set in the position so how does this concern us very simple you can use it to position your ui by setting both anchor points on the x and y axis to 0.5 and then setting the position to 0.5 in scale now what is scale and offset if you're a and don't know yet scale is the percentage of the of the screen so if we have one it's going to be to the far right if you have 0 it's going to be to the far left and 0.5 is obviously going to be the middle and offset is the screen size 1920 is somewhere out here 500 is like over here 200 is over here so basically these are pixels now i have to warn you never work with your mouse okay only if you're positioning this mainframe if you're like moving it out of way it's fine other than that do not use your mouse it's going to mess up the size the position and everything okay you have to learn to work with the property window that's very important okay so now that you understand the basics of positioning i'm gonna give you a few more examples later on but this is enough for now we're gonna carry on so i'm just gonna make this background dark because who doesn't like dark mode okay and i think i'm gonna add some corner what this does it makes the ui corners round obviously i like to go with six usually because it's not too much and yeah so this is already looking much better than before now if you want a stroke you just add the ui stroke obviously do not use the [Music] um what's it called border thing border size pixels do not use that as trash use ui stroke make sure it's border otherwise it might affect some text and we can just change the border color as you can see uh i'm not going to be using any border for the main frame because that looks gay you usually just want to use um a shadow i wonder if i have shadow plug-in yes i do this sorry my throat is a bit dry because i'm sick so i'm just gonna plop in the shadow this shadow plugin is um usually i would use my shadow plugin but it's gone because roblox is trash and yeah now you can see why it's trash can't even see it gg uh hold on let's try that again 15. shut up dude okay this is clearly not working because it's uh yeah i'm gonna try and find my plug-in be right back okay we're back and i found my plug-in um it's gone from the marketplace i don't know why i'm just going to install it yeah so if you want to get this i'm going to link it in the description probably if i don't forget very good plugin created by me like years ago yeah i hope it works save this and switch over to this go back in okay we're back and roblox is loading there we go so we're gonna go back to this frame i'm gonna add my shadow now before i do that make sure that your z index behavior on the screen gui is global why because otherwise the shadow is going to be broken also global z index behavior is better because it's easier to use layering using the z index what is a z index it's deter it determines what layer the frame is going to be on if if i have this frame and another frame which i'm going to add right here if this frame has a smaller z index and this frame it's going to be behind now how do i show this well i just set the z and x to minus 1. now this frame is behind if i offset the position a little you can see it's behind anyway back to the ui i'm just going to add a simple shadow right there boom looks much better much less gay okay continue [Music] um yeah so we have our we have our basic outline now it's time to start adding stuff usually you want to add a top bar so i'm going to do that real quick i'm just going to use a frame call it top bar now this is where sizing comes in handy normally a dumb ass would do this what happens when you do this let's resize oh oh what happened well you're so what you want to do is size it to one for the full length of the frame and then zero for like no no offset pixels we don't want any extra pixels and then we're gonna want zero in the scale because we want it to always stay the same height and we're gonna have like 20 pixels and no one zero zero twenty uh 20 is too little how about 30 that's looking better now what is the difference well you can resize it it's always going to stay the same your progress let's go now we want this to look good so how do we make these corners around the top ones but these bottom ones not well we take the ui corner paste it in now it's round but we still have these bottom gate corners so what we do we put in another frame remove the border now this is where anchor point comes in handy since we want this frame to always be at the bottom we're going to use anchor point 1 on the y-axis and now i can set the position to 1 on scale and it's always going to be in the bottom it's going to size from bottom so if i change the size to 1 on scale for full width and like 0.5 for half the height boom it's always going to stay half the height it's always going to be in the bottom it's going to stay perfect now we're just going to recolor these to like our theme color um let's go with a nice color here blue why not there we go this color is let me take a different one i'm gonna go with i am sorry about that i am back and um i have my color looks pretty good okay so now that we have the top bar what is inside the top bar um usually the title and the exit button or whatever so we're just gonna put in a text label usually what i do is i set the size to 1 0 sorry 0.5010 and then you set the text x alignment to left and you add a ui padding element inside of this and you set the padding left to like four pixels four is too little let's use eight and make the background transparent so what is this padding gonna do it's gonna offset the text so it doesn't look bad and i'm gonna call this title make sure to always name your elements so you don't add like a dumb ass later when you're scripting it and yeah so now we're gonna choose a font i usually use ubuntu because it's the best font but it doesn't really fit this style [Music] um i think gotham fits more and i'm gonna make it white and put ui library there you go now as you can see it's kind of off so i can just take some minuscule changes add padding to the top there we go and now we're gonna have the controls so the controls are usually images so what are we gonna do we're gonna add two images i'm only gonna do one because i'll just have a exit button now since this has to be on the right i'm just going to change the anchor point to one and the position to one now it's on the right very simple um i'm going to change the size to 1 on the y-axis and 0 in the offset so we can see it's 30 so i'm just going to change it both to 30 in the offset and there we go now if we were to do it just like this it would look trash because there is no border so we're gonna have to tweak this a little so we're gonna have to add like offset over here minus eight maybe maybe that's too much now this is all design you don't really have to do this but i still do it because i have autism and stuff like this triggers me yeah there we go much better now we're gonna make the we're gonna call it the exit button now notice it's not a button that's because we're going to script the button behavior ourselves because roblox buttons are bad i'm going to make the background transparent and i'm going to use this cool icon plugin uh i need an x bro cross no jesus dude ah okay dude i'm just gonna go with minimize then whatever yeah so as we can see this looks trash so i'm gonna make it even smaller maybe six now it's not centered so how can i center it i'll just set the anchor co jesus the y anchor point to 0.5 that means that y axis midpoint is going to be at 0.5 and set this position to 0.5 then we don't need this and now it's always going to be centered that looks much better and yeah then this is going to be minimized and i'm going gonna have some type of unload ui thing or something yeah so we have our basic frame done um it's not that hard just need some time to figure out what you want and yeah we're gonna get to the scripting part now just creating the base like script that we're gonna use later