Jump to content

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


DUST2DEATH

Recommended Posts

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

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.

 

z2KKff5.png

lmIVcg7.png

 

Now we add the background for the food and water bars.

eXt4x93.png

 

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)

 

2F3KhHl.png

3bWEMsb.png

 

err..need to kill the space, so we need a background

 

jzRDFYZ.png

Link to comment
Share on other sites

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.

PnhPsqR.png

PDEwGen.png

 

as you can see, we now have the base of our toolbelt designed. It looks like a blob of grey.

MxTUY74.png

 

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.

Vwe71IL.png

 

Again still working with flat colours, we make the bordering for the food and water fill bars. This includes bevelling, stroke etc.

qJpqetP.png

 

next we add the rust layer, icons and the glass layer.

jfMbr5B.png

Link to comment
Share on other sites

Finally, depth to the fillbar, we bevel the background "down"(inwards/towards the background), add shadowing.

qFXwUuu.png

 

if you are curious the fillbar background by itself, this is what it looks like.

fX4o5oO.png

 

at this stage we have completed the border and the food water fill bars for the toolbelt. Together, it looks like:

2R8L9xi.png

 

Remember the item stack value section earlier. just a massive blob of grey.

we add a metallic layer.

68Hhb2a.png

 

then a rust overlay

tfN0ap9.png

 

flat and ugly right? Add some simple shadowing and bevelling and it starts to look better

soxCKkQ.png

Link to comment
Share on other sites

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.

smRdfkn.png

 

From flat to 2.5D. it makes such a difference!

After repeating for the next 7 tabs, we have our stack value tabs completed.

tSlh6e7.png

 

the 3 groups together look like:

HRRrQE8.png

 

now we add the main toolbelt background back in. that looks uh, eww

ZWiJV0l.png

 

some simple shadowing will fix this.

Oxn8ior.png

 

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.

fvVz3J1.png

(that pesky 4th layer from earlier)

Link to comment
Share on other sites

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

1jeaioC.png

 

Over

srtnf5K.png

 

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

kL0n3zo.png

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:

SjfzH4a.png

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...