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 :)
Table of Contents:
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.
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:
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:
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.
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.)
The following frames are not completely affected by layout changes:
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 :)
how do I anchor a panel for example if in the gameui its width already given and I want to anchor left and right?
Homepage: www.sc2goa.com
depends on what you want to achieve with anchoring it left and right.
which of the following do you want to achieve?
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.
SC2 video tutorials: http://www.youtube.com/onetwosc
p.s. I've quit mapping since Nov 2011.
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?
My Projects:
Quote from nolliepoper: GoThanks 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.
Quote from wingednosering: GoGreat 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: GoAlso, 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: GoHey 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:
Helral ModeratorIn 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.
Table of Contents
Tutorials
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:
123456 is the patch version number. The highest number is the latest patch. at the MPQ paths mention will be 3 directories:
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
Import the custom layout file into your SC2Map, after which you save the map.


Then you go to the Data editor, "Game UI Data" data type.
There you select the "Default SC2 UI Settings" (Dflt in raw)
in the field list go to the "UI - Custom Layout Files" (CGameUI_CustomLayourFileArray in raw) field, and add your newly imported SC2Layout file there.
and now the UI should have been adjusted as specified in the file.
What does the override file look like
it is basicly a text file with the following info:
This file usually has the extension ".SC2Layout". Then import the file as described here
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.
here we see that the structure is: (From top to bottom)
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:
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:
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:
now when I move it to the top right corner I need to do the following:
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:
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:
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:
so basicly moving the MinimapPanel down by 70 would result in the Anchor being adjust as follows:
If I would want to move it the same distance to the left then I would also adjust:
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:
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:
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:
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:
Here an example:
more tutorials to come.
Import screen
Data Editor screen
the UI of my RDM
Helral's Lair
Meow meoow meeow. I'm ze evil SC2MapsterKitten.
UI Tutorials listing
current projects: