Results 1 to 17 of 17

Thread: Howto: Making a custom GUI

  1. #1

    Post Howto: Making a custom GUI

    Introduction
    A custom GUI in Anarchy Online may alter how the UI layout, most UI elements, and loading screens look. The default GUI is the base of which all the custom GUIs are based.
    The XML files define the layout of your Control Center (the main interface; including menus), the various windows (such as the LFT, city controller, research etc), with more.
    The graphics archive (*.UVGA and *.UVGI) contain the images representing the GUI elements.

    Other similar threads
    Skinning the GUI - A Reference

    Tools
    These tools will let you compile & decompile a GUIs *.UVGI and *.UVGA files:

    You might also want a syntax-highlighted text editor for altering the XML files:


    Recommended location of files
    Magic path: %localappdata%\Funcom\Anarchy Online\random letters\FolderName.
    Example: %localappdata%\Funcom\Anarchy Online\2e6586b4\AO Test Server

    Your GUIs root folder should be: magic_path\GUI\GUINAME
    Your archive should be saved as: magic_path\GUI\GUINAME\Graphics.uvga
    Your XML files should be stored in a hierarchy inside the root folder.

    Warning
    NEVER alter the default AO files.
    NEVER alter ANYTHING inside cd_image\gui\Default\

    GUI changes
    You can see changes to the AO GUI here. Click on any of the commits to see the difference between that version, and the previous version.
    Last edited by Demoder; Apr 22nd, 2014 at 15:40:44. Reason: Updated for 18.6
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  2. #2
    File Hirearchy
    root_folder\
    CharPrefs.xml: Defines the layout of the per-character preference file.
    LoginPrefs.xml: Defines the layout of the per-account preference file.
    MainPrefs.xml: Defines launcher settings.

    You should remove all default variables from the above files, and only add your custom variables. If you have no custom variables, it is safe to delete these files. This is because AO loads the default GUIs *prefs.xml files first, then override those variables with the ones defined in your custom GUI. If you don’t remove the default values, you might cause compatibility issues later on if FC changes them.

    Variables.xml: This file appears to be storing temporary (per-session) variables. If your GUI use per-session variables, you may set the default values here. If you don’t need per-session variables in your custom GUI, you can safely delete this.
    TextColors.xml: This file defines the various color codes used for text in the different channels & message types. It appears like AO does not use the default GUIs color definitions when loading a custom GUI, so you have to define all of them. Take special note in the color named CCNoneColor.

    root_folder\ActionMenu [optional]
    This folder contains the XMLs used for inclusion of menus in the root_folder\Views\ControlCenter.xml file.

    root_folder\gfx [optional]
    ai_loading_login.png: Alien Invasion login screen
    loadingimage_fullscreen.jpg: Shadowlands login screen
    welcome_to_rubika_shadowlands.jpg: Default loading screen

    root_folder\OptionPanel
    HotKeys.xml: Defines how to display the fixed keys. You should leave this at its default value, and ensure it’s up to date with the current default GUI.
    Root.xml: Defines the F10 menu. It is not recommended to remove settings from this file unless you are entirely sure the user won’t need them when using your GUI.

    root_folder\Views
    CityTerminal.xml: Defines how the city controller terminal looks.
    ControlCenter.xml: Defines how the HUD layout is. This includes the target controls, credit/ncu & aggdef bars, menus, and more.
    InfoView.xml: Defines the InfoView layout. (target+t, shift+leftclick etc)
    LaserTarget.xml: Defines the LE Laser Target interface layout.
    LFTView.xml: Defines the ‘Looking for Team’ interface layout.

    MailMessageWindow.xml: Defines the ‘read mail message’ interface layout.
    MailWindow.xml: Defines the ‘mail inbox’ interface layout.
    MechSelect.xml: Defines the ‘Order Vehicle’ interface layout.
    Raid.xml: Defines the raid interface layout. (shift+ctrl+r)
    RaidBar.xml: Defines the detached raid member’s health/nano bar layout.

    Research.xml: Defines the layout of the ‘Allocate Research’ tab in the research interface.
    ResearchDetails.xml: Defines the layout of the ‘Available Research’ tab in the research interface.
    ResearchFinished.xml: Defines the layout of the ‘Finished Research’ tab in the research interface.
    ShopSearch.xml: Defines the GMS search interface layout.
    SignupTermina.xml: Defines the battlestation signup interface layout.

    Skills.xml: Defines the ‘assign IP’ interface (u) layout.
    TeleportTarget.xml: Defines the grids “Exit to organization city and/or towerfield” interface layout.
    TipView.xml: Defines the ‘tip of the day’ interface layout.
    TradeGUI.xml: Defines the various trade interface layouts. (player/shop/etc trades)
    TradeskillPanel.xml: Defines the tradeskill kit layout.
    Last edited by Demoder; Dec 2nd, 2010 at 00:28:12.
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  3. #3
    ControlCenter.xml
    This is probably the file you will be customizing the most. Therefore, I’ve decided to include a section dedicated to this file.
    I am going to assume you have some basic knowledge in how to alter XML files (if you don’t, the principles are easy to understand and you should be able to find a good guide by using your favorite search engine).
    As stated in the XML Hierarchy section, this file defines the main HUD layout.
    Please take a look at the default GUIs ControlCenter.xml and read through it, especially the comments, then use this reference ‘chart’ for altering your custom ControlCenter.xml file.

    Attributes which should work on all elements: (including, not limited to)
    activate_criteria
    view_layout = ”stacked|horizontal|vertical”
    h_alignment = ”left|center|right”
    v_alignment = ”bottom|center|top”
    fade_group
    layout_borders
    name

    Views which will be handled in a special way:
    LeftBarDock [required]
    RightBarDock [required]
    RollupControllerDock [required]
    LeftWingDock
    RightWingDock
    LeftTargetCtrlDock
    RightTargetCtrlDock

    Element: View
    Contains a list of elements to display. May contain other View elements.
    Attributes: view_layout=”stacked|horizontal|vertical

    Element: CCMiniToolbar
    This is where the minitoolbar will be inserted, if enabled.
    Attributes:

    Element: CCMenu
    This element places a menu at the given location.
    Attributes: script=”scriptname.xml” ; This is a path relative to root_directory\ActionMenu\.
    Last edited by Demoder; Dec 1st, 2010 at 15:20:51.
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  4. #4
    Reserved. (Root.xml)
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  5. #5
    Reserved (Menus)
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  6. #6
    Graphics Archive
    Graphics archives consist of many images, which are identified by a key (which happens to be the filename when using Demoder’s GUI Compiler or AO-Skintool).

    AO loads the graphics archive defined by the currently selected GUI first, and if an image does not exist in this archive, it will look in the default GUIs archive.

    In order to alter the looks of an GUI element (such as the control centers movable health bar), you need to find the key of this GUI element. The easiest approach is to extract the core archive to some folder where you can quickly glance at the individual files to see what they look like. Once you find an image which looks like the HP bar, copy it to your custom archive work folder, and alter it as you please. It might be a good idea to paint it entirely black just to verify the image is the one you want.

    In this exact example, we are interested in two keys: GFX_GUI_ACTIONVIEW_HEALTHBAR and GFX_GUI_ACTIONVIEW_HEALTHBAR_BACKGROUND. The first is how the bar looks when you’re at full health, and the second is how it looks when you’re at 0hp. For items of this type, AO does a pixel-by-pixel mix of the two images depending on how many percents it should be filled.
    Last edited by Demoder; Jan 22nd, 2013 at 23:06:07. Reason: Patch 18.6
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  7. #7
    Distributing your GUI
    You should make clear instructions for the user; Where to extract the GUI to, and how to activate it. Example instructions.

    You would probably want to make a thread in the official AO forums Knowledge Database, and get your project listed over at AODevs. See this post for more information on how to do that.
    Last edited by Demoder; Jan 22nd, 2013 at 23:12:02. Reason: Updated for 18.6
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  8. #8
    GUI Colours
    With patch 18.5, you may alter the previously hardcoded GUI tinting colors.
    These are located in the file GUIColors.xml.

    The enty names are pretty self-explanatory, so I won't go into detail on what each entry does.
    The color parameter is a hexadecimal color value as such: 0xAARRGGBB.
    AA = alpha channel (transparency) - this does not seem to do anything at the moment.
    RR = red channel
    GG = green channel
    BB = blue channel.

    Values go from 00 to FF.

    Example file taken from the default GUI in 18.6.0.4 (TL patch):
    Code:
    <?xml version="1.0" ?>
    <Root>
        <Color name="Default"      color="0x0080e9f3" />
        <Color name="Selected"     color="0x00ffffcc" />
        <Color name="Hover"        color="0x00a5ffdb" />
        <Color name="Text"         color="0x0099ccaa" />
        <Color name="TextSelected" color="0x0099ccaa" />
        <Color name="TextHover"    color="0x0099ccaa" />
    </Root>
    Last edited by Demoder; Jan 22nd, 2013 at 23:20:08. Reason: Updated for 18.6
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  9. #9
    I hope you won't need any more posts, because I've just ruined that...

    A few minor corrections and notes.

    If you don't include a "root_folder\gfx" folder and the files which should go there, the game falls back to a default simple loadscreen stored in the main gfx file, so you can technically omit these.

    The view_layout="stacked" property is only valid in the root View tag of the ControlCenter.xml file. Using it anywhere else will result either in a messed up layout, the window not being displayed at all, or it simply gets ignored.

    The only elements which need to be defined in a ControlCenter layout to result in a workable GUI are:
    • RollupControllerDock: this is the rollup panel area
    • RightBarDock: Agg/Def bar
    • LeftBarDock: NCU/Creds bar

    You may also want to define the "CCMiniToolbar" element (this is not a view, but a separate element of its own), which is the row of small buttons normally on top of the Rollup Panel, but you can place it anywhere else.
    And of course a view to link in your menu structure. All the rest is optional and can be safely omitted if not needed. You can also add/define any other views with custom content (including textures either from the resource DB or added in your gfx package) in them.

    The "cd_image\textures\Archives_EP1" texture set is completely outdated; most of it is unused, and the rest is the same as in the main gfx file. For building your own texture set, use the textures found in the "cd_image\textures\Archives\GUIGFX.UVGA" as templates.
    Also, a huge amount of textures in the full set are not used anymore. You only need about 240 of the entire 722 textures to fully change the look of the entire GUI.
    You need to use 24 bit .png format.
    Most textures will be displayed differently in the game; almost all of them receives a "blue offset" colour filter, and some will be displayed with various (fixed) levels of transparency.

    And on a different note. I'd have never thought that the prefs files are used in a "merge/override" fashion. I guess I'll have to do some clanup in ndGUI some time.
    Last edited by Honorbound; Dec 1st, 2010 at 15:05:56.

    "All things point to that they didn't play to win, but for the game itself and to play well. ... Later in their evolution, they forgot all about playing and having fun. When their corrupted minds only cared for what new ways they could gain power, there was no room for the simple things in life."
    - One Who Will Always Listen
    "Hope is the first step on the road to disappointment."
    - Librarian Isador Aikos, W40k: Dawn of War
    "If you want to make enemies... try to change something."
    - Adam Jensen, Deus Ex: Human Revolution

  10. #10
    Quote Originally Posted by Honorbound View Post
    The view_layout="stacked" property is only valid in the root View tag of the ControlCenter.xml file. Using it anywhere else will result either in a messed up layout, the window not being displayed at all, or it simply gets ignored.
    It is supported in other xml files, but might depend on the type of parent it's put in.
    Or you might need to wrap another View around it, not entirely sure.

    Quote Originally Posted by Honorbound View Post
    Most textures will be displayed differently in the game; almost all of them receives a "blue offset" colour filter, and some will be displayed with various (fixed) levels of transparency.
    This is mostly borders (and other parts of the window) and buttons btw.

    Quote Originally Posted by Honorbound View Post
    The "cd_image\textures\Archives_EP1" texture set is completely outdated;
    You shouldn't rely on that though. The images in that file still receive priority over the ones in the default file.
    Last edited by Vhaxx; Dec 1st, 2010 at 15:17:51.
    Formerly Vhab.
    Once upon a time ruled a server. And then sold out. Sorry.

  11. #11
    Honorbound:
    Thank you for the reply. I've added some information based on this post, while I still need to confirm the rest before adding it. I'll get around to that soon.

    I'd like to disprove your claim of archives_ep1 mostly not being used, though: You can set Archives\GUIGFX.UVGI as your GUI archive and see how different the GUI is compared to using Archives_EP1. (Most notably: NPC chat dialogs)
    Last edited by Demoder; Dec 2nd, 2010 at 13:51:15.
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  12. #12
    Quote Originally Posted by Demoder View Post
    I'd like to disprove your claim of archives_ep1 mostly not being used, though: You can set Archives\GUIGFX.UVGI as your GUI archive and see how different the GUI is compared to using Archives_EP1. (Most notably: NPC chat dialogs)
    Yep, after having taken a closer look, there are a few differences indeed:
    • The buttons at the bottom of the NPC chat window
    • The shortcutbar header and the arrows on it (slightly different colour)
    • Some of the mouse pointers (slightly different colour)


    These are about 50 of the 250 files in the ep1 set, of which the rest is definitely outdated, like:
    • Everything that looks like a button (the buttons are now built from the exact same two base texture sets and labeled on demand, as opposed to each having a dedicated texture with unique button labels)
    • The border3, dialog/dialog2 and info_border sets (only a single, unified set of textures are used to build all windows)
    • The textures for the old skill "window"
    • "Full sized" background textures of many windows which are now built from a unified window element set instead (eg. trade, inventory, mission generator, wear view/tabs, nanoprograms)
    • A number of other small tidbits which have been removed from the GUI completely, or are now displayed using similarly looking textures found in the main set


    The bottom line is, if you are planning to make a full GUI overhaul, you don't need the ep1 texture file. You only need it if you want to tweak the look of some elements based very closely on their originals, which may be found in the ep1 set instead of the main one, like elements in the first list.

    "All things point to that they didn't play to win, but for the game itself and to play well. ... Later in their evolution, they forgot all about playing and having fun. When their corrupted minds only cared for what new ways they could gain power, there was no room for the simple things in life."
    - One Who Will Always Listen
    "Hope is the first step on the road to disappointment."
    - Librarian Isador Aikos, W40k: Dawn of War
    "If you want to make enemies... try to change something."
    - Adam Jensen, Deus Ex: Human Revolution

  13. #13
    Point is, don't make assumptions there.

    First AO loads the configured set (EP1 default), then it loads the the base set to fill in the gaps.
    This means all images in EP1 have priority over the ones in the other archive.

    All images in EP1 that are not in your archive have a chance to break the game.
    But all images in the default archive not in your archive will simply fall back to the default.
    Formerly Vhab.
    Once upon a time ruled a server. And then sold out. Sorry.

  14. #14
    Finally got of my ass and got me a nice shade of red for incoming nanodamage, thanks for the info.
    Been annoying the crap out of me for a long time.
    Last edited by Notcrattey; Today at 05:51:45. Reason: Didn't actually edit it, was a mistake!

  15. #15
    Updated with info on new-in-18.5.0 file, GUIColors.xml
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  16. #16
    Updated for 18.6
    ::: My Tools & Stuff :::
    ::: Cratine Savagedheals Enfine Zoewrangle Demoder :: Solitron Demotionform :: IRC Demoder Savagedlight :::
    ::: AOItems :: Blog :: CIDB :: HelpBot :: ItemsBot :: PlanetMap Viewer :: Tower Wars :: Twitter :::

  17. #17
    ☆ ★ ☆ ★ ☆ ★ ☆ ★ swirling-dog's Avatar
    Awesome I can't believe I have never seen this thread, or maybe I have and just forgot about it, wither way thanks!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •