No announcement yet.

[TUT] GUI's and You - Elements/Design/Positioning/Building/Implementation

  • Filter
  • Time
  • Show
Clear All
new posts

    [TUT] GUI's and You - Elements/Design/Positioning/Building/Implementation

    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


    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 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 are the alphanumerical values you see on screen. the words, Day, Time, fill bar values (health/stamina), Item Stack values etc.

    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.


    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:

    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.
    Last edited by DUST2DEATH; 12-26-2018, 10:04 PM. Reason: Title test Xyth


    *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

    Last edited by DUST2DEATH; 02-07-2017, 06:15 AM.


      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.
      Last edited by DUST2DEATH; 02-07-2017, 04:24 AM.


        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
        Last edited by DUST2DEATH; 02-07-2017, 05:47 AM.


          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)
          Last edited by DUST2DEATH; 02-07-2017, 05:48 AM.


            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:


            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.

            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="@" material="Materials/Transparent Colored" pos="-35,22" />
            		<texture name="ItemBackground" depth="1" size="531,77" texture="@" 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"/>
            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.

            		<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" />
            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.


            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" ?>
            		<Name value="" />
            		<Description value="" />
            		<Author value="" />
            		<Version value="" />
            		<Website value="" />
            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.

            <texture name="ItemBackground" depth="1" size="142,52" texture="@file:Mods\Yaui\Textures\statbarbg.png" material="Materials/Transparent Colored" pos="5,204" />
            <texture name="ItemBackground" depth="1" size="142,52" texture="@" material="Materials/Transparent Colored" pos="5,204" />
            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)
            Last edited by DUST2DEATH; 02-07-2017, 06:26 AM.




                Amazing Resources here. Great Job man


                  Awesome job. Now if I can figure out how to follow it 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 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.

                    Originally posted by naterz98 View Post
                    Awesome job. Now if I can figure out how to follow it 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.
                    Last edited by DUST2DEATH; 02-08-2017, 12:41 AM. Reason: I really cant spell..


                      Originally posted by DUST2DEATH View Post

                      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 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.


                        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.


                          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.


                            Originally posted by Gipothegip View Post
                            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 love this Post