Official EQ2 UI Guide (Online Searchable Form)
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. |
All times are GMT -5. The time now is 03:10 PM. |
vBulletin® - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
© MMOUI