Difference between revisions of "Custom UI"

From HIVE
Jump to navigation Jump to search
m
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
A custom user interface can be created to give a custom map a new look. There are two methods one can use to customize the UI of [[StarCraft II]], and they are not mutually exclusive.  
 
A custom user interface can be created to give a custom map a new look. There are two methods one can use to customize the UI of [[StarCraft II]], and they are not mutually exclusive.  
  
−
=SC2Layout - Custom Layout Files=
+
=UI Editor=
−
The first method is overriding the core UI code by importing custom SC2Layout files into your map that will modify it. This method is useful when one wants to make a brand new UI from scratch, repositioning all the built-in elements on the screen. The major downside to this is that the layout cannot be changed in game, other than being able to show and hide elements.
+
The first method is to use the built-in UI editor. This method is useful when one wants to make a brand new UI from scratch, repositioning all the built-in elements on the screen.
  
  
−
Before you can start modifying frames, you will need to know what frame to modify in the first place. The default UI .SC2Layout files can be found in the following areas using an [[MPQ]] editor. Note that GameUI.SC2Layout contains the data for the default UI, so most of the time that's what you'll be referring to.
+
To find any movable UI element, first check out the "GameUI" code. In the list on the left, you can easily jump down to sections of the GameUI code by selecting the overall area of the screen. For example, selecting GameUI > UIContainer > ConsoleUIContainer will jump down to all the elements related to the command panel and minimap.
−
*[SC2InstallationDir]\Mods\Core.SC2Mod\Base.SC2Data (core file)
 
−
**path: UI/Layout
 
−
*[SC2InstallationDir]\Versions\Base######\patch.SC2Archive (latest patch file)
 
−
**path: Mods/Core.SC2Mod/Base.SC2Data/UI/Layout
 
  
  
−
For a structured list of all Game UI frames, check out [http://109.71.49.81/SC2LayoutFrames.html Helral's list].
+
Creating your own modifications to the base UI can be done by adding your own layout to the list. To do this, go to '''"Data > Add Layout..."''' or use '''Ctrl+L'''. This creates a new blank set of code for you to add to as you make changes.
  
  
−
To add your customized SC2Layout file to your map, first import the file in the '''Import''' (F9) window and save. Then go into the Data Editor (F7) and under "Data Type:" select "Game UI Data." Now find "Default SC2 UI Settings" and select it. On the right, find "UI - Custom Layout Files" and double-click the field next to it to open an "Object Values" window. In this window, click the green X on the right, search for your newly imported SC2Layout file, and then click "Ok" a few times on the various open windows. Save and test your map.
+
Keep in mind that you must have the following on it in order for your code to work properly:
 +
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
 +
<Desc>
 +
</Desc>
  
  
−
If your SC2 crashes, that means your SC2Layout file has an error in it somewhere.
+
From there, you can add any UI frame to it that you wish to override. You can easily find any frame you want in the left-side list and then copy/paste it into your new layout. Remember that all your added code should be between the <Desc>...</Desc> tags.
  
  
−
==Templates==
+
When you finally decide to edit a frame, there's one more step you need to take before the override will work properly. Let's say you want to modify the minimap. Find the MinimapPanel frame and copy/paste it into your layout. You should have the following:
−
Most frames mentioned in the default UI link to a template, and have paths seen as "File/Template."
 
−
*"File" is the file (without the .SC2Layout extension) in which the template can be found.
 
−
*"Template" is the Template which is listed as a name of a frame in the file mentioned above.
 
−
 
 
−
 
 
−
For example, the MinimapPanel looks like this:
 
 
  <Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
 
  <Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
 +
      <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
 +
      <Width val="395"/>
 +
      <Height val="327"/>
 +
</Frame>
  
−
 
+
Just changing this wont be enough to override the base code, because the game doesn't know what this code is supposed to affect just yet. That's because taking it from the GameUI code assumes it is still in that framing structure. As explained above, you can use the list on the left of the UI editor to jump between sections of code when selecting the GameUI. This shows you the general framing structure of the GameUI. This is important because we need to include the path of frames in the '''name="MinimapPanel"''' section of our minimap code. Because we can find the minimap frame in GameUI > UIContainer > ConsoleUIContainer, we need to change the name of our frame to find this path. Therefore using the following will properly allow you to override the minimap for your custom UI. However, one last step is to be done, and it is to add '''file="GameUI"''' after that '''name''' tag, as shown below (notice how the '''template''' tag isn't required):
−
Sometimes you don't need to include the path to the template when overriding a frame. Instead, you would just refer to the position of the frame on the GameUI.SC2Layout file. Therefore, if you wanted to override the MinimapPanel, it would look like:
 
 
  <Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
 
  <Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
−
 
+
      <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
−
 
+
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
−
Keep in mind that '''file="GameUI"''' must be included as you are overriding an element in the GameUI.SC2Layout file. If you were to modify an element in another SC2Layout file, you would then change the '''file=''' to reflect this.
+
      <Width val="395"/>
 +
      <Height val="327"/>
 +
</Frame>
  
  
Line 61: Line 60:
 
       <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
 
       <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
 
       <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
 
       <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
 +
      <Width val="395"/>
 +
      <Height val="327"/>
 
  </Frame>
 
  </Frame>
 
*The first "Anchor" is basically managing where the Minimap is set horizontally. It is set to the ''Left'' side, connected to the "$parent" frame (in this case, $parent refers to the entire game's window), positioned at the "Min" point (so it sits on the left of the screen), and has no offset.
 
*The first "Anchor" is basically managing where the Minimap is set horizontally. It is set to the ''Left'' side, connected to the "$parent" frame (in this case, $parent refers to the entire game's window), positioned at the "Min" point (so it sits on the left of the screen), and has no offset.
Line 86: Line 87:
  
 
For example, to move the Minimap up 50 pixels and 30 pixels to the right, you would use the following:
 
For example, to move the Minimap up 50 pixels and 30 pixels to the right, you would use the following:
−
  <Anchor side="Bottom" relative="$parent" pos="Max" offset="50"/>
+
  <Anchor side="Bottom" relative="$parent" pos="Max" offset="-50"/>
 
  <Anchor side="Left" relative="$parent" pos="Min" offset="30"/>
 
  <Anchor side="Left" relative="$parent" pos="Min" offset="30"/>
−
 
  
 
==Hiding Frames==
 
==Hiding Frames==
Line 97: Line 97:
 
Yes, it is that simple. Place that between the '''<Frame name="..." type="...">''' and '''</Frame>''' tags and you should be good to go.
 
Yes, it is that simple. Place that between the '''<Frame name="..." type="...">''' and '''</Frame>''' tags and you should be good to go.
  
−
Note: You can't hide the friends button with this method. However, you can offset it until it's offscreen, if it is necessary to not have it visible.
+
Note: You can't hide the friends button with this method, or a number of other frames as well. However, you can offset them until they are offscreen, if it is necessary to not have them visible.
  
  
Line 103: Line 103:
 
If you are hiding or moving elements on the bottom of the UI (i.e. the info panel) and notice that there is a lingering black bar on the bottom of the screen, this can be removed as well with the following:
 
If you are hiding or moving elements on the bottom of the UI (i.e. the info panel) and notice that there is a lingering black bar on the bottom of the screen, this can be removed as well with the following:
  
−
  <Frame type="Frame" name="MenuBarConsoleAnchor">
+
<!-- Gets rid of the black bar at the bottom of the screen -->
−
      <Anchor side="Top" relative="$this" pos="Min" offset="0"/>
+
<Frame type="GameUI" name="GameUI" file="GameUI">
−
      <Anchor side="Left" relative="$this" pos="Min" offset="0"/>
+
<ConsoleWorldBottomOffset val="0"/>
−
      <Anchor side="Bottom" relative="$parent/$parent/$parent" pos="Max" offset="-600"/>
+
</Frame>
−
      <Anchor side="Right" relative="$parent/$parent/$parent" pos="Max" offset="-50"/>
+
 
−
  </Frame>
+
<!-- Gets rid of the unclickable region which is left when the black bar is removed -->
 +
<Frame name="GameUI/UIContainer/ConsolePanel" type="ConsolePanel" file="GameUI">
 +
<Anchor side="Left" relative="$this" pos="Min" offset="0"/>
 +
<Anchor side="Top" relative="$this" pos="Min" offset="0"/>
 +
<Anchor side="Right" relative="$parent" pos="Max" offset="9999"/>
 +
<Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
</Frame>
  
 
==Adding an Image Frame==
 
==Adding an Image Frame==
Line 124: Line 130:
 
This will center the [[Inventory]] buttons on the screen, and place them above the Info Panel.
 
This will center the [[Inventory]] buttons on the screen, and place them above the Info Panel.
 
{| class="collapsible collapsed"
 
{| class="collapsible collapsed"
−
!style="border: 1px solid #000; background: #333;" width="875pt"|Copy the following code into a new SC2Layout file
+
!style="border: 1px solid #000; background: #333;" width="875pt"|Copy the following code into your new layout file
 
|-
 
|-
 
|
 
|
−
<Desc>
 
 
     <Frame type="InventoryPanel" name="GameUI/UIContainer/ConsoleUIContainer/InventoryPanel" file="GameUI">
 
     <Frame type="InventoryPanel" name="GameUI/UIContainer/ConsoleUIContainer/InventoryPanel" file="GameUI">
 
         <Frame type="CommandTooltip" name="InventoryTooltip">
 
         <Frame type="CommandTooltip" name="InventoryTooltip">
Line 185: Line 190:
 
     </Frame>
 
     </Frame>
 
      
 
      
−
</Desc>
 
 
|}
 
|}
  
Line 192: Line 196:
 
[[File:MOBA CommandPanel.png|600px]]
 
[[File:MOBA CommandPanel.png|600px]]
  
−
It is common to see MOBA games (League of Legends, Heroes of Newerth, etc.) center 4 or 5 buttons near the bottom of the screen. This SC2Layout file will move the first 5 buttons on the command card to the center of the screen, and position them near the bottom.
+
It is common to see MOBA games (League of Legends, Heroes of Newerth, etc.) center 4 or 5 buttons near the bottom of the screen. This layout code will clear the whole screen from unwanted UIs and move certain buttons of the Command Card to the mid-bottom of the screen. It also moves the Chat. (See: http://i.imgur.com/tZosl1o.jpg)
−
 
 
−
Note that to get the full effect, you would either need to move around or use Triggers to hide the following panels:
 
−
*UI - Hide Info Panel for (All players)
 
−
*UI - Hide Control Group Panel for (All players)
 
−
*UI - Hide Console Panel for (All players)
 
−
*UI - Hide Inventory Panel for (All players) (Optional)
 
−
*UI - Hide Mission Time Panel for (All players) (Optional)
 
−
*UI - Hide Minimap Panel for (All players) (Optional)
 
  
 
{| class="collapsible collapsed"
 
{| class="collapsible collapsed"
−
!style="border: 1px solid #000; background: #333;" width="875pt"|Copy the following code into a new SC2Layout file
+
!style="border: 1px solid #000; background: #333;" width="875pt"|Copy the following code into your new layout file
 
|-
 
|-
−
|
+
|  
 +
 
  <?xml version="1.0" encoding="utf-8" standalone="yes"?>
 
  <?xml version="1.0" encoding="utf-8" standalone="yes"?>
−
  <Desc>     
+
  <Desc>
 +
   <Frame type="GameUI" name="GameUI" file="GameUI">
 +
      <ConsoleWorldBottomOffset val="0"/>
 +
  </Frame>
 +
 
 +
  <Frame type="ConsolePanel" name="GameUI/UIContainer/ConsolePanel" file="GameUI">
 +
      <Anchor side="Left" relative="$this" pos="Min" offset="0"/>
 +
      <Anchor side="Top" relative="$this" pos="Min" offset="0"/>
 +
      <Anchor side="Right" relative="$parent" pos="Max" offset="9999"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
  </Frame>
 +
 
 +
  <Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
 +
      <Anchor side="Left" relative="$this" pos="Min" offset="0"/>
 +
      <Anchor side="Right" relative="$this" pos="Min" offset="9999"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
  </Frame>
 +
 
 +
  <Frame type="MissionTimePanel" name="GameUI/UIContainer/ConsoleUIContainer/MissionTimePanel" file="GameUI">
 +
      <Anchor side="Right" relative="$parent" pos="Max" offset="9999"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
  </Frame>
 +
 
 +
  <Frame type="ResourcePanel" name="GameUI/UIContainer/FullscreenUpperContainer/ResourcePanel" file="GameUI">
 +
      <Anchor side="Right" relative="$parent" pos="Max" offset="9999"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
  </Frame>
 +
 
 +
  <Frame type="InfoPanel" name="GameUI/UIContainer/ConsoleUIContainer/InfoPanel" file="GameUI">
 +
      <Anchor side="Left" relative="$this" pos="Min" offset="0"/>
 +
      <Anchor side="Top" relative="$this" pos="Min" offset="0"/>
 +
      <Anchor side="Right" relative="$parent" pos="Max" offset="9999"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
 +
      <Width val="700"/>
 +
  </Frame>
 +
 
 +
  <Frame type="Frame" name="GameUI/UIContainer/FullscreenUpperContainer/MenuBarConsoleAnchor" file="GameUI">
 +
      <Anchor side="Right" relative="$parent" pos="Max" offset="0"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
 +
  </Frame>
 +
 
 
   <Frame type="CommandPanel" name="GameUI/UIContainer/ConsoleUIContainer/CommandPanel" file="GameUI">
 
   <Frame type="CommandPanel" name="GameUI/UIContainer/ConsoleUIContainer/CommandPanel" file="GameUI">
−
    <BatchImages val="true"/>
+
      <BatchImages val="true"/>
−
    <BatchText val="true"/>        
+
      <BatchText val="true"/>
−
    <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
+
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
−
    <Anchor side="Left" relative="$parent" pos="Mid" offset="-600"/>
+
      <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
−
    <Anchor side="Right" relative="$parent" pos="Mid" offset="600"/>
+
      <Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
−
    <Width val="385"/>
+
      <Width val="1700"/>
−
    <Height val="130"/>
+
      <Height val="200"/>
−
        <Frame type="CommandTooltip" name="CommandTooltip">
+
      <Frame type="CommandTooltip" name="CommandTooltip">
−
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="-130"/>
+
          <Anchor side="Bottom" relative="$parent" pos="Max" offset="-130"/>
−
            <Anchor side="Right" relative="$parent" pos="Mid" offset="220"/>
+
          <Anchor side="Right" relative="$parent" pos="Mid" offset="220"/>
−
        </Frame>
+
      </Frame>
−
        <Frame type="CommandButton" name="CommandButton00" template="CommandButton/CommandButtonTemplate">
+
 
−
            <Anchor side="Top" relative="$parent" pos="Min" offset="30"/>
+
      <Frame type="Image" name="CommandTargetImage">
−
            <Anchor side="Left" relative="$parent" pos="Min" offset="#CommandButtonGap"/>
+
          <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/>
−
        </Frame>
+
          <Anchor side="Right" relative="$parent" pos="Mid" offset="9999"/>
−
        <Frame type="CommandButton" name="CommandButton05" template="CommandButton/CommandButtonTemplate">
+
      </Frame>
−
            <Visible val='False'/>
+
 
−
            <Anchor side="Top" relative="$parent/CommandButton00" pos="Min" offset="0"/>
+
      <Frame type="CommandButton" name="CommandButton00">
−
            <Anchor side="Left" relative="$parent/CommandButton00" pos="Max" offset="#CommandButtonGap"/>
+
          <Anchor side="Top" relative="$parent" pos="Min" offset="9999"/>
−
        </Frame>
+
          <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
−
        <Frame type="CommandButton" name="CommandButton10" template="CommandButton/CommandButtonTemplate">
+
      </Frame>
−
            <Visible val='False'/>
+
 
−
            <Anchor side="Top" relative="$parent/CommandButton05" pos="Min" offset="0"/>
+
      <Frame type="CommandButton" name="CommandButton05">
−
            <Anchor side="Left" relative="$parent/CommandButton05" pos="Max" offset="#CommandButtonGap"/>
+
          <Anchor side="Top" relative="$parent" pos="Min" offset="50"/>
−
        </Frame>
+
          <Anchor side="Left" relative="$parent" pos="Mid" offset="-140"/>
 +
      </Frame>
 +
 
 +
      <Frame type="CommandButton" name="CommandButton10">
 +
          <Anchor side="Top" relative="$parent" pos="Min" offset="50"/>
 +
          <Anchor side="Left" relative="$parent" pos="Mid" offset="-240"/>
 +
      </Frame>
 +
 
 +
      <Frame type="CommandButton" name="CommandButton14">
 +
          <Anchor side="Top" relative="$parent" pos="Min" offset="9999"/>
 +
          <Anchor side="Left" relative="$parent" pos="Mid" offset="-285"/>
 +
      </Frame>
 +
  </Frame>
 +
 
 +
  <Frame type="MessageDisplay" name="GameUI/UIContainer/FullscreenUpperContainer/ChatDisplay" file="GameUI">
 +
      <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
 +
      <Anchor side="Bottom" relative="$parent" pos="Max" offset="-170"/>
 
   </Frame>
 
   </Frame>
 
  </Desc>
 
  </Desc>
 +
 +
 
|}
 
|}
  
Line 244: Line 299:
  
 
=See Also=
 
=See Also=
−
*[http://forums.sc2mapster.com/resources/tutorials/20323-sc2layout-files-override-method-aiurchef-method Helral's very complete original tutorial for SC2Layout files]
+
 
  
 
[[Category:StarCraft II]]
 
[[Category:StarCraft II]]
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 
[[Category:Triggers]]
 
[[Category:Triggers]]

Latest revision as of 05:59, 27 February 2016

A custom user interface can be created to give a custom map a new look. There are two methods one can use to customize the UI of StarCraft II, and they are not mutually exclusive.

UI Editor

The first method is to use the built-in UI editor. This method is useful when one wants to make a brand new UI from scratch, repositioning all the built-in elements on the screen.


To find any movable UI element, first check out the "GameUI" code. In the list on the left, you can easily jump down to sections of the GameUI code by selecting the overall area of the screen. For example, selecting GameUI > UIContainer > ConsoleUIContainer will jump down to all the elements related to the command panel and minimap.


Creating your own modifications to the base UI can be done by adding your own layout to the list. To do this, go to "Data > Add Layout..." or use Ctrl+L. This creates a new blank set of code for you to add to as you make changes.


Keep in mind that you must have the following on it in order for your code to work properly: 

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
</Desc>


From there, you can add any UI frame to it that you wish to override. You can easily find any frame you want in the left-side list and then copy/paste it into your new layout. Remember that all your added code should be between the <Desc>...</Desc> tags.


When you finally decide to edit a frame, there's one more step you need to take before the override will work properly. Let's say you want to modify the minimap. Find the MinimapPanel frame and copy/paste it into your layout. You should have the following: 

<Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
     <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
     <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
     <Width val="395"/>
     <Height val="327"/>
</Frame>

Just changing this wont be enough to override the base code, because the game doesn't know what this code is supposed to affect just yet. That's because taking it from the GameUI code assumes it is still in that framing structure. As explained above, you can use the list on the left of the UI editor to jump between sections of code when selecting the GameUI. This shows you the general framing structure of the GameUI. This is important because we need to include the path of frames in the name="MinimapPanel" section of our minimap code. Because we can find the minimap frame in GameUI > UIContainer > ConsoleUIContainer, we need to change the name of our frame to find this path. Therefore using the following will properly allow you to override the minimap for your custom UI. However, one last step is to be done, and it is to add file="GameUI" after that name tag, as shown below (notice how the template tag isn't required): 

<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
     <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
     <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
     <Width val="395"/>
     <Height val="327"/>
</Frame>


Frame Position

Positioning a frame on the screen requires the use of an <Anchor> tag.

Anchor tags can be modified with the following settings:

  • side - Left, Right, Top, Bottom
    • Determines the side of the frame you want to position.
  • relative - $this, $parent
    • Determines what this anchor is attached to.
      • $parent refers to the "parent" frame which it would be connected to. Most of the time, this will be the value you use.
      • $this resets the anchor.
  • pos - Min, Mid, Max
    • Determines where the frame will connect to on the parent frame.
      • Min refers to the minimum point
      • Mid refers to the center point
      • Max refers to the maximum point
  • offset - #
    • Determines the number of pixels that the frame should be adjusted in relation to the "pos." This can be a negative number as well.


For example, take a look at the base code for the Minimap: 

<Frame type="MinimapPanel" name="MinimapPanel" template="MinimapPanel/MinimapPanelTemplate">
     <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
     <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
     <Width val="395"/>
     <Height val="327"/>
</Frame>
  • The first "Anchor" is basically managing where the Minimap is set horizontally. It is set to the Left side, connected to the "$parent" frame (in this case, $parent refers to the entire game's window), positioned at the "Min" point (so it sits on the left of the screen), and has no offset.
  • The second "Anchor" is basically managing where the Minimap is set vertically It is set to the Bottom side, connected to the "$parent" frame again, positioned at the "Max" point (so it appears at the bottom of the screen, and actually on screen for that matter), and has no offset.


If you wanted to override this and move it to the top right of the frame instead, you would include the following: 

<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
  <Anchor side="Top" offset="0" pos="Min" relative="$parent"/>
  <Anchor side="Right" offset="0" pos="Max" relative="$parent"/>
  <Anchor side="Left" offset="0" pos="Min" relative="$this"/>
  <Anchor side="Bottom" offset="0" pos="Max" relative="$this"/>
</Frame>

You may be wondering why you have to include <Anchors /> for each side. This is because you are not only adding Anchors to move it to side=Top and side=Right, but also changing the existing side= Anchors included in the GameUI file. If you don't add the side=Left and side=Bottom Anchors to override the base settings, then your MinimapPanel will not be where you want it.


Offsets

You will need to use offsets to set the position of a frame at a specific point on the screen.

  • If you want to move it towards the left, decrease the offset of the left or right anchor.
  • If you want to move it towards the right, increase the offset of the left or right anchor.
  • If you want to move it towards the top, decrease the offset of the top or bottom anchor.
  • If you want to move it towards the bottom, increase the offset of the top or bottom anchor.


For example, to move the Minimap up 50 pixels and 30 pixels to the right, you would use the following: 

<Anchor side="Bottom" relative="$parent" pos="Max" offset="-50"/>
<Anchor side="Left" relative="$parent" pos="Min" offset="30"/>

Hiding Frames

To hide a frame using the override method (rather than hiding it via Triggers), just include the following: 

<Visible val='False'/>


Yes, it is that simple. Place that between the <Frame name="..." type="..."> and </Frame> tags and you should be good to go.

Note: You can't hide the friends button with this method, or a number of other frames as well. However, you can offset them until they are offscreen, if it is necessary to not have them visible.


Bottom Black Bar

If you are hiding or moving elements on the bottom of the UI (i.e. the info panel) and notice that there is a lingering black bar on the bottom of the screen, this can be removed as well with the following:

<Frame type="GameUI" name="GameUI" file="GameUI"> <ConsoleWorldBottomOffset val="0"/> </Frame>

<Frame name="GameUI/UIContainer/ConsolePanel" type="ConsolePanel" file="GameUI"> <Anchor side="Left" relative="$this" pos="Min" offset="0"/> <Anchor side="Top" relative="$this" pos="Min" offset="0"/> <Anchor side="Right" relative="$parent" pos="Max" offset="9999"/> <Anchor side="Bottom" relative="$parent" pos="Max" offset="9999"/> </Frame>

Adding an Image Frame

If you want to further customize the frames you move, you can add new borders to them.

This section is a stub. You can help out by adding more information.


Samples

Here are a few samples of common UI modifications.

Centered Inventory Buttons

CenterInventory.png

This will center the Inventory buttons on the screen, and place them above the Info Panel.


MOBA Command Card

MOBA CommandPanel.png

It is common to see MOBA games (League of Legends, Heroes of Newerth, etc.) center 4 or 5 buttons near the bottom of the screen. This layout code will clear the whole screen from unwanted UIs and move certain buttons of the Command Card to the mid-bottom of the screen. It also moves the Chat. (See: http://i.imgur.com/tZosl1o.jpg)

Dialogs

This section is a stub. You can help out by adding more information.

Work in progress.

See Also

Retrieved from "https://wiki.hiveworkshop.com/index.php?title=Custom_UI&oldid=4375"