Main Menu: PNG or XML Defined Graphics

[ChupaReaper]

It would be nice if the menu could use all PNG graphics now instead or a way to define what graphics are used in the menu.xml.
Also the ability to define snow instead of Rain would be good and is there a way to change the fog colour?
Setting the main menu objects and about objects would be useful too maybe multiple objects for the main menu so everything isn't all in one model.
Finally one more thing that's been annoying me for ages but I've never pointed out, when the mouse cursor highlights a button, it glows as a white box, this is good but my menu buttons use alpha to appear round and when they lit up this is ruined by a square white box lighting up over the top of it, a way to define the highlight graphic for buttons would be nice too, maybe additionally add alternate ways fort he box to light up, like from alpha 0 to 0.5 then flags to set the method to additive transparency or subtractive, etc.

[silnarm]

You'll be able to use whatever images you wish... Glest::Widgets evolution 2 is very nearly complete now, this is how buttons are currently 'styled',

Code: [Select]

-- Buttons
-----------
Button = {
Default = {
Borders = {
Type = "texture",
Texture = "button-trim",
Sizes = { 3, 6 } -- border, corner
},
Background = {
Type = "texture",
Texture = "button-bg"
},
Font = {
Name = "sans-big",
Size = "normal",
Colour = "white",
Shadow = false
}
},
States = {
Disabled = {
Background = {
Type = "texture",
Texture = "button-bg-grey"
},
Font = { Colour = "grey" }
},
Hover = {
HighLight = {
Type = "oscillate",
Colour = "white"
}
}
}
}

In a nutshell, each widget type has a 'Default' state (which must be specified) and then other special states which can completely change everything, or just those parts that make sense (the special states all 'inherit' the Default state styles for anything they don't specify themselves).

A 'highlight' based on an image is a great idea, but its too late now, you should have mentioned it earlier

For 0.4, best you can do is turn the highlight off all together, and use a different tex for the hover state (or put an 'Overlay' over the default background tex).

Also of interest to other TCs that use rectangular buttons (so, not MRise) is that borders can be specified from a texture, separate to the background, and can thus be kept 'pixel perfect' ... will post some screenies later.

[Omega]

I think multiple models would be very interesting if you can animate the models (though useless if we're stuck with static models still).

So that menu widget's file is dynamically modifiable?

[silnarm]

So that menu widget's file is dynamically modifiable?

If by 'dynamic' you mean changeable in game, no. If by 'dynamic' you mean not compiled into the game, yes.

Its actually a Lua file, you pre-load textures and fonts and specify colours, which are then referenced by name...

Here's the whole file from the widget branch,

Code: [Select]

--[[==========================================================

   1. specify any colours and load textures & fonts

  ==========================================================]]
 
-- colours by name
addColour( "red",              "0xFF0000FF" );
addColour( "pink",             "0xFF7F7FFF" );
addColour( "pink-tint",        "0xFF7F7F7F" );
addColour( "dark-red",         "0x8F2020FF" );
addColour( "red-tint",         "0xFF20207F" );
addColour( "dark-red-tint",    "0xAF20207F" );
addColour( "border-light",     "0xFFFFFF66" );
addColour( "border-norm",      "0x7F7F7F66" );
addColour( "border-dark",      "0x00000066" );
addColour( "background-light", "0xFFFFFF3F" );
addColour( "background-norm",  "0x7F7F7F6F" );
addColour( "background-dark",  "0x3F3F3F9F" );
addColour( "white",            "0xFFFFFFFF" );
addColour( "black",            "0x000000FF" );
addColour( "grey",             "0x7F7F7FFF" );

-- textures by name
-- background and borders...
local dir = "/data/gui/textures/";
loadTexture( "button-bg",             dir.."button_bg.png"             );
loadTexture( "button-small-bg",       dir.."button_small_bg.png"       );
loadTexture( "button-trim",           dir.."button_trim.png"           );
loadTexture( "button-bg-grey",        dir.."button_bg_grey.png"        );
loadTexture( "button-small-bg-grey",  dir.."button_small_bg_grey.png"  );

-- overlays
loadTexture( "close-button-norm",     dir.."close_button_norm.png"     );
loadTexture( "close-button-hover",    dir.."close_button_hover.png"    );
loadTexture( "down-arrow-norm",       dir.."down_arrow_norm.png"       );
loadTexture( "down-arrow-hover",      dir.."down_arrow_hover.png"      );
loadTexture( "up-arrow-norm",         dir.."up_arrow_norm.png"         );
loadTexture( "up-arrow-hover",        dir.."up_arrow_hover.png"        );
loadTexture( "left-arrow-norm",       dir.."left_arrow_norm.png"       );
loadTexture( "left-arrow-hover",      dir.."left_arrow_hover.png"      );
loadTexture( "right-arrow-norm",      dir.."right_arrow_norm.png"      );
loadTexture( "right-arrow-hover",     dir.."right_arrow_hover.png"     );
loadTexture( "roll-up-norm",          dir.."roll_up_norm.png"          );
loadTexture( "roll-up-hover",         dir.."roll_up_hover.png"         );
loadTexture( "roll-down-norm",        dir.."roll_down_norm.png"        );
loadTexture( "roll-down-hover",       dir.."roll_down_hover.png"       );
loadTexture( "expand-norm",           dir.."expand_norm.png"           );
loadTexture( "expand-hover",          dir.."expand_hover.png"          );
loadTexture( "shrink-norm",           dir.."shrink_norm.png"           );
loadTexture( "shrink-hover",          dir.."shrink_hover.png"          );

-- yes/no/maybe overlays
loadTexture( "green-tick",            dir.."green_tick.png"            );
loadTexture( "red-cross",             dir.."red_cross.png"             );
loadTexture( "orange-question",       dir.."orange_question.png"       );

-- mouse cursors
loadTexture( "mouse-set",             dir.."mouse.png"                 );

-- set 'special' textures
-- mouse
setMouseTexture("mouse-set");
-- overlays
setOverlayTexture( "tick",      "green-tick"       );
setOverlayTexture( "cross",     "red-cross"        );
setOverlayTexture( "question",  "orange-question"  );

-- load fonts
dir = "/data/gui/fonts/";
--loadFont( "tin-dog",    dir.."TinDog.ttf", 18 );
loadFont( "sans-big",   dir.."LiberationSans-Regular.ttf",  18 );
loadFont( "sans",       dir.."LiberationSans-Regular.ttf",  10 );
loadFont( "dumbledore", dir.."dum1.ttf",   28 );

-- set default fonts
setDefaultFont( "menu",   "sans-big"     );
setDefaultFont( "fancy",  "dumbledore"  );
setDefaultFont( "game",   "sans"        );

--[[==========================================================

   2. Styles for widgets

  ==========================================================]]

-- some predefined ones (potentially common to many types...)
Bare = {
Default = {
Borders = { Type = "none" },
Background = { Type = "none" },
Font = { "sans-big", "normal" }
}
}

Embedded = {
Default = {
Borders = {
Type = "embed",
Sizes = { 2, 2, 2, 2 },
Colours = { "border-light", "border-dark" }
},
Background = {
Type = "colour",
Colours = { "background-dark" }
},
Font = { "sans-big", "normal" }
}
}

Raised = {
Default = {
Borders = {
Type = "raise",
Sizes = { 2, 2, 2, 2 },
Colours = { "border-light", "border-dark" }
},
Background = {
Type = "colour",
Colours = { "background-dark" }
},
Font = { "sans-big", "normal" }
}
}

SolidOutline = {
Default = {
Borders = {
Type = "solid",
Sizes = { 2, 2, 2, 2 },
Colours = { "border-dark" }
},
Background = { Type = "none" },
Font = { "sans-big", "normal" }
}
}

Solid = {
Default = {
Borders = {
Type = "solid",
Sizes = { 2, 2, 2, 2 },
Colours = { "border-dark" }
},
Background = {
Type = "colour",
Colours = { "background-norm" }
},
Font = { "sans-big", "normal" }
}
}

-- common borders and backgrounds for buttons

buttonBorders = {
Type = "texture",
Texture = "button-trim",
Sizes = { 3, 6 } -- border, corner
}

buttonBackground = {
Type = "texture",
Texture = "button-bg"
}

smallButtonBackground = {
Type = "texture",
Texture = "button-small-bg"
}

smallButtonBackgroundGrey = {
Type = "texture",
Texture = "button-small-bg-grey"
}

-- default font

defaultFont = {
Name = "sans-big",
Size = "normal",
Colour = "white",
Shadow = false
}

-- oscillating white high-light

whiteOscillatingHighLight = {
Type = "oscillate",
Colour = "white"
}

-- StaticWidgets [StaticText ('Labels') and StaticImage]
-----------------
StaticWidget = Bare;

StaticWidget.Borders = {
Type = "solid",
Sizes = { 1, 1, 1, 1 },
Colours = { "red" }
}

-- Buttons
-----------
Button = {
Default = {
Borders = buttonBorders,
Background = buttonBackground,
Font = defaultFont
},
States = {
Disabled = {
Background = {
Type = "texture",
Texture = "button-bg-grey"
},
Font = { Colour = "grey" }
},
Hover = {
HighLight = {
Type = "oscillate",
Colour = "white"
}
}
}
}

CheckBox = {}

CheckBox.UnChecked = {
Default = { -- default state #1 (Un-Checked)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "red-cross"
},

States = {
Disabled = {
Background = smallButtonBackgroundGrey,
overlay = ""
},
Hover = { -- hover state, add 'high-light'
HighLight = whiteOscillatingHighLight
}
}
}

CheckBox.Checked = {
Default = { -- default state #2 (Checked)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "green-tick"
},

States = {
Disabled = {
Background = smallButtonBackgroundGrey,
overlay = ""
},
Hover = { -- hover state, add 'high-light'
HighLight = whiteOscillatingHighLight
}
}
}

TextBox = {
Default = {
Borders = {
Type = "solid",
Sizes = { 2, 2, 2, 2 },
Colours = { "border-dark" }
},
Background = {
Type = "colour",
Colours = { "background-dark" }
},
Font = { "sans-big", "normal" }
},

States = {
Focused = {
Borders = {
Colours = { "border-light" }
}
},

Hover = {
Borders = {
Colours = { "border-norm" }
}
}
}
}

ListItem = {
Default = {
Borders = {
Type = "solid",
Sizes = { 2, 2, 2, 2 },
Colours = { "dark-red" }
},
Background = {
Type = "colour",
Colours = { "background-dark" }
},
Font = { "sans-big", "normal" }
},

States = {
Selected = {
Borders = {
Colours = { "pink" }
},
HighLight = {
Type = "fixed",
Colour = "pink-tint"
}
},
Focus = {
Borders = {
Colours = { "red" }
},
HighLight = {
Type = "fixed",
Colour = "white"
}
},
Hover = {
Borders = {
Colours = { "pink" }
},
HighLight = whiteOscillatingHighLight
}
}
}

ListBox = Embedded;

DropList = {
Default = SolidOutline.Default,
States = {
Hover = {
Borders = {
Colours = { "pink" }
}
}
}
}

ScrollBar = Embedded;

Slider = Bare;

TitleBar = Embedded;

MessageBox = Raised;

ToolTip = Solid;

ScrollBarButtonUp = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "up-arrow-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "up-arrow-hover"
}
}
}

ScrollBarButtonDown = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "down-arrow-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "down-arrow-hover"
}
}
}

ScrollBarButtonLeft = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "left-arrow-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "left-arrow-hover"
}
}
}

ScrollBarButtonRight = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "right-arrow-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "right-arrow-hover"
}
}
}

sbEmbed = {
Default = {
Borders = {
Type = "embed",
Sizes = { 2, 2, 2, 2 },
Colours = { "pink-tint", "darl-red-tint" }
},
Background = {
Type = "colour",
Colours = { "red-tint" }
},
Font = { "sans-big", "normal" }
}
}

ScrollBarVerticalShaft = Embedded;

ScrollBarVerticalThumb = Raised;

ScrollBarHorizontalShaft = Embedded;

ScrollBarHorizontalThumb = Raised;

SliderThumb = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight
}
}
}

SliderVerticalThumb = SliderThumb;

SliderVerticalShaft = Embedded;

SliderHorizontalThumb = SliderThumb;

SliderHorizontalShaft = Embedded;

TitleBarCloseButton = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "close-button-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "close-button-hover"
}
}
}

TitleBarRollUpButton = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "roll-up-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "roll-up-hover"
}
}
}

TitleBarRollDownButton = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "roll-down-norm"
},
States = {
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "roll-down-hover"
}
}
}

TitleBarExpandButton = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "expand-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "expand-hover"
}
}
}

TitleBarShrinkButton = {
Default = { -- default borders and background (for all states)
Borders = buttonBorders,
Background = smallButtonBackground,
Overlay = "shrink-norm"
},
States = {
Disabled = {
Background = smallButtonBackgroundGrey
},
Hover = {
HighLight = whiteOscillatingHighLight,
Overlay = "shrink-hover"
}
}
}

ColourButton = {
Default = {
Borders = {
Type = "solid",
Sizes = { 4, 4, 4, 4 },
Colours = { "border-norm" }
},
Background = {
Type = "colour",
Colours = { "background-dark" }
}
},

States = {
Hover = {
HighLight = whiteOscillatingHighLight,
}
}
}

TickerTape = SolidOutline;

Which (atm), produces a GUI that looks like this, which also shows off the pixel perfect borders for buttons regardless of button size (the button borders will stay, ignore all the red & pink ).

[ChupaReaper]

I'll be looking forward to this. So these widgets define the styles used by the menu and in game. Can they be altered per faction as I could design some very nice borders and use different fonts for each faction. I would use a standard font for resources, unit descriptions and stats but a different font for unit titles in popup boxes, etc would be nice.

[silnarm]

Can they be altered per faction as I could design some very nice borders and use different fonts for each faction. I would use a standard font for resources, unit descriptions and stats but a different font for unit titles in popup boxes, etc would be nice.

I was wondering whether or not to put this in now, or post merge. Because it's loaded from Lua it would be fairly trivial to do, so I probably will add support for faction specific widget.cfg files. This is not a promise , if I encounter any unforeseen problems I will probably just revert and forget about it for the time being, but I think it will probably make it.

[ChupaReaper]

Sounds good, would be nice for some faction GUIs but no rush probably better to do after the merge too if it's trivial.

[Psychedelic_hands]

Sounds amazing!
More reason for me keep studing Lua....

[Omega]

Can they be altered per faction as I could design some very nice borders and use different fonts for each faction. I would use a standard font for resources, unit descriptions and stats but a different font for unit titles in popup boxes, etc would be nice.

I was wondering whether or not to put this in now, or post merge. Because it's loaded from Lua it would be fairly trivial to do, so I probably will add support for faction specific widget.cfg files. This is not a promise , if I encounter any unforeseen problems I will probably just revert and forget about it for the time being, but I think it will probably make it.

Support. Good for total overhaul mods.