Skin template

[Nalif]

Is there a blank skin template available that clearly shows where the boundaries of each object are? I'm looking at custom skins, and it's difficult to tell exactly how much size I have for things such as buttons and the like.

 

[Pinco]

buttons and many orther objects are made by little pieces stretched and sized properly. I suggest to dismantle an already existent texture pack or to change something on the main dds and see what happen (best way to me...)

 

[Nalif]

Alright, maybe you can answer this then. I'm editing the StatusWindow. Looking at StatusWindow.xml, I see this:

<Size>
	<!--<AbsPoint x="290" y="133" /> -->
	<AbsPoint x="258" y="94" />
</Size>

So I know that the size of the StatusWindow is 258x94 pixels. However, where does it define what texture coordinates are used for the status window? Is this defined somewhere else? I've been through the entire StatusWindow.xml file, and nowhere do I see how it knows where to find this information.

 

[Pinco]

you can't search for the texture file inside the xml or you're gonna be mad... just edit 00000020_Hud.dds and you'll find here almost every texture...

 

[Dermott of LS]

...

Some elements are a bit easier to find in the XML than others... basically what you are looking for are three things:

1. The label for the particular element
2. The label-name for the texture file used
3. A batch of coordinated coded as <TexCoords>

For example, the close button on the mobile health bar in the Third Dawn texture pack is as follows:

	<Button name="$parentCloseButton" backgroundtexture="UO_Core" highlighttexture="UO_Core" texturescale="1.28" layer="popup">
					<Size>
						<AbsPoint x="9" y="9" />
					</Size>
					<Anchors>
						<Anchor point="topright" relativePoint="topright" />
					</Anchors>
					<EventHandlers>
						<EventHandler event="OnLButtonUp" function="MobileHealthBar.CloseWindow" />
					            <EventHandler event="OnMouseOver" function="MobileHealthBar.CloseButton_OnMouseOver" />
					</EventHandlers>
					<TexCoords>
						<Normal x="208" y="56" />
						<NormalHighlit x="231" y="56" />
						<Pressed x="208" y="56"  />
						<PressedHighlit x="231" y="56" />
						<Disabled x="208" y="56" />
					</TexCoords>
				</Button>

In that, you have the following:

1. The object label: Button name="$parentCloseButton"
2. The texture file label: backgroundtexture="UO_Core" (in this case, UO_Core references the file CoreTextures.DDS)
3. The texture coordinates: <TexCoords>
<Normal x="208" y="56" />
<NormalHighlit x="231" y="56" />
<Pressed x="208" y="56" />
<PressedHighlit x="231" y="56" />
<Disabled x="208" y="56" />
</TexCoords>

So in this example, the Close Button is found in CoreTextures.DDS at locations 208,56 and 231,56 depending on state of use.

Other elements follow this same pattern with the X,Y values being the top left of the image.

 

[Nalif]

3. The texture coordinates: <TexCoords>
<Normal x="208" y="56" />
<NormalHighlit x="231" y="56" />
<Pressed x="208" y="56" />
<PressedHighlit x="231" y="56" />
<Disabled x="208" y="56" />
</TexCoords>

So in this example, the Close Button is found in CoreTextures.DDS at locations 208,56 and 231,56 depending on state of use.

Other elements follow this same pattern with the X,Y values being the top left of the image.

I've been looking through the XML files, changing stuff, seeing how they work...and wow, there's LOTS of sloppy coding in these things. For instance, if you look at the way buttons are defined in the templates, they have sizes and scales already - yet I'm constantly seeing them re-scaled and re-sized when they're being used, and it's for no apparent reason. This leads to a blurry mess, for the same reason UO's graphics look crappy at non-native resolutions.

Also, I started making a template only to realize that the texture coordinates are off all over the place.

Wouldn't it be better to remake the texture files, and have things seperated? For instance, have the mini-map radar on it's own DDS, have alike buttons on their own DDS, and define proper X,Y coordinates and remove ugly scaling, etc? Proper size should be defined inside of the template XML files only, not inside of layout files. Resizing of graphics a second time makes them blurry and ugly. I'll post an example later tonight when I have some time. I've done this in several cases already, and I love it.

Here's a new status bar I've been tinkering with - wanted to see how square portraits would work.

 

[Dermott of LS]

...

I'll admit that my skills aren't all that amazing either at the textures or the XML, that's why the only things I tended to change were some of the coord values (namely the anchor points in most cases) and a few other odds and ends along the way as needed.

If I had to write one of the XML files from scrath, I doubt I could do it.

I would suggest if you plan on playing with the textures to unzip the Default.ZIP file in your user interface folder and working from there since you'll get a fresh version that I haven't tinkered with as I have taken quite a few object placement liberties with the code (which is why my skins are a bit more involved than just porting over the DDS texture files).

 

[Nalif]

...

I'll admit that my skills aren't all that amazing either at the textures or the XML, that's why the only things I tended to change were some of the coord values...

I wasn't talking about your work being sloppy. I was talking about the designer's work being sloppy - I've mostly been working from the default skin.

The problem is, is that the default skin was made very sloppy, and as such, every skin made from the default skin has inherited it's problems. I could fix the default skin, but I'd lose all the cool features that Pinco has made...

 

[Dermott of LS]

...

I like the squared off Status Window, the bigger bars are definitely nicer. I always though that the bars on the default version were too small to be reasonably visible which is why I made the same style of status window in Copper and Stone Enhanced (pre-Pinco UI) although I ditched the image for an easy to read location for the stat numbers.

 

[Dermott of LS]

...

That makes sense, and yeah you can see in a lot of comments spread throughout the various files just how haphazard some areas are put together.

It does need a once-over to streamline and clean up the code, doesn;t it?

 

[Nalif]

Here's that example I was talking about. The one on the left is the radar that I've remade using the actual overlay from the 2D client. Pay special attention to the blue minus and plus buttons, as well as the red button - see how they're crisp in the classic 2D one, but blurry in the default one? That's because they resized the buttons from their template sizes. If you look in the XML file for the radar, you can see they've given the buttons new sizes, for no clear reason. They were perfectly readable at their native sizes. Resizing them makes them blurry. Not only that, but the ring overlay used in the default skin isn't even the right size at native resolution...for some reason, they've chosen to make the actual graphic smaller than what's used in game....makes no sense.

Now, taking into consideration how sharp those buttons look on the remade minimap, and you can start to imagine how much better interfaces would look if all the extra scaling, resizing, etc were taken away, and how much more easy to make these skins would be if the graphic files were broken up. In the below example, I've given the radar it's own .dds file, completely separate from df00000020_HUD.dds . I think this is the approach that should be taken. Things should be broken up for easier understanding.

 

[Dermott of LS]

...

Hrm... I'd be interested to see a completely rewritten texture portion of the UI... not only is the XML messy as you say, but the textures are as well with quite a few "dead" textures just wasting space on the texture maps.

As for the radar map, I never was really able to come up with a good version of that. I pulled my version from Zym's Legacy UI which pulled it from the 2d client, but it is probably screwed around with more than yours is and not as crisp.

 

[Nalif]

quite a few "dead" textures just wasting space on the texture maps.

I'd be interested in knowing which parts aren't used so I don't remake them accidentally You have the most experience with re-texturing, so anything you've learned would be helpful.

 

[Dermott of LS]

...

For one, in the HUD file (I'll just call it that so as not to keep trying to remember how many 0s are int he filename), at 197x454 is an example of the 2d "buff bar" that I am 99.98% certain is NOT used in any way shape manner or form.

The health bar in the bottom left is unused in the default UI, was used in Pinco, now I think it's unused again.

HUD2 has a bunch of yellow icons that I don;t think are used as well as the higher of the two health bars (which WAS used for "offscreen", but has since been made inactive. Also the Dragons in the top right (unless someone can tell me where they are used), the white triangle below the signplate may also be unused.

I'm not even sure if Character_Widgets is used at all anymore

Hud Medallion files aren't used anymore

UOCommon has quite a few things that I'm not sure are used or not.

 

[Nalif]

Wow, you're right. The stuff that's in here just blows my mind...Did you know that there's a button in here that's used JUST for the tip of the day window? And that there are TWO close buttons, and nothing's different about them besides one is red and one is teal? Geeze. This is going to take a while.

 

[Merion]

I have hardly any clue what you guys are talking, but I understand the general concept, viz. that the software engeneering behind the EC UI didn't follow consequent guideline.

A dev should definitely have a look at this thread. And if you end up rewriting basic stuff of the vanilla UI to make it more consequent and straightforward - send it to Supreem or whoever is in charge of the EC these days. Maybe we have slim chance the might incorporate it into the client itself.