[karamazovnew]

Most gave up modding the interfface because of the resolution scaling. For example, how the heck do you add an item in the middle of the screen, that STAYS in the middle of the screen even if you change resolutions and, even more, keeps it's overall screen fill ratio. Here's how it works.

EDIT: Finnaly I've got it, it's so simple....
Let's take the following example. I've added a small image, 300x300 pixels, in the exact center of the screen:

[G26 I49]
Name=Test Image
Type=1030
ItemID=0x261000011
ParentID=0x26000000
Pos=362,-234,300,300
Zone= 362 534 300 300 0(SCALE) 0(PIVOT) 0x26000000 0.5 -0.5 0x261000011 -0.5 0.5 0 0
Materials=1
Display=2
Mat 0=data/menu/gui/test.tga
Crop 0=0,0,1,1
MatFlags=0x9
TexFmt=0x0

Please note that for the image to be centered on the screen at 1024/768 resolution, the top left corner must be at X:362 and Y:234.
Now, please notice the 2 red numbers. The first one controls how the image is scaled and we will call it SCALE, and the second one controls how the item is positioned and we will call it PIVOT.

Relative Dimensions are controlled by the SCALE value:
All items have a dimension on screen that is actually controled by the first of the 2 red numbers, based on the resolution of the screen. Let's take our 300/300 pixel image as the example...
- for a value of 0, the image will always occupy 300x300 pixels on the screen. Thus, as the resolution is increased, the relative size of the image gets smaller.



- for a value of 1, the image is scalled uniformely by the following number Yresolution/768. So, for a resolution of 1920/1200, the image will no longer be 300/300 but 468/468 pixels (1200/768=1.5625, 1.5625*300=468). Notice that it's still a box (height=width)



- for a value of 2, the image is scalled unevenly on both axes. The height is multiplied by Yresolution/768, just as before, but the width is multiplied by Xresolution/1024. So, for a resolution of 1920/1200 the box will be 562/468. Note that this is no longer a box, as the width is higher than the height.



- for a value of 5, the image is scalled uniformely by the following number Xresolution/1024. So for a resolution of 1920/1200, the box will be 562/562. So again, a box but bigger than the one corresponding to a value of 1.



For all 4:3 resolutions(for ex, 1024/768, 1600/1200), then the values of 2 and 5 are redundant and give the same results as a value of 1. A value of 1 ensures that the item always ocuppies the same proportion of the screen, regardless of resolution. A value of 2 is important for all menu groups that must fill the entire space of the screen. They are invisible but important, as you'll see next. Any image would be skewed if used on a non 4:3 resolution. That's why for such resolutions, like 1920/1200, you can choose if the image get's scalled "vertically"(SCALE=1) or "horizontally" (SCALE=5). Most items use a value of 1, but some, like the periscope background, actually all backgrounds, including the images you see at the loading screen, must have a value of 5 to prevent seeing black areas at the side of the screen. But, the upper and lower parts of the images will be cutoff by the screen margins. You can test this easily by switching from 1600/1200 to 1920/1200 and looking ant the periscope background. You'll see what I mean.

But what about position? That depends on the parent and it's SCALE value. Why? Remember that each item is positioned relative to it's parent. But if the parent has already been scaled, this will also be visible in the child's position. That means that as the parent is scalled, all of it's children positions will also be scaled to maintain their relative position to the parent's origin (which is always the top left corner). What does this mean for us? Well, take the main Periscope Page group for example.
[G26 I1]
Name=Page attack periscope
Type=1027;Menu page
ItemID=0x26000000
ParentID=0x0
Pos=0,0,1024,768
Zone= 0 768 1024 768 2 1 0x0 0.5 -0.5 0x26000000 -0.5 0.5 0 0
LoadingMode=2

It has scale value of 2. That means that at a resolution of 1920/1200, altough it appears to only have 1024/768, it actually is 1920/1200 pixels. All of it's children will have their top left origin scaled. That means that altough my image should be at 362 left, 234 top, it's not. It's actually at (362*1920/1024) left and (234*1200/768) top. It's at 678 left and 365 top. But that creates a problem for us. As we change the SCALE value of our item, it's dimensions change with resolution. In other words, altough it's corner doesn't move, it's center does. That's where the PIVOT is important.
- for a value of 0, the pivot of the item is the top left corner. It will not change position depending on resolution, but as the item is scaled with resolution and it's dimensions change, it's center will move.
- for a value of 1, the pivot of the item is the center. Ha? That means that the center of the item will not move, but the corner will as the item's dimensions vary with resolution.