UI Element Positions

[Mayeline]

I'm not 100% sure if this is the right place to make this kinda post but I'll go for it anyway. 

Recently, I saw a post about a GUI concept that had a super unique battle UI. It was just a concept, and no one really worked on it, so I thought I'd give it a shot for myself and see how things go. A few of the elements in the Battle UI for this idea, would require some movement, so I did a little looking around, and As I tweaked with the files, I noticed that in the XML files under UI, you can modify certain values in order to move Elements around. For example, the Battle Menu, under the label "battle panel", by changing the "border value" And in the gfx.xml file, the same elements were referenced, giving "x,y,w and h" values. I have very minimal experience with XML myself, but I know that xywh values correspond to co-ordinates on a screen where the program draws a GUI element. But, I couldn't really go anywhere past that. 

So, I was wondering if anyone knew what the different values did and how they work. 
I tried looking up things on Stack Overflow and the like but, I couldn't find anything to explain it, and without the Original program that uses the XML files, I can't open it in an IDE to fully edit it. 

Edited February 18, 2022 by Mayeline
Typo

[budadeth]

Yes you can move elements using those values, you couldnt do it? I don't know very much about that neither, all I know I find it trough try and error, editing the files several times, didnt try that much into the battle screen more than the battle text, but I remember I could move it's position, what element you trying to move? I only know x for horizontal and y vertical, but I did acchieve to actually move the battle text just messing with the values

[Mayeline]

I was mainly looking to move the Battle Menu and Health Bars around. I managed to move it a little, but nothing that actually made sense. 

[budadeth]

Multiply values x2 or x4 to see the changes more drastically, I use to do that to calculate

[Gilan]

The bounds you are referring to (xywh) correspond to the location in the PNG files that contain the images (aka, just defining which image to use in the image asset sheets). Where they are drawn in the in-game ui is determined by the game engine I'm pretty sure. So it might be possible to move assets by increasing their frames.

 

For example:

 

The below image is taken from the battle-hud.png file in the res folder, and it's origin coordinate is (18, 8). The green band is at position (21, 9) in the file, and is 1 pixel wide, by 4 pixels high. Same thing for the orange band, but it's 1 pixel to the right, hence it's position of (22, 9). And finally the red band is 1 pixel to the left of the green band, thus it's position of (20, 9).

 

 

to explain what I meant by it might be possible to move assets:

 

Imagine the above image is an asset picked up by the game with xywh = "0,0,15,8". It would look something like:

 

But if we changed it to be: xywh = "0,0,115,108", and edited the png file accordingly. then it would look like:

 

So you can see the image is pushed to the bottom right, effectively moving it 100 pixels to the right and 100 pixels down. I don't actually know if this would work, I haven't bothered to try.

Edited February 18, 2022 by Gilan

[Mayeline]

Alright! That's somewhere to start, at least. Thank you! 

But, does that theoretically mean that you could resize the whole image to a larger resolution and increase the size of elements too? 

[budadeth]

10 minutes ago, Mayeline said:

Alright! That's somewhere to start, at least. Thank you! 

But, does that theoretically mean that you could resize the whole image to a larger resolution and increase the size of elements too? 

Yes but still working with coordinates, if you just upscale the image, the coordinates will still show just a certain area of the image, to increase the size of the elements you may need to increase the area with the coordinates... I'm just using logic I don't even tried yet hehe

[Mayeline]

So, Update. I was able to get myself far more working space for individual elements by defining them as separate images in the gfx.xml file. 

Like so. This let me create an entirely different png for each piece I wanted. However, an issue I've come across is the fact that the elements seem to be locked to specific positions. 

In Battle.xml you can find this set of code that defines the borders for the player's health bar background. The usual formatting for this would be x,y,w,h however, when you edit the settings themselves it doesn't seem to make sense. 

Editing the latter two values changes the size of your image, and by my assumption scales it to your set border. 

However, editing the former two values also does the same. 
 

I originally assumed that this was because the first two values take an x and y input and stretches the image to that given location, while the w and h inputs would determine how much of the image is used. 

This doesn't seem to be the case though, since: 

1. Positive values for the first two numbers stretch the image to the bottom right direction, while negative values reset the image to its original size. 
2. Any values entered into the second set of values ends up doing just about the same thing, identically. 

 

It seems like the 0,0 co-ordinate of the referenced image is fixed in a position, and the image scales off of that. 
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

At this point I've hit a roadblock. I'm able to both replace and resize elements individually, however repositioning it and its intricacies are seemingly beyond me at the moment. 

If anyone has any input they could share or something they've found that would help, I'd appreciate it. 

Also, I have tried Gilan's idea of changing the xywh bounds, which doesn't seem to work as far as I've tried. I may have done it wrong, but when I extend the png for the healthbar, alongside its parameters, the health bar completely disappears from the GUI. I've also attempted to increase the borders for these elements in the Batlle.xml file, but it doesn't seem to do a thing either. 


Overall, I think being able to use separate PNGs could be useful to other people when making Themes. However, in order to make something unique, the ability to reposition would be necessary. I'll try to keep digging into things. 

Edited February 22, 2022 by Mayeline

[budadeth]

12 hours ago, Mayeline said:

So, Update. I was able to get myself far more working space for individual elements by defining them as separate images in the gfx.xml file. 

Like so. This let me create an entirely different png for each piece I wanted. However, an issue I've come across is the fact that the elements seem to be locked to specific positions. 

In Battle.xml you can find this set of code that defines the borders for the player's health bar background. The usual formatting for this would be x,y,w,h however, when you edit the settings themselves it doesn't seem to make sense. 

Editing the latter two values changes the size of your image, and by my assumption scales it to your set border. 

However, editing the former two values also does the same. 
 

I originally assumed that this was because the first two values take an x and y input and stretches the image to that given location, while the w and h inputs would determine how much of the image is used. 

This doesn't seem to be the case though, since: 

1. Positive values for the first two numbers stretch the image to the bottom right direction, while negative values reset the image to its original size. 
2. Any values entered into the second set of values ends up doing just about the same thing, identically. 

 

It seems like the 0,0 co-ordinate of the referenced image is fixed in a position, and the image scales off of that. 
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

At this point I've hit a roadblock. I'm able to both replace and resize elements individually, however repositioning it and its intricacies are seemingly beyond me at the moment. 

If anyone has any input they could share or something they've found that would help, I'd appreciate it. 

Also, I have tried Gilan's idea of changing the xywh bounds, which doesn't seem to work as far as I've tried. I may have done it wrong, but when I extend the png for the healthbar, alongside its parameters, the health bar completely disappears from the GUI. I've also attempted to increase the borders for these elements in the Batlle.xml file, but it doesn't seem to do a thing either. 


Overall, I think being able to use separate PNGs could be useful to other people when making Themes. However, in order to make something unique, the ability to reposition would be necessary. I'll try to keep digging into things. 

I remember got stuck at the same thing very back in the day... didnt get much attention here with the people that know about the code, not even staff or common users, I believe a Java code manual could help here

[chocoblin]

i would be super glad if u would share download files :) after making it look like that redesign concept of course