Understanding Frame Coordinates

[sloejack]

As part of a character ruleset I'm working on I'm wanting to re-skin some of the interface pieces like the chat window, combat tracker, etc.

In looking at the graphics.xml file I think I understand it but the coordinates on the windows confuses me a bit. I'm hoping someone can confirm that what I'm thinking is correct or correct my thinking so I can continue the modding.

The cooridnates seem a little strange but what I've inferred is the following:

Offset_X,Offset_Y,X,Y where X = the veritcal (Left to Right) and Y = the horizontal (Top to Bottom). The offset being the indent from the left or the top.

I'm trying to clarify this since I read a post elsewhere in the forums from Ged that was helpful but didn't really expand on what the cooridnates were and what the various definitions of the frame meant.

	<framedef name="chatbox">
		<bitmap file="data\frames\chatbox.png" />
		<topleft rect="0,0,12,12" />
		<top rect="12,0,501,12" />
		<topright rect="513,0,16,12" />
		<left rect="0,12,12,460" />
		<middle rect="12,12,501,460" />
		<right rect="513,12,16,460" />
		<bottomleft rect="0,480,12,50" />
		<bottom rect="12,480,501,50" />
		<bottomright rect="513,480,16,50" />
	</framedef>

So in looking at this example and the associated chatbox.png this is what I find (I think):
topleft = top left corner of the chat display area
top = seems to be top right area (not quite corner) of chat display area
topright = top right corner of the chat display area
left = seems to be bottom left area (not quite corner) of chat display area
middle = seems to be bottom right area (not quite corner) of chat display area
right = seems to be bottom right area (not quite corner) of chat display area
bottomleft = bottom left corner of chat display area
bottom = seems to be bottom right area (not quite corner) of the chat display area
bottomright = bottom right corner of chat display area

My questions that stem from this are as follows:
Is my understanding of the first 2 of the 4 cooridnates being offsets correct?
The non-corner coordinates don't seem to be the middle or even the edges of the chat area so what are these, and how critical is accurate coordinate placement?

[Toadwart]

Think tic-tac-toe.
The frame is divided into 9 sections like this:

 
 tl | t  | tr
----|----|----
 l  | m  | r
----|----|----
 bl |  b | br

It's only important for frames that are re-sizeable or you set a default size for them that is bigger than the actual image size. In that case just specify the middle coordinates (00,00,width of frame, height of frame)

For resizing think of the frame as 9 separate images. FG will clone portions of the top, left, middle, right and bottom images to fill in any gaps as the frame is stretched out.

You can get some very bizzare results if your coordinates are set incorrectly...

[sloejack]

Ok, I think that makes better sense. One follow up though, for windows that are resizable, for the middle coordinates do you want true middle, or do you plot an edge of the middle?

[Toadwart]

I don't know what you mean by 'true middle'. The coordinates are 'non-overlapping' if thats what you mean.
e.g. assuming a square (30x30) frame and assuming you want to divide it into equal-sized (10x10) areas it would look something like this:

 
    <framedef name="someframe">
        <bitmap file="rulesets\myruleset\data\frames\someframe.png" />
        <topleft rect="0,0,10,10" />
        <top rect="10,0,10,10" />
        <topright rect="20,0,10,10" />
        <left rect="0,10,10,10" />
        <middle rect="10,10,10,10" />
        <right rect="20,10,10,10" />
        <bottomleft rect="0,20,10,10" />
        <bottom rect="10,20,10,10" />
        <bottomright rect="20,20,10,10" />
    </framedef>

[sloejack]

That makes sense, thank you. The example from the graphics.xml didn't quite follow that logic but you've cleared it up for me, thanks.

[Ged]

How you define the frame is completely up to what you want. If you have a large bitmap, and want to use just six pixels (a 3x2 block, eg) from somewhere as the middle part (the same goes with every other part - though only the middle, top, bottom, left, and right tile), you define

<middle rect="X,Y,3,2" />

where X and Y are the "offset" coordinates of the block you want to be tiled.