Custom UI

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

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.

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.

• [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 Helral's list.

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.

If your SC2 crashes, that means your SC2Layout file has an error in it somewhere.

Templates

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">

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">

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.

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"/>
</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. However, you can offset it until it's offscreen, if it is necessary to not have it 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="Frame" name="MenuBarConsoleAnchor">
      <Anchor side="Top" relative="$this" pos="Min" offset="0"/>
      <Anchor side="Left" relative="$this" pos="Min" offset="0"/>
      <Anchor side="Bottom" relative="$parent/$parent/$parent" pos="Max" offset="-600"/>
      <Anchor side="Right" relative="$parent/$parent/$parent" pos="Max" offset="-50"/>
 </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

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

Copy the following code into a new SC2Layout file

<Desc> <Frame type="InventoryPanel" name="GameUI/UIContainer/ConsoleUIContainer/InventoryPanel" file="GameUI"> <Frame type="CommandTooltip" name="InventoryTooltip"> <Anchor side="Bottom" relative="$parent" pos="Max" offset="-330"/> <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/> <Anchor side="Right" relative="$parent" pos="Mid" offset="0"/> </Frame> <Frame type="InventoryContainer" name="InventoryButtons"> <Anchor side="Bottom" relative="$parent" pos="Max" offset="-210"/> <Anchor side="Left" relative="$parent" pos="Mid" offset="0"/> <Anchor side="Right" relative="$parent" pos="Mid" offset="0"/> <Frame type="CommandButton" name="Button05"> <Anchor side="Bottom" relative="$parent" pos="Max" offset="-28"/> <Anchor side="Right" relative="$parent" pos="Max" offset="-20"/> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="CommandButton" name="Button04"> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="CommandButton" name="Button03"> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="CommandButton" name="Button02"> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="CommandButton" name="Button01"> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="CommandButton" name="Button00"> <Width val="50"/> <Height val="50"/> </Frame> <Frame type="Frame" name="ContainerSizeFrame"> <Anchor side="Top" relative="$parent/Button00" pos="Min" offset="-18"/> <Anchor side="Bottom" relative="$parent/Button00" pos="Max" offset="28"/> <Anchor side="Left" relative="$parent/Button00" pos="Min" offset="-20"/> <Anchor side="Right" relative="$parent/Button05" pos="Max" offset="20"/> </Frame> <Frame type="Image" name="BackgroundImage"> <Anchor side="Top" relative="$parent" pos="Min" offset="0"/> <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/> <Anchor side="Left" relative="$parent" pos="Min" offset="0"/> <Anchor side="Right" relative="$parent" pos="Max" offset="0"/> <Texture val="@@UI/RevealPanelBorder"/> <TextureType val="Border"/> <RenderPriority val="500"/> </Frame> </Frame> </Frame> </Desc>

MOBA Command Card

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.

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)

Copy the following code into a new SC2Layout file

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <Desc> <Frame type="CommandPanel" name="GameUI/UIContainer/ConsoleUIContainer/CommandPanel" file="GameUI"> <BatchImages val="true"/> <BatchText val="true"/> <Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/> <Anchor side="Left" relative="$parent" pos="Mid" offset="-600"/> <Anchor side="Right" relative="$parent" pos="Mid" offset="600"/> <Width val="385"/> <Height val="130"/> <Frame type="CommandTooltip" name="CommandTooltip"> <Anchor side="Bottom" relative="$parent" pos="Max" offset="-130"/> <Anchor side="Right" relative="$parent" pos="Mid" offset="220"/> </Frame> <Frame type="CommandButton" name="CommandButton00" template="CommandButton/CommandButtonTemplate"> <Anchor side="Top" relative="$parent" pos="Min" offset="30"/> <Anchor side="Left" relative="$parent" pos="Min" offset="#CommandButtonGap"/> </Frame> <Frame type="CommandButton" name="CommandButton05" template="CommandButton/CommandButtonTemplate"> <Visible val='False'/> <Anchor side="Top" relative="$parent/CommandButton00" pos="Min" offset="0"/> <Anchor side="Left" relative="$parent/CommandButton00" pos="Max" offset="#CommandButtonGap"/> </Frame> <Frame type="CommandButton" name="CommandButton10" template="CommandButton/CommandButtonTemplate"> <Visible val='False'/> <Anchor side="Top" relative="$parent/CommandButton05" pos="Min" offset="0"/> <Anchor side="Left" relative="$parent/CommandButton05" pos="Max" offset="#CommandButtonGap"/> </Frame> </Frame> </Desc>

Dialogs

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

Work in progress.

See Also

• Helral's very complete original tutorial for SC2Layout files