DUST2DEATH Posted February 7, 2017 Share Posted February 7, 2017 This aims to cover building a GUI (Graphical User Interface) for anyone who may be interested or curious. I will cover the following 5 sections. I will keep it simple. 1. Elements 2. Design 3. Positioning 4. Building the GUI 5. Implementation ELEMENTS Sprites Sprites are the main meat and potatoes of the UI. They are used everywhere. Backgrounds, fill bars and iconography. A sprite in its most simple form requires no imagery (background, fill bars). Used in iconography (and if you want fancy fill bars) they require the image reference from either the vanilla atlas, or imported at runtime. Using Image Based Sprites that arent from the vanilla atlas require client end installs. If you are aiming for a entirely pushed UI for multiplayer usage, you must avoid using image based sprites included at runtime. (this has its own set of challenges) Textures Textures are a image you can included locally, or via a url reference. If you are aiming to make a push based UI, you will focus on textures and use basic sprites. Trying to include to many online hosted textures, will cause the game to lock up on load. You will not load the main menu. You will have to force kill the process. Avoid this. If you must have a large amount of textures, you must have them local to the client. Client end installs are thus required. Labels Labels are the alphanumerical values you see on screen. the words, Day, Time, fill bar values (health/stamina), Item Stack values etc. DESIGN you know what your elements do, now its time to get that UI out of your head and onto paper/digital. I find it best to sketch out your initial design on some paper, or screenshot the vanilla UI and roughly sketch in paint/photoshop/gimp etc. At this point, you want to also define your UI element sizes. For example. The vanilla Toolbelt grid is 75x75. From knowing the cell size we know the following: toolbelt main width is 600px. cell size is 75px high. 75px wide. once you know your cellsize, you can determine your item stack dimensions. This includes (for the toolbelt): item icon item stack value durability fillbar assemble icon hover sprite lock type icon. Vanilla also uses sprites for the durability background. If you are making a GUI, these are optional to use. You can position used items you dont want offscreen pos="9999,9999". Some lines you can delete or comment out entirely. (NOT ALL!!!) Write these values down with your sketches so you have a handy reference point. All dimensions, for all elements must be known before proceeding. POSITIONING Now you know how you want your GUI. You know the general layout you want, as well as the size of all your elements. At this point, we need to make sure we can achieve what you want to achieve. Sometimes things dont work out how you expect and you must adjust. Start positioning your elements where you want them. Get them into the general area on screen, and positioned roughly. see here for more information about positioning ui elements: https://7daystodie.com/forums/showthread.php?57277-DUST-s-UI-HUD-Collection-REQUESTS&p=561078&viewfull=1#post561078 You must restart the game entirely after each change you make. Doing this now, will save you time and frustration in the next main time consuming step. Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 BUILDING *I will use Guppy's Wasteland UI as the example through out this step.* First thing you want to do is start on the toolbelt OR Compass first, as they are the most involved, always on screen constantly and up front and centre. If these look bad, it will drag the rest down with it Make a new project in your image editor of choice. I recommend Photoshop if you can afford it (they have cheap $11p/mth subs) or gimp Make your canvas BIGGER than you need it by a factor of 2 or 3. You are going to want this space. Start by making a basic rectangle in a flat colour and use the rulers to define your grid area. Gup's UI has the food and water on the side of the toolbelt, so we include this in our initial ruler setup. Gups toolbelt slots are 60x60 so our beginning rectangle is 480pxW x 60pxH There is a natural 2px run between each grid item. Use the marqee tool to select a 2pxW x your height, center on the rule, and delete. You will end up with something like the below images. Now we add the background for the food and water bars. Whats that? my background is off? Doesnt matter! we know the widths of the elements and that is all that matters. Add the stack value location(s) err..need to kill the space, so we need a background Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 right, border! Now in this design the border here serves a dual purpose. The spikes on the side are roughly around the 50% of the fill bar marker. This gives us a decent representation of how full you are, without the need for the label. as you can see, we now have the base of our toolbelt designed. It looks like a blob of grey. Time to make it pretty. From here, I suggest you start making groups in your editor to help switch all the layers on/off for a group as required. (border/itemstack/toolbelt/foodwater are the groups I have) How you move forward from here, is entirely up to you and your creative process. my toolbelt border is only 3 layers. (technically 4, read on) 1. the background flat colour as shown earlier. second layer is the bottom of the grid dividers shadowing. 3rd layer is just a metallic textures overlay. Again still working with flat colours, we make the bordering for the food and water fill bars. This includes bevelling, stroke etc. next we add the rust layer, icons and the glass layer. Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 Finally, depth to the fillbar, we bevel the background "down"(inwards/towards the background), add shadowing. if you are curious the fillbar background by itself, this is what it looks like. at this stage we have completed the border and the food water fill bars for the toolbelt. Together, it looks like: Remember the item stack value section earlier. just a massive blob of grey. we add a metallic layer. then a rust overlay flat and ugly right? Add some simple shadowing and bevelling and it starts to look better Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 still a bit flat looking over all. The stack values, and the bar itself Id like to be more rounded. we add a highlight to the metallic layer (img 16) as well as recessing the stack value tabs with a highlight towards the bottom to offer a "glow" effect. From flat to 2.5D. it makes such a difference! After repeating for the next 7 tabs, we have our stack value tabs completed. the 3 groups together look like: now we add the main toolbelt background back in. that looks uh, eww some simple shadowing will fix this. Much better, but its still not right. Lets get that top section of the dividers, and clean up the border itself. Add some bevelling, highlight and stroke. (that pesky 4th layer from earlier) Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 We need to now split this image into its true groups for use. Generally this will become a sandwich. The image needs to be broken down into the underlay and overlay's Identify your layers. Know which ones will be under, which will be over. Turn them on and off, merging visible as necessary. You should end up with the following: Under Over You need to then export these images to a much smaller canvas before saving. Ideally you want the canvas to have up to a 5px margin around the image. If at any time the image touches an edge, it will wrap. Here is the completed over This is the one referenced when you use the mod. The margin you might notice doesnt exist at the top. the points of the top spikes barely touch the boundary and arent noticeable at the bottom of the toolbelt. See rifle icon on completed toolbelt. The butt of the rifle at the bottom boundary is causing the line at the top of the icon. IMPLEMENTATION Now you have your image seperated into layers. We add it into the game. To implement the toolbelt we will be dealing with 4 things. The background image (the under) - Texture the Fillbars (middle) - Sprites Toolbelt main (the over) - Texture Item Stack. - Sprites/Labels The first 3 are in windows.xml, the last is controls.xml. If you are using different dimensions than vanilla, you need to make a new itemstack for the toolbelt itself. (see below) here is the code for Gup's UI toolbelt, windows.xml <window name="windowToolbelt" width="603" height="78" anchor="CenterBottom" pos="-240, 87" controller="ToolbeltWindow" visible="{toolbeltvisible}"> <texture name="ItemMiddle" depth="10" size="550,114" texture="@https://i.imgur.com/gs5LIsB.png" material="Materials/Transparent Colored" pos="-35,22" /> <texture name="ItemBackground" depth="1" size="531,77" texture="@https://i.imgur.com/wi8mVvY.png" material="Materials/Transparent Colored" pos="-26,13" /> <sprite depth="2" pos="-27,10" name="FoodFill" color="52,174,86" type="filled" filldirection="vertical" height="72" width="20" fill="{playerfoodfill}" controller="PlayerStatsWindow"/> <sprite depth="2" pos="480,10" name="Waterfill" color="52,137,167" type="filled" filldirection="vertical" height="72" width="20" fill="{playerwaterfill}" controller="PlayerStatsWindow"/> <grid depth="2" name="inventory" rows="1" cols="8" pos="0,8" cell_width="60" cell_height="60" controller="Toolbelt" repeat_content="true"> <toolbelt name="0"/> </grid> </window> in the above code: ItemMiddle: which is actually the main toolbelt image (over). Why middle and not over? because the item stack sits on top! this has a depth of "10", it could be 3 if you have super bad OCD, but as long as its on top of everything else it doesnt matter ItemBackground: this is the under, depth of "1", push it to the very back. we then have the 2 fillbar sprites, depth of 2. (above the under) And finally the itemstack (grid) with a depth of 2. make sure its above the background. We are using a online reference for the textures, as this is a push UI. See below for how to reference a texture or sprite. Here is the itemstack code in controls.xml where we made a new itemstack for the toolbelt. <toolbelt> <rect controller="ItemStack" style="toolbelt, hover"> <sprite depth="3" pos="2,5" name="background" sprite="menu_empty3px" width="56" height="5" color="[darkGrey]" type="sliced" globalopacity="true" fillcenter="false"/> <sprite depth="4" name="itemIcon" width="60" height="40" atlas="ItemIconAtlas" sprite="{itemicon}" pos="30,-30" pivot="center" foregroundlayer="true" color="{iconcolor}" /> <sprite depth="8" name="lockTypeIcon" width="24" height="24" sprite="" pos="2,-2" foregroundlayer="true"/> <sprite depth="2" name="highlightOverlay" width="1" height="1" color="0,0,0,1" pos="30,-30" type="sliced" pivot="center" /> <sprite depth="3" name="durabilityBackground" width="50" height="10" sprite="menu_empty3px" color="[darkGrey]" type="sliced" pos="5, -50" foregroundlayer="true"/> <sprite depth="4" name="durability" width="50" height="10" sprite="menu_empty2px" color="[transparent]" type="filled" pos="5, -50" foregroundlayer="true"/> <sprite depth="5" name="disabledOverlay" width="60" height="60" color="[darkGrey_half_alpha]" pos="1,-1" type="sliced" visible="false"/> <label depth="7" name="stackValue" pos="8,-67" width="40" height="28" text="{itemcount}" font_size="24" effect="outline" justify="center" /> <label depth="7" name="timer" pos="30,-30" width="60" height="24" font_size="24" justify="center" pivot="center" effect="outline" color="[beige]"/> <sprite depth="9" name="cancel" sprite="ui_game_symbol_x" width="60" height="60" color="255,0,0,255" type="sliced" visible="false" foregroundlayer="true"/> <label depth="12" name="itemName" pos="0,0" width="0" height="0" text="" font_size="26" justify="center" overflow="resizefreely" effect="outline"/> <sprite depth="13" name="assembleIcon" size="40,40" sprite="ui_game_symbol_lock" visible="{isassemblelocked}" pos="14,-14" foregroundlayer="true" /> </rect> </toolbelt> As you can see above, the depth layers go from background to the very top layer, starting at a depth of 3. (remember the depth of 10 before on the over) Most of this code isnt used on the toolbelt. All you really care about is the Icon's (item, lock,assemble), the stack value, durability and the hover (which is listed here as background. You cant change this name. You can change the sprite used, it must be image based) Put it all together, and you end up the end result: Repeat this process for any other UI element you wish to make, 1 item at a time. IMAGE REFERENCING Any local requirements necessitate that you setup the local mod folder. this requires you first make a Mods folder in your root 7 days dir. Second, create your mod folder name. Third, create this xml file, it must be named ModInfo.xml and fill in the values. <?xml version="1.0" encoding="UTF-8" ?> <xml> <ModInfo> <Name value="" /> <Description value="" /> <Author value="" /> <Version value="" /> <Website value="" /> </ModInfo> </xml> Make a folder called ItemIcons inside your mod folder [\Mods\Yourmod\ItemIcons] Make a folder called Textures inside your mod folder [\Mods\Yourmod\Textures] Place your images into these 2 folders. Textures can be named anything. Can be any size. Sprites must be named [yourmodwhatever.png] They must be 116x80 in size, no exceptions. textures: @file:Mods\Yourmod\Textures\image.ext <texture name="ItemBackground" depth="1" size="142,52" texture="@file:Mods\Yaui\Textures\statbarbg.png" material="Materials/Transparent Colored" pos="5,204" /> @url <texture name="ItemBackground" depth="1" size="142,52" texture="@https://i.imgur.com/gs5LIsB.png" material="Materials/Transparent Colored" pos="5,204" /> sprites: atlas="itemiconatlas" sprite="yourmodspritename" <sprite name="BarContent" depth="7" height="25" width="77" atlas="itemiconatlas" sprite="yauifoodfill" type="filled" fill="{playerfoodfill}" controller="PlayerStatsWindow" pos="62,190" globalopacitymod="2"/> I hope you found this useful. (does not cover more advanced technique's, maybe later) Link to comment Share on other sites More sharing options...
xXC.H.U.DXx Posted February 7, 2017 Share Posted February 7, 2017 YES!!!!!!!! Link to comment Share on other sites More sharing options...
BeatKidz Posted February 7, 2017 Share Posted February 7, 2017 Amazing Resources here. Great Job man Link to comment Share on other sites More sharing options...
naterz98 Posted February 7, 2017 Share Posted February 7, 2017 Awesome job. Now if I can figure out how to follow it all..lol. One question on if I want to change the position of say the quest tracker. I found a mod that allows you to view 4 at once. Haven't tried the mod just read the description. Looks like he has them anchored in the 4 corners. is it possible to have them lined up say down the right hand side one below the other? Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 7, 2017 Author Share Posted February 7, 2017 Thanks I wasnt sure how to approach it because I dont know what it is you have in your head as such. Given its such a personal/creative thing there is no way for me to tell you specifically how to do something. (other than how positioning/depth layers etc work). I figured the easiest way was to show and explain how i built the toolbelt. Ive tweaked it a number of times since yesterday after reading and adjusting as I thought of more. It most likely will continue to grow some. Awesome job. Now if I can figure out how to follow it all..lol. One question on if I want to change the position of say the quest tracker. I found a mod that allows you to view 4 at once. Haven't tried the mod just read the description. Looks like he has them anchored in the 4 corners. is it possible to have them lined up say down the right hand side one below the other? I can only assume atm -- The quest tracker (if you are referring to zompact) has 4 locations you can choose to have it pinned to, not 4 trackers on screen at once. The quest tracker windows are dynamic. (like loot/storage windows), and scale depending on the amount of content placed in them. Link to comment Share on other sites More sharing options...
naterz98 Posted February 7, 2017 Share Posted February 7, 2017 I can only assume atm -- The quest tracker (if you are referring to zompact) has 4 locations you can choose to have it pinned to, not 4 trackers on screen at once. The quest tracker windows are dynamic. (like loot/storage windows), and scale depending on the amount of content placed in them. Glad I asked...lol. I took it to mean that you could show for different quest at once. Knew it couldn't be that easy. So with zompact I can pick which corner I want the one in and use that one. Thanks for getting back with me on this. Learning this can be frustrating but I am having a blast and looking forward to the finished product. Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 8, 2017 Author Share Posted February 8, 2017 No Problem. Easiest way to learn is dive right in. If you have any questions feel free to post in whichever thread you find is relevant to your question. Link to comment Share on other sites More sharing options...
Gipothegip Posted February 9, 2017 Share Posted February 9, 2017 I thought you needed something like SDX to use custom textures. So you can actually reference a texture as far as GUI goes? All you need is to set up a mods folder, or a link to a file hosted on the internet? I thought you needed to hard mod to do this sort of thing. Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 9, 2017 Author Share Posted February 9, 2017 So you can actually reference a texture as far as GUI goes? All you need is to set up a mods folder, or a link to a file hosted on the internet? Correct. Link to comment Share on other sites More sharing options...
xXC.H.U.DXx Posted February 10, 2017 Share Posted February 10, 2017 I love this Post Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 11, 2017 Author Share Posted February 11, 2017 I love this Post hahahaha, thanks. I assume you found something of use. Link to comment Share on other sites More sharing options...
Indoorsman Posted February 12, 2017 Share Posted February 12, 2017 Good stuff, good stuff. Link to comment Share on other sites More sharing options...
xXC.H.U.DXx Posted February 13, 2017 Share Posted February 13, 2017 hahahaha, thanks. I assume you found something of use. I did..then somebody Beat me to it (made the same UI i wanted to build) so now im Building a different looking one ---------------------BeatKidz if you see this,your Inbox is full--------------------------------- Yeah.....Funny part is i was told about this line also that i had to do it in C# <property name="AITask-1" value="Follow" param1="EntityPlayer" /> but i just looked it up on a another Unity Game and it worked...lucky me it was the same one that could be used here What would the Command be? give me an idea of what it would look like Link to comment Share on other sites More sharing options...
Quasimiyao Posted February 14, 2017 Share Posted February 14, 2017 Hey Love your work on this guide, exactly what I need as I am trying to merge some mods and ui parts and stuff atm. I have a question tho. The text that pops up over the toolbelt telling you that you gained a lvl, gained/lost wellness and so on, what is that called? And is that in the windows.xml only, or need any other file editing aswell? If that kind of text even is part of the ui in a way that can easily be changed. I would just like to move it a few pixels up, as it gets halfway blocked by the toolbelt the way I have the ui set up now. Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 14, 2017 Author Share Posted February 14, 2017 Hey Love your work on this guide, exactly what I need as I am trying to merge some mods and ui parts and stuff atm. I have a question tho. The text that pops up over the toolbelt telling you that you gained a lvl, gained/lost wellness and so on, what is that called? And is that in the windows.xml only, or need any other file editing aswell? If that kind of text even is part of the ui in a way that can easily be changed. I would just like to move it a few pixels up, as it gets halfway blocked by the toolbelt the way I have the ui set up now. To remove the text entirely you need to edit the dll. You can edit the localization files to remove the text lines also. From Carmudgeon: an example, to remove all the buff info above the tool belt do a find and replace all of: Find What: Tooltip,buffs,Buff,,.*,, Replace with: Tooltip,buffs,Buff,,,, use the RegEx function in Notepad++ and make sure the .matches newline option is unticked Alternatively, in XUI.xml you can adjust the scale to something closer to 1:1. try 1.200 as it will give you more usable screen space. <ruleset name="default" scale=[color="#FFFF00"]"1.200"[/color] stackpanel_scale="1.05"> Link to comment Share on other sites More sharing options...
Quasimiyao Posted February 15, 2017 Share Posted February 15, 2017 To remove the text entirely you need to edit the dll. You can edit the localization files to remove the text lines also. From Carmudgeon: Alternatively, in XUI.xml you can adjust the scale to something closer to 1:1. try 1.200 as it will give you more usable screen space. <ruleset name="default" scale=[color="#FFFF00"]"1.200"[/color] stackpanel_scale="1.05"> First of all thx for helping. But I dont want to remove the text. So I guess there is no way too move the text a little bit upwards? even if I increase the scale, the text is still halfway blocked. I can reduce the scale tho, but that kinda defeats the purpose Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 15, 2017 Author Share Posted February 15, 2017 First of all thx for helping. But I dont want to remove the text. So I guess there is no way too move the text a little bit upwards? even if I increase the scale, the text is still halfway blocked. I can reduce the scale tho, but that kinda defeats the purpose scale="1.000" is 1:1 pixels if you are working in photoshop. Anything else is "zoomed in". Link to comment Share on other sites More sharing options...
Quasimiyao Posted February 15, 2017 Share Posted February 15, 2017 scale="1.000" is 1:1 pixels if you are working in photoshop. Anything else is "zoomed in". Never thought of it that way. Good point. But, I did test changing scaling before asking about moving the text, and everything scales, including the text. So unless I make it way smaller, the text will be hidden somewhat. It's not a big issue, it just bugs me that it looks wrong Link to comment Share on other sites More sharing options...
DUST2DEATH Posted February 15, 2017 Author Share Posted February 15, 2017 Never thought of it that way. Good point. But, I did test changing scaling before asking about moving the text, and everything scales, including the text. So unless I make it way smaller, the text will be hidden somewhat. It's not a big issue, it just bugs me that it looks wrong how big is whatever you are working on? You gain a significant gap between the top of the toolbelt and the bottom of the text at 1.000, but yes, everything scales. Otherwise the only way to achieve what you want is to edit the dll. Link to comment Share on other sites More sharing options...
jdub Posted February 16, 2017 Share Posted February 16, 2017 Simple GUI changes Hi I was hoping you could help me with a couple of questions I have. I currently have food/water bars to the right of my health/stamina which I like; however, I would like to have just the sprite with a % instead of an entire bar. Would you be able to kind of point me in the right direction of doing so? I would also like to have some similar sprites like elevation and map coordinates at the top near the compass. Would this be as simple as copying the code for the health/stamina making changes to loose the bars and use the appropriate calls for things like elevation and then finding and inputting the right coordinates? Love your work, Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.