[Reference] UI Controls - comparision with CivV

[whoward69]

All but two of the CivV UI controls are present in the core CivBE UI Lua files, and CivBE introduces one new control, which means that 99% of the material in my CivV UI Tutorials are still relevant to CivBE

The first "missing" control is <HideOnMouseOver>. As this is the counterpart to <ShowOnMouseOver> it's probably still available just not used in the core UI.

The second "missing" control is <ReplayMap>. Seems odd that the replay system was removed, perhaps its just not implemented yet.

The new control is <DragPanel>. Two of these are used to display, and interact with, the Tech Web. See ...\assets\UI\InGame\TechTree\TechTree.lua/xml for details on how to use this control (it's non-trivial!)

Horizontal TextureBars seem to be broken (the background shadow is always visible and too big), but no longer fit the look-and-feel anyway, for an alternative see the TechProgress images in TechPanel.lua/xml

 

[whoward69]

New attributes

• AutoFlip (pulldown attribute)
• ConsumeMouseButton (counterpart of ConsumeMouse) see post #5
• ConsumeMouseOver (counterpart of ConsumeMouse) see post #5
• CursorColor (edit box attribute) see post #7
• FontSize (replaces functionality of Font) see post #4
• HighlightColor (edit box attribute) see post #7
• MouseOverStyle (button attribute) see post #6
• NoStateChange (button attribute) see post #6
• Style2 (button/grid/label attribute) see post #6
• TextOffset (button attribute) see post #6

 

[whoward69]

Text only dynamic tooltips have been made easier

Old School

Add the ToolTipType attribute to your button definition, referencing the TooltipType to use (typically TooltipTypeTopPanel)

<TextButton ID="Button" ToolTipType="TooltipTypeTopPanel" ... />

Retrieve the tooltip control from the TTManager

local topPanelTooltipTable = {}
TTManager:GetTypeControlTable("TooltipTypeTopPanel", topPanelTooltipTable)

Register a tooltip callback on the button

Controls.Button:SetToolTipCallback(OnUpdateToolTip)

Write the tooltip callback, ending with some boilerplate statements

function OnUpdateToolTip()
  local sLabel = ...
  
  if (sLabel ~= nil) then
    topPanelTooltipTable.TopPanelMouseover:SetHide(false)
    topPanelTooltipTable.TooltipLabel:SetText(sLabel)
    topPanelTooltipTable.TopPanelMouseover:DoAutoSize()
  else
    topPanelTooltipTable.TopPanelMouseover:SetHide(true)
  end
end

New School

Nothing needed on the button definition

<TextButton ID="Button" .../>

Register a mouseover callback on the button

Controls.Button:RegisterMouseOverCallback(OnUpdateToolTip)

Write the mouseover callback, using the standard SetToolTipString to update the tooltip

function OnUpdateToolTip()
  local sLabel = ...
  
  Controls.Button:SetToolTipString(sLabel)
end

You can still use the old TTManager approach for complex layout tooltips, but unfortunately Firaxis have left three debugging blocks of colour in the standard TooltipTypeTopPanel so you will either need to adopt the new approach or create your own version of the TooltipTypeTopPanel if you need to continue using it (eg for dynamic tooltips over labels).

For reference, the standard TooltipTypeTopPanel should be

<ToolTipType Name="TooltipTypeTopPanel">  
  <Container>
    <Grid ID="TopPanelMouseover" Offset="8,0" Padding="8,8" Size="530,150" Style="GridBlack8" NoClip="1">
      <Label ID="TooltipLabel" Offset="12,12" Style="FontNormal16" String="Brief description" LeadingOffset="3" WrapWidth="512"/>
    </Grid>
  </Container>
</ToolTipType>

 

[whoward69]

Font size selection on Label et al elements has changed

Old school

<Label Font="TwCenMT20" ... />

New school

<Label FontSize="20" ... />

If porting a CivV mod, just search and replace 'Font="TwCenMT' with 'FontSize='

Confusingly the Font attribute still exists, but it now refers to a .ttf file, eg Font="Cour.ttf". I haven't experimented to see if this now means that we can easily change font (eg to include special glyphs - PawelS I'm looking at you!)

 

[whoward69]

ConsumeMouse has new two counterparts - ConsumeMouseOver and ConsumeMouseButton

These do exactly what they say, but why you'd ever want to consume mouse over events but not mouse clicks (and vice versa) in a standard UI mod I don't know!

 

[whoward69]

Additional button attributes

MouseOverStyle="" - used to change the styling applied to the button as the mouse moves over it, eg <TextButton ... FontStyle="Shadow" MouseOverStyle="SoftShadow" ... />, how the main menu highlights are effected

NoStateChange="0 or 1" - default 0, setting this to 1 stops any mouse over animation (eg making it look like the button has been depressed)

Style2="" - enables a second style to be used, eg <Button Style="CityText" Style2="FontNormal26" ... />, useful if you want to over-ride part of the base style. Can also be used with <Grid> and <Label> items

TextOffset="x,y" - permits the text within a button to me moved - useful for those wanting pixel perfect alignment!

 

[whoward69]

Additional EditBox attributes

CursorColor="r,g,b,a" - permits the cursor colour to be changed

HighlightColor="r,g,b,a" - permits the highlight (selected) colour to be changed

To keep with the standard look-and-feel, these should be set to CursorColor="62,75,95,255" HighlightColor="26,42,80,255"