[QUESTION] What is the correct way to relatively position?

[stoneharry]

This is the first time I am writing a WoW interface from scratch and I am not sure on the correct way to relatively position elements so that they appear in the correct locations on all resolutions.

At the moment I have the following:



However at other resolutions it can break:



So my question is how do I get this to work at all resolutions?

This is my XML code:

Code: [Select]

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
..FrameXMLUI.xsd">
<Script file="MainFrame.lua"/>

<Frame name="MainFrame" toplevel="true" hidden="false" setAllPoints="true" enableMouse="true"
enableKeyboard="true">

<!-- Full screen -->
<Size><RelDimension x="1" y="1"/></Size>
<Anchors>
<Anchor point="CENTER"/>
</Anchors>

<Frames>
<Frame name="MainFrame_Back" parent="MainFrame" toplevel="true">
   <Anchors>
<Anchor point="CENTER">
<AbsDimension x="0" y="-70" />
</Anchor>
</Anchors>
<Size><RelDimension x="0.83" y="0.36"/></Size>
   <Backdrop bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true">
<EdgeSize val="16"/>
<TileSize val="32"/>
<BackgroundInsets left="5" right="5" top="5" bottom="5"/>
</Backdrop>
</Frame>
<Frame name="MainFrame_Header" parent="MainFrame" toplevel="true">
<Anchors>
<Anchor point="TOP" relativeTo="MainFrame_Back">
<AbsDimension x="0" y="150" />
</Anchor>
</Anchors>
<Size><RelDimension x="0.83" y="0.1"/></Size>
   <Backdrop bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true">
<EdgeSize val="16"/>
<TileSize val="32"/>
<BackgroundInsets left="5" right="5" top="5" bottom="5"/>
</Backdrop>
</Frame>
</Frames>

<Scripts>
<!-- Set background model when loading up -->
<OnLoad>
mainFrameLoaded()
</OnLoad>
<OnUpdate>
mainFrameUpdate()
</OnUpdate>
</Scripts>
</Frame>

</Ui>

On a side note, this happens when I set it to the lowest resolution:



The resolution I am detecting is correct and I set the background model to this resolution. Yet it isn't scaling to the resolution I tell it to at this low a resolution. The code I use can be seen below for this:

Code: [Select]

-- Set up background model
local model = CreateFrame("Model"--[[, "BackgroundF", MainFrame]]);
model:SetCamera(0);
model:SetPoint("CENTER",0,0);
--model:SetFrameStrata("HIGH");
model:SetFrameLevel(0);
-- This gets the width/height of the screen
local res = GetCVar("gxResolution")
local vars = 1
for value in string.gmatch(res, '([^x]+)') do
if vars == 1 then
model:SetWidth(value)
vars = nil
else
model:SetHeight(value)
end
end
res = nil
model:SetLight(1,0,0,-0.5,-0.5,0.7,1.0,1.0,1.0,0.8,1.0,1.0,0.8);

-- Set background model
function mainFrameLoaded()
model:SetModel("Interface\Glues\Models\UI_Orc\UI_Orc.m2");
end

Any help on either of the two issues (first being more urgent) would be greatly appreciated.

[happyhack]

hmmm... seriously... dont try to make ur UI scalable. I dont remember the original one to be, dont do it either, its such a pain in the ass.
Anyway, MainFrame_Back size is relative, but MainFrame_Header position (relative to MainFrame_Back) is absolute, and... u cant do it this way. More, as far as i understand... the header will probably get out of the screen if the window is too small...
For gods sake do not use relative coordinates.
Good luck though, dont know about the other issue.

edit: I dont see any way to mix absolute and relative coordinates, best way to go would be to search for an even notifying of screen resolution change, and changing frame position/sizes in lua.

[stoneharry]

hmmm... seriously... dont try to make ur UI scalable. I dont remember the original one to be, dont do it either, its such a pain in the ass.
Anyway, MainFrame_Back size is relative, but MainFrame_Header position (relative to MainFrame_Back) is absolute, and... u cant do it this way. More, as far as i understand... the header will probably get out of the screen if the window is too small...
For gods sake do not use relative coordinates.
Good luck though, dont know about the other issue.

edit: I dont see any way to mix absolute and relative coordinates, best way to go would be to search for an even notifying of screen resolution change, and changing frame position/sizes in lua.

Thanks for the answer. I changed it to use Anchors instead of RelativeSizes and it now works correctly (other than the second issue which I still have no idea why it happens):

Code: [Select]

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/
..FrameXMLUI.xsd">
<Script file="MainFrame.lua"/>

<Frame name="MainFrame" toplevel="true" hidden="false" setAllPoints="true" enableMouse="true"
enableKeyboard="true">

<Frames>
<Frame name="MainFrame_Back" parent="MainFrame">
   <Anchors>
<Anchor point="TOPLEFT">
<AbsDimension x="50" y="-200" />
</Anchor>
<Anchor point="BOTTOMRIGHT">
<AbsDimension x="-50" y="50" />
</Anchor>
</Anchors>
   <Backdrop bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true">
<EdgeSize val="16"/>
<TileSize val="32"/>
<BackgroundInsets left="5" right="5" top="5" bottom="5"/>
</Backdrop>
</Frame>
<Frame name="MainFrame_Header" parent="MainFrame">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="MainFrame_Back">
<AbsDimension x="0" y="150" />
</Anchor>
<Anchor point="TOPRIGHT" relativeTo="MainFrame_Back">
<AbsDimension x="0" y="150" />
</Anchor>
</Anchors>
<Size y="150"/>
   <Backdrop bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true">
<EdgeSize val="16"/>
<TileSize val="32"/>
<BackgroundInsets left="5" right="5" top="5" bottom="5"/>
</Backdrop>
</Frame>
</Frames>

<Scripts>
<!-- Set background model when loading up -->
<OnLoad>
mainFrameLoaded()
</OnLoad>
<OnUpdate>
mainFrameUpdate()
</OnUpdate>
</Scripts>
</Frame>

</Ui>