EverQuest II User Interface Customization
Version 1.0
© 2004 Sony Online Entertainment
This document explains the technical details required to customize the EverQuest II user interface. Many of the mysteries will remain hidden because at this point it may not be clear what questions need answers.
1 Overview 5
1.1 Introduction 5
2User Interface Options 6
2.1 Basics 6
2.1 .1 Changing the resolution 6
2.1 .2 Dragging Windows 6
2.2 Window Settings 6
2.2 .1 Normal and Mouseover opacity 6
2.2 .2 Locked 6
2.3 User Interface Options 7
2.3 .1 Popup message speed 7
2.3 .2 Tooltip Delay 7
2.3 .3 Window Fade Rate 7
2.3 .4 Global Opacity Levels 7
2.3 .5 Reset Opacity for all windows 7
2.3 .6 Unlock all windows 7
2.3 .7 Lock all windows 7
2.3 .8 Allow Windows Offscreen 7
2.3 .9 Hide window frames in letterbox 7
2.3 .1 0Windows snap to grid 8
2.3 .11 Snap to grid size 8
2.3 .12 Windows snap to alignment 8
2.3 .13 Snap to alignment size 8
2.3 .14 Reset location for all window 8
2.3 .15 Chat Window Font Size 8
2.3 .16 Bubble Font Size 8
2.3 .17 Chat Colors 8
2.3 .18 Game Colors 8
2.4 Other options 9
2.4 .1 Letterbox 9
3Adding a skin 10
4Creating a skin 11
4.1 Requirements 11
4.1 .1 Eq2ui_skininfo.xml 11
4.2 File Structure 12
4.2 .1 Eq2ui.xml 12
4.2 .2 XML files 12
4.2 .3 Images 12
4.2 .4 Fonts 12
4.2 .5 Sounds 12
5Sounds 13
6Dynamic Data 15
7UI Library Objects and Properties 16
7.1 BaseObject 16
7.2 Effector Group 16
7.2 .1 Effector 16
7.2 .2 ColorEffector 16
7.2 .3 LocationEffector 17
7.2 .4 OpacityEffector 17
7.2 .5 RotationEffector 18
7.2 .6 ScrollLocationEffector 18
7.2 .7 SizeEffector 18
7.3 Page Group 19
7.3 .1 Page 19
7.3 .2 ComboBox 19
7.3 .3 Composite 20
7.3 .4 PopupMenu 21
7.3 .5 PopupMenuStyle 21
7.3 .6 RadialMenu 21
7.3 .7 RadialMenuStyle 22
7.3 .8 TabbedPane 22
7.3 .9 TabbedPaneStyle 23
7.3 .1 0VolumePage 23
7.4 Widget Group 24
7.4 .1 Widget 24
7.4 .2 Button 29
7.4 .3 ButtonStyle 30
7.4 .4 Checkbox 31
7.4 .5 CheckboxStyle 32
7.4 .6 Dropdownbox 33
7.4 .7 DropdownboxStyle 34
7.4 .8 Ellipse 35
7.4 .9 Grid 36
7.4 .1 0GridStyle 36
7.4 .11 Image 37
7.4 .12 ImageStyle 37
7.4 .13 List 38
7.4 .14 ListStyle 38
7.4 .15 Listbox 39
7.4 .16 ListboxStyle 40
7.4 .17 Polyline 40
7.4 .18 Progressbar 41
7.4 .19 ProgressbarStyle 41
7.4 .2 0Scrollbar 42
7.4 .21 ScrollbarStyle 42
7.4 .22 Sliderbar 44
7.4 .23 SliderbarStyle 44
7.4 .24 Sliderplane 45
7.4 .25 SliderplaneStyle 46
7.4 .26 TabSet 46
7.4 .27 TabSetStyle 46
7.4 .28 TreeView 47
7.4 .29 TreeViewStyle 48
7.4 .3 0Table 49
7.4 .31 TableModelDefault 50
7.4 .32 TableHeader 50
7.4 .33 Text 51
7.4 .34 Textbox 52
7.4 .35 TextboxStyle 53
7.5 Style Group: 55
7.5 .1 Style 55
7.5 .2 RectangleStyle 55
7.5 .3 ShadowStyle 56
7.5 .4 TextStyle 57
7.5 .5 TooltipStyle 57
7.5 .6 WidgetStyle 58
7.6 Extras 58
7.6 .1 Cursor 58
7.6 .2 CursorSet 59
7.6 .3 ImageFragment 59
7.6 .4 ImageFrame 60
7.6 .5 FontCharacter 60
7.6 .6 Template 60
8UI Builder 62
8.1 Installation and startup 62
8.2 To Create a new skin 62
8.3 Window and Menu Layout 62
8.3 .1 Screen Display window 62
8.3 .2 Tree View and Property Display 62
8.3 .3 Main Menu Bar 63
8.3 .4 Insert Menu 63
8.4 General Object Manipulation 64
8.4 .1 Creating Objects 64
8.4 .2 Object Selection 65
8.4 .3 Moving Objects 65
8.4 .4 Delete, Copy, Paste, Undo 65
8.5 Text, Fonts 65
8.5 .1 Font Creation 65
8.6 Images 65
8.6 .1 Image Formats 65
8.6 .2 Importing an Image and Creating an Image Style 66
8.6 .3 Creating an Image Object 66
8.6 .4 Visualising Images 66
8.7 Properties 66
8.7 .1 Event Properties: OnActivate, OnDisable,… 66
8.7 .2 PackLocation 66
8.7 .3 PackSize 68
8.8 Effectors 69
8.9 Image formats 69
8.1 0Tips, Tricks, Pitfalls 70
9Frequently Asked Questions 71
10Known Problems and Feature Requests 72
1Overview
1.1 Introduction
This document describes the processes and tools for modifying the EverQuest II user interface. Customizing the user interface can be as simple as moving windows and changing interface properties from within the game, changing the widget placement and properties using UIBuilder, overwriting the default sounds, replacing the UI graphics, or coming up with your own masterpiece.
Please provide us feedback with this documentation and the skinnability of EQ2 via the EverQuest II Interface message boards
Thanks and enjoy!
2User Interface Options
There is a lot of flexibility to make changes to the user interface just using the options available in the game.
2.1 Basics
2.1 .1 Changing the resolution
Windows attach to the nearest location when the resolution is changed. The current attach points include: Top left, Top middle, top right, left center, center, right center, bottom left, bottom middle, bottom right, letterbox top, and letterbox bottom. The default attachment is set in the UI skin. Once a window is moved, it become attached to the nearest point above and will retain its offset to this point if the resolution changes.
2.1 .2 Dragging Windows
Windows can be dragged by holding down the left mouse button.
You can reset the location on the window settings screen or all window locations in the UI options.
2.2 Window Settings
The settings window can be opened by bringing up the context menu (right clicking) over a window and selecting the “Window Settings” option.
2.2 .1 Normal and Mouseover opacity
There are two modes for the window – normal and mouseover,
There are three layers to most windows – background, frame, foreground.
2.2 .2 Locked
A locked window cannot be dragged.
The checkbox on the settings window changes this property for a single window. There are two options for settings/clearing the locked flag for all windows in the UI settings.
2.3 User Interface Options
The User Interface options can be accessed via the EQ2 button and the “options” button and selecting the user interface tab or by typing the command “/options_game user interface”.
This document will skip the obvious options. And as always, the options are subject to change.
2.3 .1 Popup message speed
Centerscreen message speed
2.3 .2 Tooltip Delay
Delay required for tooltips to display
2.3 .3 Window Fade Rate
Rate at which windows fade to/from the normal/mouseover opacities
2.3 .4 Global Opacity Levels
Set the level for all windows that haven’t overwritten the defaults
2.3 .5 Reset Opacity for all windows
Cannot be cancelled
2.3 .6 Unlock all windows
Cannot be cancelled
2.3 .7 Lock all windows
Cannot be cancelled
2.3 .8 Allow Windows Offscreen
If checked, windows can be dragged offscreen. Otherwise, windows will run into the edge of the screen when being dragged.
2.3 .9 Hide window frames in letterbox
If checked, window frames will not display in normal mode if the window is in the letterbox region.
2.3 .1 0Windows snap to grid
If checked, windows snap to the grid when being dragged
2.3 .11 Snap to grid size
Sets the size of the grid.
2.3 .12 Windows snap to alignment
If checked, windows jump to the edge of other windows when being dragged.
2.3 .13 Snap to alignment size
Sets how close a window has to be before it will jump.
2.3 .14 Reset location for all window
Cannot be cancelled
2.3 .15 Chat Window Font Size
Set the global font size. Each chat window can set this separately (/chat_fontsize <n>)
2.3 .16 Bubble Font Size
Set the font size in chat bubbles. (/bubble_fontsize <n>)
2.3 .17 Chat Colors
Sets the colors for the chat channels. Use the “show chat category names” (/chat_show_category 0/1) to determine the channel for particular text.
The echo color is used for things you say.
The link color is used for embedded links.
2.3 .18 Game Colors
Changing the game colors does not force an update. You may have to wait for the data to change for the colors to take effect.
Please report any colors you wish to change that you cannot change.
2.4 Other options
2.4 .1 Letterbox
The letterbox size can be changed from the display options (cl_letter_box_amount <0-1>)
The letterbox position can be changed (cl_letter_box_position <0-1>)
3Adding a skin
Perhaps the easiest way to dramatically customize the user interface is to use someone’s skin.
To load a new skin, type /loadui and then select the skin in the load skin window. This window lists all the available skins in the %EQ2%/UI directory. Information about the skins include the name, the author, a version string, and a text description.
To add a skin to the directory, copy the files to a new directory in the UI subdirectory of your EverQuest 2 directory.
4Creating a skin
If you are reading this document for the first time, you very likely skipped ahead here.
A skin consists of one or more xml files, art files, and/or sound files.
If a file is not found in the current skin directory, EverQuest II will look in the default skin directory for the required file. So you only need to include files that you have changed.
4.1 Requirements
A user interface skin in EverQuest II only requires a subdirectory and one file and the file is optional.
The subdirectory must be under your EQ2 UI directory.
4.1 .1 Eq2ui_skininfo.xml
This file describes the skin and what is displayed when other people will see on the load skin dialog.
This XML file contains a page with one data item.
Be sure the page is not visible.
Be sure the data is named “SkinInfo” and there is a property named “Text”
The SkinInfo data object should contain the following properties:
Property
Description
Author
Name of the creator(s)
Contact
URL or other contact information
Description
String describing the skin
Name (Required)
“SkinInfo”.
Text
Display name of skin
Version
Version string
Without this file and properly named data object, the load skin window will not display the skin. The skin can still be loaded using “/loadui <skin>”.
In the future, additional fields may be supported.
4.2 File Structure
4.2 .1 Eq2ui.xml
This is the root UI xml file that includes all the others. If you are using UIBuilder, load this file.
4.2 .2 XML files
The XML files describe the UI widgets and their properties.
The windows are broken down by module. Each module is a page at the root level and contains one or more children pages. The naming convention is eq2ui_<module>_<child>.xml.
4.2 .3 Images
The image directory contains all the user interface art.
The subdirectories include:
Name
Description
Fonts
Bitmap fonts
Frontend
Character select/create art
Icons
Game icons
Loadscreens
Loading screens
Maps
Maps
4.2 .4 Fonts
This directory contains the racial fonts.
4.2 .5 Sounds
An optional directory to override user interface sounds.
5Sounds
Any of the following sounds can be replaced per skin or per client. The list is definitely subject to change.
To replace a sound, add a wave file with the sound name in the sounds subdirectory.
%EQ2%/UI/Sounds – to replace the sound for all skins on the client
%EQ2%/UI/<skinname>/Sounds – to replace the sounds for a particular skin
Name
Description
Broadcast
Buy_failed
citizenship_request
Click
coin_cha_ching
ding
dropdown_open
dropdown_close
encounter_broken
freeport_citizenship
frontend_mouseover
frontend_pressed
frontend_released
help_path_done
heroic_starter_trigger
heroic_starter_advance
heroic_starter_break
heroic_opportunity_trigger
heroic_opportunity_advance
heroic_opportunity_shift
heroic_opportunity_complete
heroic_opportunity_failure
heroic_opportunity_timeout
level_up
loot_failed
mariner_bell
moveable_object_place_failed
qeynos_citizenship
quest_complete
quest_stage
quest_item
spell_gained
skill_up
task_complete
trade_propose
trade_accept
too_far
ui_mouseover
ui_pressed
ui_released
war_drum
window_open
window_close
inventory_attune
inventory_cant_equip
ui_chestdrop
inventory_destroy_item
inventory_equip
inventory_un_equip
ui_tell_fail
ui_tell_receive
ui_tell_send
ui_discovery
ui_invite
ui_joined
ui_open_quest_book
ui_shard_absorb
ui_spirit_lvl_up
ui_tradeskills_lvl_up
quality_down
specialization
quality_up
zone_wood_door
zone_wood_massive
zone_sewer_grate
6Dynamic Data
EverQuest II has tried to make all relevant data available for any window. The system that allows this is called DynamicData. Any widget can be assigned to listen to dynamic data and will automatically update anytime the data changes. The widgets can also filter which types of updates are desired.
For the most recent list of available data see eq2ui_gamedata.xml
The data changes can be visible/not visible, text, color, opacity, progress, and more.
The filters are bitflags indicating the types of updates desired. By default, accept all.
Value
Description
0x0000
None
0x0001
Visible/Not visible
0x0002
Text
0x0004
Tooltip
0x0008
Boolean value
0x0010
Floating point value
0x0020
Long value
0x0040
Progress percent
0x0080
Icon
0x0100
Command
0x0200
Enabled/Disabled
0x0400
Color
0x0800
Opacity
0x1000
Event Trigger
0xFFFF
All
7UI Library Objects and Properties
The user interface consists of widgets and styles. This section describes the objects and their properties.
Please let us know what additional details are necessary.
7.1 BaseObject
Parent : none
The class everything inherits from
Name - identifier
String
application properties - additional properties
String, (bool, integer, etc)
7.2 Effector Group
An effector enables an object to change over time and can be attached as a property
7.2 .1 Effector
Parent: BaseObject
The base effector
No properties
7.2 .2 ColorEffector
Parent : Effector
change color over time
default color is widget color
Speed
float
TargetColor
Color
Background - color for widget background color
bool
BackgroundTint - color for widget background tint color
bool
7.2 .3 LocationEffector
Parent : Effector
change location over time
Speed - how fast to move in x,y
Point (x,y)
TargetLocation - destination
Point (x,y)
7.2 .4 OpacityEffector
Parent: Effector
change opacity over time
default is widget opacity
Speed -
float
TargetOpacity - destination
float (0,0 - 1.0)
Background - if true, background opacity.
bool
7.2 .5 RotationEffector
Parent: Effector
change rotation over time
Period - time to rotate completely
float
7.2 .6 ScrollLocationEffector
Parent: Effector
change scroll location over time
Speed - scroll speed for x,y
Point (x,y)
TargetScrollLocation - destination
Point (x,y)
7.2 .7 SizeEffector
Parent: Effector
change size over time
Speed - size speed for x,y
Point (x,y)
TargetSize - destination
Point (x,y)
7.3 Page Group
Pages are widgets whose primary purpose is to contain other widgets.
7.3 .1 Page
Parent : Widget
The base page class
ClipToPage - if true, clipping is on.
bool
7.3 .2 ComboBox
Parent : Page
A dropdown menu that allows the user to type in the selection
ButtonStyle
ButtonWidth
integer
Editable
bool
ListStyle
ScrollbarStyle
TextboxStyle
DataSource
DropDownHeight
integer
SelectedIndex
Integer
SelectedText
string
7.3 .3 Composite
Parent : Page
Page that automatically spaces visible widgets
Orientation
Horizontal/Vertical
Spacing - gap size
integer
SpacingType
Fill - make the widgets take up all the space
Spread - spread the widgets equally
Constant - fixed spacing
Alignment
Front - left/top
Center - center
Back - right/bottom
Padding -
Internal - spacing between items
External - spacing on the outside
Both - spacing both between and on the outside
7.3 .4 PopupMenu
Parent : Page
Style
PopupMenuStyle
* apparently requires a DataSource but no property
7.3 .5 PopupMenuStyle
Parent : WidgetStyle
The style for a PopupMenu
ButtonStyle - style for buttons created from data
ButtonStyle
ItemHeight - height
integer
7.3 .6 RadialMenu
Parent : Page
menu that is circular
DataSource
Style
RadialMenuStyle
PopupDataNamespace - the menu that appears
Namespace
7.3 .7 RadialMenuStyle
Parent : WidgetStyle
Style for a RadialMenu
ItemHeight -
integer
ItemMargin - space between items
Point (x,y)
ButtonStyleNW
ButtonStyleN
ButtonStyleNE
ButtonStyleE
ButtonStyleSE
ButtonStyleS
ButtonStyleSW
ButtonStyleW
ImageStyle
ItemPopupTimeout - time before menu disappears
integer
ItemPopupMenuStyle
PopupMenuStyle
7.3 .8 TabbedPane
Parent : Page
DataSource
ActiveTab - index to active tab
integer (-1 for none)
Style
TabbedPaneStyle
TargetPage - pages
Page
7.3 .9 TabbedPaneStyle
Parent : WidgetStyle
Style for a TabbedPane
ButtonStyle - button for tabs
ButtonStyle
7.3 .1 0VolumePage
Parent : Page
CellSize
Point (x,y)
CellPadding
Point (x,y)
CellMax
integer
CellCount
integer
CellCountFixed -
integer
CellForceDragable -
bool
CellSelectable
bool
CellDragAccept
bool
MultiSelection
bool
CellAlignmentV
Top
Center
Bottom
CellAlignmentH
Left
Center
Right
CellSelectionOverlay
RectangleStyle
7.4 Widget Group
A widget is a visible control. Some controls contain other controls.
7.4 .1 Widget
Parent : BaseObject
The base widget
AbsorbsInput - control wants input
bool
Activated - selected
bool
BackgroundColor
Color
BackgroundTint
Color
BackgroundOpacity
float (0.0-1.0)
BoundaryPolygon - non-rectangular hit areas
points
Color
color
ContextToParent
bool
ContextCapable
bool
Cursor
CursorSet
Dragable
bool
DragAccepts - types
string
DragBadCursor
DragGoodCursor
Cursor
DragType
string
DropToParent
bool
Enabled -
bool
Focus - has focus
bool
GetsInput -
bool
HideSound - sound name
ShowSound - sound name
String
LocalTooltip - tooltip string after being mapped
string
Location -
Point (x,y)
Maximum Size -
Point (x,y)
MinimumScrollExtent - amount you can scroll
Point (x,y)
MinimumSize -
Point (x,y)
OnActive - action
OnDeactivate - action
OnDisable - action
OnEnable - action
OnHide - action
OnHoverIn - action
OnHoverOut - action
OnShow - action
string
OnActiveEffector - effector
OnDeactivateEffector - effector
OnDisableEffector - effector
OnEnableEffector - effector
OnHideEffector - effector
OnHoverInEffector - effector
OnHoverOutEffector - effector
OnShowEffector - effector
Effector
PackLocation
PackLocationProp
PackSize
PackSizeProp
see notes
Rotation
float (0.0-1.0)
ScrollExtent - maximum amount you can scroll
Point (x,y)
ScrollLocation - current scroll amount
Point( x,y )
Shear -
Size
Point (x,y)
SizeIncrement - amount to scroll per tick
Point (x,y)
Tooltip
string
TooltipStyle
Visible -
bool
UserMovable -
bool
UserResizable
bool
UserScrollable
bool
RStyleDefault
RStyleDisabled
RStyleSelected
RStyleMouseOver
RStyleMouseOverSelected
RStyleActivated
RStyleMouseOverActivated
RStyleDisabledActivated
RectangleStyle
7.4 .2 Button
Parent : Widget
A control that triggers an action when pressed
OnPress - action to call when button is pressed
Style
ButtonStyle
Text -
String
LocalText - text after being mapped
String
TextColor
Color
TextMaxLines
Integer
IsCancelButton - if true, called on escape
bool
IsDefaultButton - if true, called on enter
bool
PressSound -
ReleaseSound -
MouseOverSound -
String
7.4 .3 ButtonStyle
Parent : WidgetStyle
Style for a button
NormalTextStyle
SelectedTextStyle
DisabledTextStyle
PressedTextStyle
MouseOverTextStyle
TextStyle
NormalTextShadowStyle
SelectedTextShadowStyle
DisabledTextShadowStyle
PressedTextShadowStyle
MouseOverTextShadowStyle
ShadowStyle
NormalTextColor
SelectedTextColor
DisabledTextColor
PressedTextColor
MouseOverTextColor
Color
PressSound - sound name
ReleaseSound - sound name
MouseOverSound - sound name
String
TextAlignment - horizontal alignment
Left
Center
Right
TextVerticalAlignment - vertical alignment
Top
Center
Bottom
7.4 .4 Checkbox
Parent : Widget
A button that remembers its state.
Checked - true if pressed
bool
OnPress - action
OnSet - action if checked
OnUnset - action when unchecked
Style
CheckboxStyle
Text -
String
LocalText - string after being mapped
String
MouseOverSound - sound name
SetSound - sound name
UnsetSound - sound name
String
TextColor - normal text color
Color
Radio - part of a radio group
bool
7.4 .5 CheckboxStyle
Parent : WidgetStyle
Style for a checkbox
CheckboxSize - image size
Point (x,y)
CheckboxOffset - image offset
Point (x,y)
NormalTextStyle
DisabledTextStyle
TextStyle
NormalTextShadowStyle
DisabledTextShadowStyle
ShadowStyle
TextOffset - text offset
Point (x,y)
MouseOverSound - sound name
SetSound - sound name
UnsetSound - sound name
String
7.4 .6 Dropdownbox
Parent : Widget
A list that can be minimized to the selected entry
See also: Combobox
DataSouce
OnSelect - action
String
SelectedItem - text for selected item
string
SelectedItemIndex - index of selected item
integer
Style
DropdownboxStyle
RowTemplate - description of row
Template
OpenSound - sound name
CloseSound - sound name
String
7.4 .7 DropdownboxStyle
Parent : WidgetStyle
Style for a dropdownbox
Normal.StartCap
Normal.Background
Normal.DownArrow
Disabled.StartCap
Disabled.Background
Disabled.DownArrow
Selected.StartCap
Selected.Background
Selected.DownArrow
Pressed.StartCap
Pressed.Background
Pressed.DownArrow
ImageStyle
DropBy - amount to drop the list when open
integer
Padding - amount of space around the list
Rect (left,top,right,bottom)
Scrollbar.Style - scrollbar information
ScrollbarStyle
Listbox.Style - listbox information
ListboxStyle
OpenSound - sound name
CloseSound - sound name
String
7.4 .8 Ellipse
Parent : Widget
an ellipse or pie
ArcBegin -
float (0.0 - 1.0)
ArcEnd -
float (0.0 - 1.0)
InnerRadiusColor
Color
InnerRadiusOpacity -
float (0.0 - 1.0)
Thickness - widget of the line
float
7.4 .9 Grid
Parent : Widget
A multidimension list
CellCount - number of cells
Point (x,y)
CellSize - size of each cell
Point (x,y)
DataSource - data
SelectedItem - index
Style
GridStyle
Tooltip - tooltip if nothing is in the cell
String
7.4 .1 0GridStyle
Parent : WidgetStyle
Style for a Grid
Normal.Background - cell background
Normal.Junction - corner
Normal.VStartCap - vertical start
Normal.VBackground - vertical line
Normal.Normal.VEndCap - vertical end
Normal.HStartCap - horizontal start
Normal.HBackground - horizontal line
Normal.HEndCap - horizontal end
Selected.Background - cell background
Selected.Junction - corner
Selected.VStartCap - vertical start
Selected.VBackground - vertical line
Selected.VEndCap - vertical end
Selected.HStartCap - horizontal start
Selected.HBackground - horizontal line
Selected.HEndCap - horizontal end
ImageStyle
7.4 .11 Image
Parent : Widget
A static image
SourceRect - are of the image
Rect (left,top,right,bottom)
SourceResource - filename
String
Strecth - true if allow image to be stretched
bool
Style
ImageStyle
7.4 .12 ImageStyle
Parent : UIStyle
describes an image. contains list of ImageFrame
Loop - loop frames
bool
Playtime - amount of time to play
float
7.4 .13 List
Parent : Widget
A list of items
DataSource - data items
SelectedRow - selected row index
integer (-1 for none)
SelectedRowCount - does nothing?
SelectionAllowMultiRow - allow multiple selections
bool
Style
ListStyle
7.4 .14 ListStyle
Parent : WidgetStyle
Style for a list
CellPadding -
Point (x,y)
CellHeight - height of a cell
integer
GridColor - grid box color
Color
DefaultTextStyle - text style
TextStyle
DefaultTextColor - text color
Color
SelectionColorBackground - selection background
Color
SelectionColorRect - box around selection
Color
7.4 .15 Listbox
Parent : Widget
A list of items
DataSource
OnSelect - action
OnDoubleClick - action
String
SelectedItem - value of item
String
SelectedItemIndex - index of selected item
integer
Style
ListboxStyle
RowTemplate - describes a row
Template
AutoScrollSpeed - scroll the list automatically
this is used for the credits
integer
7.4 .16 ListboxStyle
Parent : WidgetStyle
Style for a list
GridStyle - info about the grid box
Layout -
Vertical
Horizontal
7.4 .17 Polyline
Parent : Widget
A line from one point to another
Style
ImageStyle
Thickness - width
float
7.4 .18 Progressbar
Parent : Widget
The progress control
BackgroundColor
Color
BarBackgroundColor
Color
Progress - percent complete
float ( 0.0 - 1.0)
Style
ProgressbarStyle
7.4 .19 ProgressbarStyle
Parent : WidgetStyle
Style for a Progressbar
StepSize - size to change
integer
StarCap - end art
Background - background art
EndCap - end art
Bar.StarCap - end art
Bar.Background - background art
Bar.EndCap - end art
ImageStyle
Layout
Horizontal
Vertical
Inverted - reverse direction if true
bool
7.4 .2 0Scrollbar
Parent : Widget
A scrollbar. changes an objects scroll location
Control - parent control
Widget
Style
ScrollbarStyle
ArrowPressSound
ArrowReleaseSound
ThumbPressSound
ThumbReleaseSound
String
OnChange - action
String
UpdateContinuous - send multiple events
bool
7.4 .21 ScrollbarStyle
Parent : WidgetStyle
Style for a scrollbar
StartCap.Normal
Background.Normal
EndCap.Normal
Thumb.StartCap.Normal
Thumb.Background.Normal
Thumb.EndCap.Normal
StartCap.Disabled
Background.Disabled
EndCap.Disabled
Thumb.StartCap.Disabled
Thumb.Background.Disabled
Thumb.EndCap.Disabled
StartCap.Pressed
Background.Pressed
EndCap.Pressed
Thumb.StartCap.Pressed
Thumb.Background.Pressed
Thumb.EndCap.Pressed
ImageStyle
Layout
Horizontal
Vertical
Startcap.StopOffset -
Point (x,y)
EndCap.StopOffset -
Point (x,y)
Thumb.MinSize -
Point (x,y)
ArrowPressSound
ArrowReleaseSound
ThumbPressSound
ThumbReleaseSound
String
7.4 .22 Sliderbar
Parent : Widget
widget that sets a value using a slider
LowerLimit - minimum value
integer
OnChange - action
string
Style
SliderbarStyle
UpperLimit - maximum value
integer
Value - current value
integer
ValueUpdateContinuous - send multiple events when slider is moving
bool
7.4 .23 SliderbarStyle
Parent : WidgetStyle
Style for a sliderbar
Layout
Horizontal
Vertical
StartCap
Background
EndCap
Slider
ImageStyle
7.4 .24 Sliderplane
Parent : Widget
Not sure…
LowerLimit - minimum value
integer
OnChange - action
string
Style
SliderplaneStyle
UpperLimit - maximum value
integer
Value - current value
integer
ValueUpdateContinuous - send multiple events when slider is moving
bool
7.4 .25 SliderplaneStyle
Parent : WidgetStyle
Style for a sliderplane
Layout
Horizontal
Vertical
StartCap
Background
EndCap
Slider
ImageStyle
7.4 .26 TabSet
Parent : Widget
list of pages controlled by tabs
Style
TabSetStyle
Template
Template
7.4 .27 TabSetStyle
Parent : WidgetStyle
Style for a TabSet
ActiveTabStartCap
ActiveTabBackground
ActiveTabEndCap
InactiveTabStartCap
InactiveTabBackground
InactiveTabEndCap
ImageStyle
BodyTopLeft
BodyTop
BodyTopRight
BodyRight
BodyBottomRight
BodyBottom
BodyBottomLeft
BodyLeft
BodyFill
ImageStyle
Layout
Horizontal
Vertical
7.4 .28 TreeView
Parent : Widget
a tree
DataSourceContainer - tree of data
SelectedRow - currently selected row
integer (-1 for none)
SelectedRowCount - does nothing?
SelectionAllowMultRow - allow multiple selections
bool
Style -
TreeViewStyle
7.4 .29 TreeViewStyle
Parent : WidgetStyle
style for tree view
CellPadding -
CellHeight -
integer
GridColor -
Color
DefaultTextStyle
TextStyle
DefaultTextColor
Color
SelectionColorBackground - color for selection background
Color
SelectionColorRect - color for selection border
Color
ImageStyleCollapsed - icon for collapsed branch
ImageStyle
ImageStyleExpanded - icon for expanded branch
ImageStyle
Indentation - amount to indent
integer
7.4 .3 0Table
Parent : Widget
TableModel -
TableModel
ColumnResizePolicy - not used
SelectedRow
integer (-1 for none)
SelectedRowCount - not used?
SelectionAllowedRow
bool
SelectionAllowedMultiRow
bool
CellPadding
Point (x,y)
CellHeight
integer
GridColorHorizontal
Color
GridColorVertical
Color
DefaultTextStyle
TextStyle
DefaultTextColor
Color
SelectionColorBackground
Color
SelectionColorRect
Color
7.4 .31 TableModelDefault
Parent : TableModel
DataSourceContainer - collection of data sources
7.4 .32 TableHeader
Parent : Page
Table - name of the associated table
Table
ButtonStyle - button
ButtonStyle
ImageSortUp - image if sorting up
ImageStyle
ImageSortDown - image if sorting down
ImageStyle
CursorResize - cursor to indicate resize
Cursor
7.4 .33 Text
Parent : Widget
a static string
Text - the string
string
LocalText - string after being mapped
string
Margin - area around the text
Rect (left,top,right,bottom)
MaxLines -
integer
ShadowStyle
Font -
TextStyle
TextAlignment
Left
Center
Right
TextAlignmentVertical
Top
Center
Bottom
TextColor
Color
TruncateElipsis - use elipsis if too long
bool
7.4 .34 Textbox
Parent : Widget
a text entry control
MaxLength - character
integer
MaxLines -
integer
OnChange - action
OnOverflow - action
string
Password - is password style
bool
Style
TextboxStyle
Text -
LocalText -
string
WrapWidth
integer
-1 no wrapping
-2 automatic wrapping
Editable
EditableUnicode
bool
TextColor
color
NumericInteger - just number
bool
NumericFloat - XX.XX
bool
NumericNegative - allow negatives
bool
NumericIP - XX.XX.XX.XX
bool
7.4 .35 TextboxStyle
Parent : WidgetStyle
Style for a Textbox
CaratColor
Color
CaratWidth
integer
Cursor
NormalGridStyle
DisabledGridStyle
SelectedGridStyle
GridStyle
NormalShadowStyle
DisabledShadowStyle
SelectedShadowStyle
ShadowStyle
NormaTextStyle
DisabledTextStyle
SelectedTextStyle
TextStyle
SelectionColor
Color
SelectionOpacity
float (0.0 - 1.0)
TextPadding - area around text
Rect (left,top,right,bottom)
7.5 Style Group:
A style helps define the look of a widget/page. Often a style will be used to create common properties for similar widgets.
7.5 .1 Style
Parent : BaseObject
The base style
No properties
7.5 .2 RectangleStyle
Parent : Style
a style that contains 9 images and rules
North
NorthEast
NorthWest
South
SouthEast
SouthWest
East
West
Center
ImageStyle
NorthStretch - can image stretch
NorthShrink - can image shrink
SouthStretch
SouthShrink
EastStretch
EastShrink
WestStretch
WestShrink
CenterStetchH
CenterStetchV
CenterShrinkH
CenterShrinkV
bool
Color -
color
Opacity -
float (0.0 - 1.0)
7.5 .3 ShadowStyle
Parent : Style
dropshadow description
Color -
Color
Offset - shift from the normal text
Point (x,y)
Opacity -
float (0.0 - 1.0)
RenderShadow - true if draw the shadow
bool
7.5 .4 TextStyle
Parent : Style
Defines a font and the available characters
Leading - height
integer
ShadowStyle
CachedStyle - id of cached font (1-9)
integer
UseCachedFont - use cached font for missing chars
bool
7.5 .5 TooltipStyle
Parent : Style
Style for a Tooltip
DataSource
GridStyle - for the box
MaxWidth
integer
Template - ui library information
TextColor
Color
TextPadding - space around text
Rect (left,top,right,bottom)
TextShadowStyle
ShadowStyle
TextStyle
7.5 .6 WidgetStyle
Parent : Style
Style for all widgets
HideSound
ShowSound
String
OnShowEffector
OnHideEffector
OnEnableEffector
OnDisableEffector
Effector
7.6 Extras
Some items do not fit into the categories above.
7.6 .1 Cursor
Parent : BaseObject
the pointer image
ImageStyle - pointer image
ImageStyle
HotSpot - offset into image for hotspot
Point (x,y)
7.6 .2 CursorSet
Parent : BaseObject
a collection of cursors
Count - number of cursors
long
7.6 .3 ImageFragment
Parent : BaseObject
portion of an image
Offset - offset into full image
Point (x,y)
SourceRect - area of this fragment
Rect (left,top,right,bottom)
Source - name of the file
String
7.6 .4 ImageFrame
Parent : ImageFragment
One part of an image
Duration - time to play this frame
long
7.6 .5 FontCharacter
Parent : BaseObject
a character glyph
Code - unicode value
wchar_t
Advance - width
long
SourceRect - area in image for this character
Rect (left,top,right,bottom)
SourceFile - image
String
7.6 .6 Template
Parent : BaseObject
describes the layout of a row of data
Size - row size
Point (x,y)
Template - ui library information
String
8UI Builder
UIBuilder is an XML editor used to visualize and edit the user interface.
8.1 Installation and startup
Install and Startup:
Copy the UIBuilder directory to the desired location
File -> Open -> %EQ2%\UI\<skinname>\eq2ui.xml
8.2 To Create a new skin
Create a new directory under %EQ2%\UI
Open an existing skin
Save as the new skin name
8.3 Window and Menu Layout
8.3 .1 Screen Display window
The Screen Display window on the RHS displays tabs across the top of the window for every pane in the UI. Selecting a tab displays the corresponding pane.
Icons above the screen display from left to right are as follows:
Run / Stop UI – When running the GUI widgets can be put through some basic testing. UI execution should be stopped if you want to edit the UI and move widgets around.
Refresh
Draw Cursor
Draw Selection Hilights – needs to be on in order to get selection feedback
Draw Grid - Enables / Disables the grid display
Snap To Grid - Enables / Disables grid-snapping
8.3 .2 Tree View and Property Display
On the LHS a tree-view lists all the panes and all the widgets within a pane. Panes and widget groupings can be expanded and collapsed as needed.
The lower left panel shows all the attributes of the currently selected item. The attributes are editable by clicking on the attribute text.
It is important to use common elements whenever possible to make it easier to change.
8.3 .3 Main Menu Bar
File: New, Open, Close, Save, Saveas, Recent Files, Exit
work as expected
File: Generate Art File List
shows what art is actually being used
Edit: Undo/Redo
just implmented
Edit: Cut, Copy, Paste, Duplicate, Delete
work as expected
View: Run
this puts the editor into run mode. not all things work as expected. > is shortcut
View: Cursor
View: Highlight
the box around a selection. can change settings. can toggle on/off
View: Grid
the grid lines. can change settings. can toggle on/off
can force objects to jump to grid
View: Default properties
force new objects to have these settings. overrides defaults.
Align: aligns with last object selected
Same size: sets size to last object selected
8.3 .4 Insert Menu
Insert: Folder
just a namespace
Insert: Object
Insert: Style
Insert: Effector
Insert: DataSouceContainer
meta container for data
Insert: DataSouce
data container
Insert: DataItem
data
Insert: ImageFrame
contains an image
Insert: Template
Insert: Application Object
custom widget
Object List:
you can move objects up/down/top/bottom
you can select objects
Object Properties:
properites for the current object
add/delete/change
8.4 General Object Manipulation
8.4 .1 Creating Objects
Objects are the entities that appear in the GUI.
Styles determine how the objects look.
Effectors are things which change objects.
To see lists of all Objects, Styles and Effectors see the Insert pulldown.
To insert a new object into the hierarchy, first select the group node under which the new item is to go.
Then use the Insert pull-down to add the type of object required.
8.4 .2 Object Selection
Make sure the UI is not running, using the Run/Stop UI button.
Make sure Draw Selection Hilights is ON.
Widgets can be selected by clicking on the widget in the screen display or by clicking on the text entry in the tree view.
Multiple objects can NOT be selected in the main graphics window. But **** can be used for multi-selection in the hierarchy view.
8.4 .3 Moving Objects
Drag and drop the selected widget to move it or reshape it.
Multiple widgets can be selected in the screen display view and moved as a group.
However only single widgets can be selected in the tree-view.
8.4 .4 Delete, Copy, Paste, Undo
Select a widget in the tree view. The following commands don’t work on multiple selected items in the screen view.
Ctl-x – deletes the selected widget.
Ctl-c – copies the widget.
Ctl-v – pastes the widget under the currently selected group. Paste will fail if another widget is selected. Make sure a group or panel is selected and the widget will be pasted under that group.
Ctl-z – undo
Ctl-y - redo
8.5 Text, Fonts
8.5 .1 Font Creation
Use BuildFont to create a bitmap font or use a dynamic font
8.6 Images
8.6 .1 Image Formats
Initial source art for GUI images can be provided in any of the following formats:
BMP
DDS
PNG
TGA
The images will be sliced and compressed when loaded into the UI Builder.
8.6 .2 Importing an Image and Creating an Image Style
To import an image into the UI do Insert -> Image Frame and select a TGA or DDS file to import.
The image has to be in the Data/Pack folder to import properly.
The TGA image will be sliced and converted to .dds format and one or more Image Fragments will be inserted under an Image Frame which will be under an image Style. Name the image style.
At this point the image will not yet be graphically displayed on the Page.
8.6 .3 Creating an Image Object
Next you have to create an Image Object:
Insert -> Object -> Image
An image area will appear in the graphical view.
Set the Style property to be the name of the ImageStyle created above. Now the image should be displayed on the page.
8.6 .4 Visualising Images
To see an image fragment, double click the word SourceRect in the object properties listing when you have an image fragment selected.
To see the whole image, select the ImageFrame and double click the word SourceRect in the object properties listing.
A red shaded rectangle is displayed over the image indicating the boundaries of the image or image fragment. The red shaded rectangle has resize handles so the user can reshape the image or fragment by dragging the handles.
8.7 Properties
8.7 .1 Event Properties: OnActivate, OnDisable,…
The UI system supports scripted command for the events.
8.7 .2 PackLocation
Type:UIString
The PackLocation determines how a widget is re-positioned when it's parent changes size. The locations are represented as simple relationships between a widget edge, and a parent edge. The Child edge goes first, followed by the relationship, then finally the Parent edge. The two relationships are:
Fixed - maintain a fixed number of pixels between the 2 edge
Proportional - maintain the proportion between the edge distances and the parent widget size
The edges that may be referred to are:
Near - Left for horizontal, Top for vertical
Far - Right for horizontal, Bottom for vertical
Center - The center point x value for horizontal, y value for vertical
Syntax example:
NFN,CPF
Horizontal: Child Near Edge - Fixed - Parent Near Edge
Vertical: Child Center - Proportional - Parent Far Edge
Horizontally, the near edge of the widget is kept a fixed distance from the near edge of the parent. Vertically, the center of the widget is kept a proportional distance from the far edge of the parent. Some combinations, obviously, are more useful than others.
8.7 .3 PackSize
Type: UIString
PackSize indicates how the widget is re-sized when its parent changes size. The relationships are:
Fixed - keep the size constant
Proportional - keep the proportion between the widget's size and parent's size constant
Absolute - keep the difference between the widget's size and parent's size constant
Syntax example:
A,F
Horizontal: Maintain a constant distance between Child and Parent Edges
Vertical: Keep the Child size constant
This example would work for stretching the menu on the map when it is resized to full screen.
Keep the widget a fixed size horizontally, but expand/contract vertically to maintain a fixed difference between the widget's height and parent's height.
8.8 Effectors
Here's an example of how to create an effector, in this case an opacity effector.
1.Construction of the OpacityEffectors:
Using the Insert > Effector > Opacity menu item, create two new opacity effectors. Name the first one FadeButtonOut, and the second FadeButtonIn.
Set the target opacity for FadeButtonOut to 0.25, and the target opacity for FadeButtonIn to 1.0.
2.Attaching the effectors to objects:
Find the object you would like to use these effectors on. Set the OnEnableEffector to the path to the FadeButtonIn and the OnDisableEffector to the path to FadeButtonOut.
3.Attaching effectors to styles (optional):
Styles also support effectors, so if you have a common style you use for many buttons, you can set the effectors on the style instead of on each object. If you have an effector on an object, and on the object's style, the one on the object is used.
8.9 Image formats
Any of these image formats can be used for GUI elements:
BMP
DDS
PNG
TGA
8.1 0Tips, Tricks, Pitfalls
save often
text characters cannot be created in the editor
don't be afraid to save and go edit the xml files manually
occasionally view with triangles (or look at number) will tell you if you set something up wrong
9Frequently Asked Questions
No one has asked any questions yet.
10Known Problems and Feature Requests
There are very likely lots of bugs and undocumented features. Up until now, UIBuilder has primarily been an internal development tool.
The more often bugs are reported, the better chance they have of being fixed. The same goes for new features: We’d like to know what would make UIBuilder more useful to you.
We won’t be keeping UIBuilder up to date at the expense of the game itself, but we’d like to make sure that the time we are able to spend on UIBuilder will have value to you.