SC2Mapster

In this tutorial I will explain how to modify the game UI using override files.
This will be done in several sessions.

Premade Custom SC2Layout Files

right click and select save as to download these layouts.

The following 4 SC2Layout files are used for this screenshot:link

Some panels are hidden with triggers and not with SC2Layout files.

• Hide the bottom console excluding, Minimap, UnitInfo, Portrait, CommandCard
• Hide the Minimap buttons (ping, toggle terrain, toggle alliance colors)
• Hides the Portrait Panel
• Moves the minimap to the Top Right and adds a frame around it.

Table of Contents

• Tutorials
• UI Video Tutorials
• Frequently Asked Questions
• UI Bugs and Fixes

Tutorials

• What are Layout Files and how can they help
• How to use custom layout files in your map
• How to adjust the correct frame
• How to move a frame
• How to hide a frame
• How to create an image frame

What are Layout Files and how can they help

Layout files also know as SC2Layout files, are the files used by SC2 to create the User Interface (UI) which the player sees. But custom map do not always have use for the default UI. When this happends you can adjust the UI by using Custom Layout files with override information. The information in these files is then combined with the default UI to create the UI for the players. This method allows you to only mention the changes to the UI in the custom UI files.

To adjust the UI you first need to know how the default UI is created. The default SC2Layout files can be found inside the following SC2Archive (MPQ) files:

• [SC2InstallationDir]\Mods\Core.SC2Mod\Base.SC2Data (core file)
  • path: UI/Layout
• [SC2InstallationDir]\Versions\Base123456\patch.SC2Archive (latest file)
  • path: Mods/Core.SC2Mod/Base.SC2Data/UI/Layout

123456 is the patch version number. The highest number is the latest patch. at the MPQ paths mention will be 3 directories:

• Common
  • Contains the most common elements for creating an UI also known for containing the default templates.
• Glue
  • Contains the NON-game UI Layout files
• UI
  • Contains the game UI Layout files.

The UI folder is the one in which you will be looking the most for information, although sometimes you will need files from the Common folder.

Most frame mentioned in the default UI have a template, its value consists usually out of 2 parts: Part1/Part2.
Part1 is the file (without the .SC2Layout extension) in which the template can be found. (eg MinimapPanel)
Part2 is the Template which is listed as a name of a frame in the file mentioned in Part1. (eg MinimapPanelTemplate)
The Frame that has the template name will contain more information about the frame which uses the template

So basicly the layout files should give you full control of the UserInterface.
But this list contains the things that are not adjustable in the SC2Layout files.

How to use custom layout files in your map

In the editor open up the UI Editor. There create a new Layout file. Enter the name of how you want to call your layout file. It creates a default xml with the following information:

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

You can either create the layout in this file, or copy/paste the contents of an existing layout file into this layout.

How to adjust the correct frame

Below I explain how to find the correct frame, but this page I created contains the needed information for finding the SC2Layout Frame in version 1.3
Structured Overview of all available Frames in the Game UI

So let's say you want to move the minimap, what frame name would you need to use?
you would think <frame type="MinimapPanel" name="MinimapPanel" file="GameUI"> would be correct, but it is not!!

To get the correct location we will open the GameUI.SC2Layout file and then look for the MinimapPanel definition:
Shrunk version of the GameUI limited only to the MinimapPanel info.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
    <Frame type="GameUI" name="GameUI">
        <!-- UI Container - for all ui elements above the world -->
        <Frame type="Frame" name="UIContainer">
            <!-- Console UI elements - elements attached to console -->
            <Frame type="Frame" name="ConsoleUIContainer">
                <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>
              </Frame>
            </Frame>
        </Frame>
    </Frame>
</Desc>

here we see that the structure is: (From top to bottom)

• GameUI
• UIContainer
• ConsoleUIContainer
• MinimapPanel

using this info we get the following name: "GameUI/UIContainer/ConsoleUIContainer/MinimapPanel"

so the correct frame definition for the override file would be:
<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">

Also take note that I did not mention the template here, because when this override file is handled the template has already been used.
If the information you want to adjust is part of a template just continue the conversion from the template point.
so adjust the pingbutton of the minimap would result in extending it to "GameUI/UIContainer/ConsoleUIContainer/MinimapPanel/PingButton", because at the MinimapPanelTemplate we have the following:

    <Frame type="MinimapPanel" name="MinimapPanelTemplate">
        <Frame type="Button" name="PingButton" template="MinimapPanel/MinimapButtonTemplate">
            <Anchor side="Right" relative="$parent" pos="Max" offset="-6"/>
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="-226"/>
            <Frame type="Image" name="Icon">
                <Texture val="@UI/MinimapPing"/>
            </Frame>
        </Frame>
    </Frame>

for continuing through a Template we skip the mentioning of the Template in the name.
"GameUI/UIContainer/ConsoleUIContainer/MinimapPanel/MinimapPanelTemplate/PingButton" would be wrong
"GameUI/UIContainer/ConsoleUIContainer/MinimapPanelTemplate/PingButton" is also wrong
"GameUI/UIContainer/ConsoleUIContainer/MinimapPanel/PingButton" is correct

Why do I need to use file="GameUI"?
The answer is you don't if you want to adjust a template. But keep in mind that all the default UI items are usually already generated so adjusting the template for them has no effect.
If you want to adjust default UI items you use GameUI as your file, and follow the location through as noted above.

How to move a frame

The Anchor tag explained:
<Anchor side="Top" relative="$parent" pos="Mid" offset="0"/>
They consist out of the following information:

1. side Left/Right/Top/Bottom - Side of the frame your positioning
2. relative Compared to what is this set | attached to what other frame
   1. $this as value here is used as a reset term for the anchor
   2. $parent is a reference to the parent to which it's connected
3. pos Min/Mid/Max - use the minimal value (0), the middle, or the maximum value (total right/bottom)
4. offset number of pixels that the position is adjusted (can be negative)

Let's take the Minimap as an example again.
above I mentioned the correct Frame setup for this frame.

Currently the frame has the following info:

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

now when I move it to the top right corner I need to do the following:

• First I use the correct frame info
• Next I create 2 Anchor setups which should move it to the top right corner. The result would look like this:

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

When testing this adjustment you will notice that the minimap is now in the center of the screen instead of the top right corner.
This is because the game also used the old anchors so it reads the following code for the minimap panel:

<Anchor side="Top" offset="0" pos="Min" relative="$parent"/>
<Anchor side="Right" offset="0" pos="Max" relative="$parent"/>
<Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
<Anchor side="Bottom" relative="$parent" pos="Max" offset="0"/>
<Width val="395"/>
<Height val="327"/>

To make it work as we want we will need to override the Left and Bottom Anchors as well as the Top and Right one.
We will set the offset to 0 and the relative to $this.
so our adjustment becomes 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>

Now the minimap does appear in the entire top right corner.

now if you wanted to move the minimap a little bit away from the top right corner we would need to use the offsets.
So how do the offsets work, it's actually very simple cause you would want to use one or more of the following actions:

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

so basicly moving the MinimapPanel down by 70 would result in the Anchor being adjust as follows:

  <Anchor side="Top" offset="70" pos="Min" relative="$parent"/>

If I would want to move it the same distance to the left then I would also adjust:

  <Anchor side="Right" offset="-70" pos="Min" relative="$parent"/>\\

You ll notice that the Right offset is negative while the top is positive as I have explained above, I needed to decrease the offset for moving to the Left, while increase the offset for moving to the Bottom.

How to hide a frame

Hiding a frame is easy, you first need to determine the frames name as said here
Then you add visible false to it like this:

<Frame name="..." type="...">
  <Visible val='False'/>
</Frame>

This setting does not work for frames which are adjusted by the game itself to become visible/hidden on request
Use the trigger method: "Hide UI Frame" to hide those frames instead.

If you can not hide the Element with the trigger method then you can use the following SC2Layout method instead:

1. Determine which anchors the Element has
2. Pick 1 anchor
3. Find the side in this list and adjust it as mentioned:
   1. side - Left: <Anchor side="Left" pos="Max" offset="500" relative="$Parent" />
   2. side - Right: <Anchor side="Right" pos="Min" offset="-500" relative="$Parent" />
   3. side - Top: <Anchor side="Top" pos="Max" offset="500" relative="$Parent" />
   4. side - Bottom: <Anchor side="Bottom" pos="Min" offset="-500" relative="$Parent" />
4. If the opposite side is also mentioned then add the following line depending on the opposite side:
   1. opposite side - Left: <Anchor side="Left" pos="Min" offset="0" relative="$this" />
   2. opposite side - Right: <Anchor side="Right" pos="Max" offset="0" relative="$this" />
   3. opposite side - Top: <Anchor side="Top" pos="Min" offset="0" relative="$this" />
   4. opposite side - Bottom: <Anchor side="Bottom" pos="Max" offset="0" relative="$this" />

The adjustments above will move it offscreen.

Pay attention to the fact that in the Data Editor, Data type: Game UI Data. there are 2 fields that affect the game screen:

1. World Console Top
2. World Console Bottom If either of these is not set to 0 then you will see a black border at the top or bottom if you make the default UI invisible.

How to create an image frame

still need to convert this into an actual tutorial

taken from the original post by petrov1
If you add an Frame of the type=image you can choose the texture it should have with the <Texture val="YourTexture"/>. Furthermore if you want it to become a border, much like the dialog items (image) created with triggers, you can use <TextureType val="Border" layer="0"/>.

The value of the Texture attribute can be:

• directly a file like: "MyCustomBackgroundImage.dds"
• a race dependent reference like "@@UI/TimerWindowBackground"
• a race-neutral reference like: "@UI/TimerWindowBackground".

You can replace the outer frame mention with whatever parent frame you want. It was added so you can use this entire example for testing what the result is. Don't forget to change the anchor references if you use it to add a background frame to another frame.

Here an example:

<Frame type='Frame' name='GameUI/UIContainer/ConsoleUIContainer' file='GameUI'>
       <Frame type="Image" name="CommandPanelFrame">
              <Visible val="true"/>
              <Anchor side="Top" relative="$parent/CommandPanel" pos="Min" offset="5"/>
              <Anchor side="Bottom" relative="$parent/CommandPanel" pos="Max" offset="0"/>
              <Anchor side="Left" relative="$parent/CommandPanel" pos="Min" offset="-35"/>
              <Width val="1585"/>
              <Height val="160"/>
              <Texture val="@@UI/TimerWindowBackground" layer="0"/>
              <TextureType val="Border" layer="0"/>
              <Tiled val="true" layer="0"/>
              <LayerColor val="##StandardBorder" layer="0"/>
              <RenderPriority val="500"/>
       </Frame>
</Frame>

WARNING: The result shown below is based on an already altered UI. Use a commandcard of 1x15 to get the same result as below.

more tutorials to come.

UI Video Tutorials

Command Panel Tutorial

Repositioning, resizing and modifying the command panel.
normally size: 3x5 position: bottom right
tutorial result: 1x15 position: bottom center
watch at 720p for readability :)

Unlike shown in this tutorial, the method to add the layout has changed as mentioned at this location: How to use custom layour files in your map

FAQ

Table of Contents:

1. How do I remove the black bar at the bottom of my screen?
2. SC2 Crashes when I use my Layout File
3. How do I remove an anchor?
4. What frame do I adjust to move the background for the Battle Net Friends Button?

1. How do I remove the black bar at the bottom of my screen?

Go to the Data Editor, data type: Game UI Data.
Select the Default UI Settings and then look for the World Console Bottom. (default value = 200)
Set it to 0. and the black bar at the bottom should be gone.

2. SC2 Crashes when I use my Layout File

There are multiple reasons why SC2 would crash when using a SC2Layout file:
if you did not use the override method then the game is probably expecting other information then what you are giving it.
If you did use the override method then check this list:

1. Are the Element types correctly spelled (case sensitive)
   eg. MiniMapPanel instead of MinimapPanel as type can crash the game.

3. How do I remove an Anchor?

You remove anchors by redefining them with an invalid reference. the most simple way to do that is by using one of the following 4 Anchors:

• <Anchor side="Left" pos="min" offset="0" relative="$this" />
• <Anchor side="Right" pos="max" offset="0" relative="$this" />
• <Anchor side="Top" pos="min" offset="0" relative="$this" />
• <Anchor side="Bottom" pos="max" offset="0" relative="$this" />

4. What frame do I adjust to move the background for the Battle Net Friends Button?

The following Frame setup does that:

<Frame type='Image' name='GameUI/UIContainer/ConsoleUIContainer/BattleNetButtonFriendsFrameImage' file='GameUI'>
  <Anchor side="Left" pos="min" offset="0" relative="$this" />
  <Anchor side="Right" pos="max" offset="0" relative="$this" />
  <Anchor side="Top" pos="min" offset="0" relative="$this" />
  <Anchor side="Bottom" pos="max" offset="0" relative="$this" />
</Frame>

change the relative of the anchors you want to use to $parent.

UI bugs and fixes

The following SC2Layout, Assets.txt files or Information is needed to fix certain UI bugs:
(the file which is linked to the described problem fixes this.)

• Hiding supply Icon leaves background of the icon visible: layout file fix
• The Hero Icon for zerg is green: fix information

The following frames are not completely affected by layout changes:

• Inventory Panel is not moved even though a different anchor is specified
• UserInfoGroup is always centered on the InfoPanel
• The battlenet friends button cannot be positioned using layout files, use this action instead:
  "Set BattleNet Button Offset".
• Supply Icon cannot be adjusted using the Texture tag: Assets.txt example

This is great! Thanks ^_^

@SaucySC: Go

Answered you in IRC :) adding it to the tutorial.

@Helral: Go

You know about the issue with the blue-ish square appearing, if you hide supply count, but not the whole resource panel? I was not able to remove it yet; if you have any insight on this, I would really apprechiate an addition to the tutorial ;).

Also I tried to move the mineral count (nothing fancy, just offset it a little to the left), but instead of moving it, it gets duplicated? I though, this would be impossible using the override method.

Well, I did not understand everything yet, just trying to adjust stuff, which sounds reasonable ;)

€ thanks, your fix works like a charm :)

@Kueken531: Go

Use the ingame function "Show/Hide UI Frame" with Hide and Supply Panel.
Then import the attached file into your map and set it as a custom layout file in the data editor.
I've moved the supplybackground away so it isn't visible anymore.

Is it possible to define your own hotkeys for things inside say a custom layout or a overridden layout? Would be very neat! :)

@SaucySC: Go

custom layouts just handle the User Interface not input done by the keyboard.

how do I anchor a panel for example if in the gameui its width already given and I want to anchor left and right?

@Hookah604: Go

depends on what you want to achieve with anchoring it left and right.
which of the following do you want to achieve?

1. I want the panel to stretch so that it fills up the space between the left and right anchor.
   * untested: set the left and right anchor, and then set the width to 0 or -1
2. I want it to be centered in the middle using the already defined width between the left and right anchor.
   * Set the left and right anchor.
3. I want something other then this namely ....

@Helral: Go

I want the first one... if I set to 0 than I wont have panel and if I set to -1 than it messes up everything.

@Hookah604: Go

I ll see if I can figure something out. any panel name which you're toying with.

ps. try the "auto" value.

@Helral: Go well I want to make a background for infopanel, but I want to still able to hide infopanel (with trigger) without hiding its background. After lots of trouble I decided to make the background of infopanel in the minimappanel, so I want to anchor minimappanel to commandpanel...

@Hookah604: Go

why not just create a new frame which you anchor between them which has the img?
see my minimap panel background in this layout file.

Hey Helral thanks once again for making a high level tutorial for more experienced mapmakers. I will probably have to do something quite similar to your setup on your first screenshot. ie I want minimap and inventory but hide the rest.

Thanks for explaining how to move ui panels and frames. I don't fully understand how to find the correct syntax of names for what I need to move. My goal is to move the chat box to the bottom right hand corner. Any tips would greatly be appreciated.

Great guide. But I've got a question :). Is it possible to have one unit's abilities contantly onscreen? Almost like a second command card, but for a unit you don't have selected? I could do it with a custom dialog, but that would sort of suck.

Also, where is the GameUI.SC2Layout file located?

Quote from nolliepoper: Go

Thanks for explaining how to move ui panels and frames. I don't fully understand how to find the correct syntax of names for what I need to move. My goal is to move the chat box to the bottom right hand corner. Any tips would greatly be appreciated.

1. Locate the chatbox in one of the sc2layout files.
2. Keep following the information upwards of the chatbox and note down the names of the parent elements.
3. If you find a name ending on Template then look where that Template is used and don't add the name ending on Template to the list.
4. the end result should start with "GameUI/"
5. look if the Top or Left anchors are defined
   * if so then add the remove anchors for the ones that are defined.
6. add the bottom/right anchor as you want it to be.

Quote from wingednosering: Go

Great guide. But I've got a question :). Is it possible to have one unit's abilities contantly onscreen? Almost like a second command card, but for a unit you don't have selected? I could do it with a custom dialog, but that would sort of suck.

not through SC2Layout files. maybe there is another method but I don't know of any.

Quote from wingednosering: Go

Also, where is the GameUI.SC2Layout file located?

in the latest Patch.Sc2Archive file under "Mods/Corse.SC2Mod/Base.SC2Data/UI/Layout/UI"

Quote from OneTwoSC: Go

Hey Helral thanks once again for making a high level tutorial for more experienced mapmakers. I will probably have to do something quite similar to your setup on your first screenshot. ie I want minimap and inventory but hide the rest.

well you can just use the SC2Layout files I supplied there, hide the other still unneeded panels with the Trigger: "Hide UI Frame" which I used for:

• Resource Panel
• Info Panel
• Inventory Panel
• Hero Panel
• Other Panels that I forgot ;p