Tutorials

1. Tutorial by: Helral (SC2Layout Files Override Method) explains:
   1. What are Layout Files and how can they help
   2. How to use custom layout files in your map
   3. What does the override file look like
   4. How to adjust the correct frame
   5. How to move a frame
   6. How to hide a frame
   7. How to create an image frame

Blizzard own created UI

Galaxy / Import / Layout / Aiur Chef UI

Pay attention to these points when working with SC2Layout Files

1. Use file="GameUI" when adjusting UI elements which are already available.
2. Don't forget to add the imported layout files to the "Custom Layout Files" in the "Game UI Data" data type in the Data Editor
3. Setting an incorrect Type for a Frame might cause the game to crash untested
4. Hiding frames with <Visible val="False" /> only works for frames which aren't adjusted by the game itself. (no effect e.g. on the portrait or inventory)
5. Always surround the values with quotes (")

Template for Custom UI Files

Template File

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

</Desc>

Special Terms or Symbols

Asset Reference

Description

when referring to an asset like a texture or perhaps a model you can use this format:

• @@UI/ChatBarBorder = the file mentioned in the Assets.txt with the following paths: "UI/ChatBarBorder_Race" if it can't find that one then it looks for "UI/ChatBarBorder".
  Race being dependent on the players race (Prot/Terr/Zerg)
• @UI/ChatBarBorder = the file mentioned in the Assets.txt with the following path: "UI/ChatBarBorder". This one doesn't check race specific (unconfirmed)

Assets.txt (patch) is available for download here outdated
Assets.txt (base) is available for download here
Assets.txt (UI) is available for download here

Usage

<Texture val="@@UI/AIButton" layer="0"/>

References

Description

when referring to structural locations you can use the following options:

• $parent = The parent of the object this is listed in.
• $this = The element itself, usefull for reseting anchors.

Constants

Description

if you want to use the same value over and over, but when changing you want to have it easy you can use constants.

Options

name = The name of the constant, when setting a value you can refer to this by using the name and prefixing a "#" to it.
val = The value of the constant, when this constant is uses the value defined here.

Usage

<Constant name="InventoryButtonGap" val="-2"/>
<Anchor side="Right" relative="$parent/Button02" pos="Min" offset="#InventoryButtonGap"/>

Frame object

Frame

Description

an UI panel that is used to display elements inside of.

Options

type

The type of this UI frame (TODO: figure out what this is exactly for)

name

The name of this UI frame, usable for positioning stuff next to it or inside it or for usage as a template.

template

only works for new frames
The optional value if the contents is partially listed at another location, this way you don't have to create the same object over and over if most of the values stay the same.

file

The file in which the change takes place, usually has the value "GameUI"

Usage

<Frame type="CommandTooltip" name="MyTooltip" template="CommandButton/CommandTooltipTemplate">
</Frame>
<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
</Frame>

Frame contents

General Usage

all the content items in this section are used inside a frame markup like this:

<Frame name="myCustomFrame">
  <option1 attrib1="1"/>
  <Visible val="true"/>
</Frame>

Visible

Description

Determines if the frame should be visible at the map start.

Options

val = true or false depending on if you want it visible or not

Usage

<Visible val="true" />

Anchor

Description

Used to position a frame.
1 frame can have up to 4 anchors

Options

side

The side of the frame that you will position.
Possible values:

• Top
• Bottom
• Left
• Right

relative

The UI object on which it positions itself
Value setup:
1 or more Terms seperated by a backslash ( / )

Possible Terms:

• $Parent - The parent value of the element
• ChildName - The name of a child element

pos

The start location from where the offset is handled
Possible values:

• Min = the total top/left point of the frame mentioned at relative
• Mid = the middle point of the frame mentioned at relative
• Max = the total bottom/right point of the frame mentioned at relative

offset

Adjustment on the position for better positioning
Decreasing the offset (can become negative) will move the element to the left/top.
Increasing the offset will move the element to the right/bottom.

Usage

<Anchor side="Right" relative="$parent/ContainerPanel00" pos="Max" offset="0"/>

To "remove" an Anchor use this:

<Anchor side='Right' relative="$this" pos="Min" offset="0"/>

replace Right with the side of the Anchor you want to remove.

Height

Description

Sets the Height of the elements.
Overrides auto-calculated height using Anchors.

Options

Val

The height of this element

Usage

Example where the height of a frame named "myCustomFrame" is set to 250.

<Frame name="myCustomFrame">
  <Height val="250"/>
</Frame>

Width

Description

Sets the Width of the elements.
Overrides auto-calculated width using Anchors.

Options

Val

The width of this element

Usage

Example where the width of a frame named "myCustomFrame" is set to 250.

<Frame name="myCustomFrame">
  <Width val="250"/>
</Frame>

Texture

Description

Sets the texture for this Frame element. Usually used when the type of the frame is Image.

Options

val

The location or reference for the texture.
see the Asset Reference bit for referencing information.

layer

untested
The layer on which the image is placed. Sometimes you want to combine multiple images onto 1 Frame.

Usage

<Frame type='Image' name='MyBackgroundImage'>
  <Texture val='Assets\Textures\ui_help_frame_content.dds' layer='0'/>
  <Texture val='@@UI/StandardOuterBorder' layer='1'/>
</Frame>

TextureType

Description

The method used to generate the texture.
Border textures use a different method then normal ones.

Options

val

The method used.
Options:

• Normal: The image is not adjusted in any way for displaying.
• Border: The image is chopped up and put together again as displayed here: Border Texture explained
• None: unknown
• EndCap: unknown
• HorizontalBorder: unknown

layer

The texture on this layer is drawn using this method.

Usage

<Frame type='Image' name='MyBackgroundImage'>
  <TextureType val='Border' layer='0'/>
</Frame>

Copy Example

Description

Options

Usage

Available .SC2Layout files for editing

outdated

if a file is missing in the 1.3 patch list then use the file listed here instead to get the current frame information
The files below are all of Patch 1.2 unless stated otherwise

• Get all the files here. - Rar Archive of SC2Layout files

1. AchievementPanel.SC2Layout
2. AIFrames.SC2Layout
3. AlertPanel.SC2Layout
4. AlliancePanel.SC2Layout
5. BattleReportPanel.SC2Layout
6. BehaviorBar.SC2Layout
7. CampaignTemplates.SC2Layout
8. CashPanel.SC2Layout
9. CharacterSheetPanel.SC2Layout
10. ChatBar.SC2Layout
11. CommandButton.SC2Layout
12. CommandPanel.SC2Layout
13. ConsolePanel.SC2Layout
14. ControlGroupPanel.SC2Layout
15. ConversationPanel.SC2Layout
16. EquipmentIcon.SC2Layout
17. GameButton.SC2Layout
18. GameMenuDialog.SC2Layout
19. GameUI.SC2Layout
20. HeroPanel.SC2Layout
21. InfoPaneCargo.SC2Layout
22. InfoPaneGroup.SC2Layout
23. InfoPaneHero.SC2Layout
24. InfoPanel.SC2Layout
25. InfoPaneProgress.SC2Layout
26. InfoPaneQueue.SC2Layout
27. InfoPaneUnit.SC2Layout
28. InventoryPanel.SC2Layout
29. LeaderPanel.SC2Layout
30. MenuBar.SC2Layout
31. MercenaryPanel.SC2Layout
32. MessageLogDialog.SC2Layout
33. MinimapPanel.SC2Layout
34. MissionTimePanel.SC2Layout
35. ObjectivePanel.SC2Layout
36. ObserverPanel.SC2Layout
37. PausePanel.SC2Layout
38. PlanetPanel.SC2Layout
39. PortraitPanel.SC2Layout
40. PurchasePanel.SC2Layout
41. ReplayPanel.SC2Layout
42. ResearchPanel.SC2Layout
43. ResourcePanel.SC2Layout
44. ResourceRequestAlertPanel.SC2Layout
45. SubtitlePanel.SC2Layout
46. SystemAlertPanel.SC2Layout
47. SystemInfoPanel.SC2Layout
48. TeamResourcePanel.SC2Layout
49. TimePanel.SC2Layout
50. TriggerDialogFrame.SC2Layout
51. TriggerWindowPanel.SC2Layout
52. UnitButton.SC2Layout
53. UnitWireframe.SC2Layout
54. VictoryPanel.SC2Layout
55. WaitingForPlayersDialog.SC2Layout
56. WaitingForServerDialog.SC2Layout
57. WarningTimerPanel.SC2Layout
58. WorldTooltip.SC2Layout