Re: [GD-General] Vector GUIs

[Javier A. <ja...@py...>]

In Praetorians we sort of did that but with more configurability. We would
have "panel" textures that have these same 9 sections, but each section can
have a texture. The way you describe it there, only the corners have actual
textures, the rest simply has a stretched pixel texture. In our case, your
0.5's would be 0.3 to 0.7 or so, actually expressed in pixels inside the GUI
text resource description.

About layout, we had the layout coordinates expressed in several coordinate
systems. I'll describe using examples rather than a detailed run-through:

"10 10 100 100" - your typical 90-pixel square with 10-pixel margins above
and to the left.

"^0 ^0 %50 %50" - A centered rect half the size of the screen

">20 ^-10 400 %75" - A rect that is 75% the height of the screen, 400 pixels
wide, 10 pixels above the vertically centered position, and leaving 20
pixels between its right edge and the rightmost edge of the screen.

The actual code for handling this is very simple, it takes a "parent"
control inside which the current control is being created, the coordinate
styles (pixels, percents, right-align or centered) and coordinate values for
the control, and outputs a rectangle (in pixels) relative to the parent's
x,y:

void AdjustStyleRect(TRect *pDest, const TRect &src, const TRect &style,
const TRect &parent)
{
  if (style.w == RS_PERCENT)
    pDest->w = parent.w * src.w / 100;
  else
    pDest->w = src.w;

  if (style.x == RS_RIGHTALIGN)
    pDest->x = parent.w - pDest->w - src.x;
  else if (style.x == RS_CENTER)
    pDest->x = (parent.w - pDest->w)/2 + src.x;
  else if (style.x == RS_PERCENT)
    pDest->x = parent.w * src.x / 100;
  else
    pDest->x = src.x;

  if (style.w == RS_RIGHTALIGN)
    pDest->w = parent.w - pDest->x - src.w;
  else if (style.w == RS_CENTER)
    pDest->w = parent.w - pDest->x*2 - src.w;

  // ... do the same for te Y axis
}

The code for reading the coordinates is left as an exercise for the reader.
This means, in approx 100 lines you have a recursive, fully anchorable GUI
layout handler with relative or absolute coordinates and a couple of extra
bits for flexibility.

Our "control style" descriptions contain not just textures, images, fonts
and colors, but also flags to control stetching or tiling of the textures,
text scaling and formatting, and stuff like that.

  Javier Arevalo
  Pyro Studios

Gareth Lewin wrote:
> One trick we use is to build your GUI quads from 16 vertices instaid
> of 4. This allows you to keep the corners of the quad from stretching.
>
> In Sudeki we use that for all our dialogs, and the actual texture
> used by the GUI quads is just an Oval.
>
> ASCII ART.
>
> 0   0.5                       0.5  1.0
> +---+--------------------------+---+ 0.0
>>   |                          |   |
> +---+--------------------------+---+ 0.5
>>   |                          |   |
>>   |                          |   |
>>   |                          |   |
>>   |                          |   |
> +---+--------------------------+---+ 0.5
>>   |                          |   |
> +---+--------------------------+---+ 1.0
>
> The numbers are the UV coords of the texture.
>
> Hope that makes sense.
>
>
> _______________________
> Regards, Gareth Lewin
> Programmer, Climax Solent.