Tutorials/Customizing Game UI Through The Editor
Note: Taken from a cache of the old SC2 blizzard forums, this thread is now does not exist in the new ones.
Original Post by: Tenarsis
Hi everyone, we've read your requests for additional documentation on how to customize the UI and have taken some time to write a short explanation and some quick examples. Rest assured that we are also working to improve these systems and provide more documentation as we have time and resources to do so.
Before describing some examples for the specific requests you have, I'd like to describe the basic approaches available to map makers for customizing the UI.
Trigger Dialog Items in the Trigger Editor:
Through triggers you have the capability to create new frames in the GameUI as well as hook up an existing frame to a Trigger Dialog item such that it can be dynamically controlled through triggers. For creating new frames you can either create it entirely through the Create Dialog Item actions or you can set up a layout in the UI Editor and use the Create Dialog Item From Template trigger action. If you'd like to just change the position or other properties of an existing GameUI element you can use the Hookup Standard Dialog Item trigger.
Layout files in the UI Editor:
New layout files can be created from the Data menu in the UI Editor or through the right-click context menu. Each layout file represents a set of frame description entries that will be used to define the default properties for a frame in the UI. These frame descriptions can be instantiated by the Create Dialog Item From Template trigger described above, but they can also be used to override existing properties of the Game UI. These overrides are accomplished by naming the frame with a path to another frame description that already exists and also require you to specify which file the overridden frame description came from. More details on this override process are below in the Layout example.
Move Existing UI Through Triggers Example:
First let's do this entirely through Triggers. Create a new Arcade map and open the Trigger Editor. Select the Melee Initialization trigger and add remove the existing Actions.
Next, we need to add new trigger actions from the Dialog category. Press Ctrl+W or right-click to add a new action and choose the Hookup Standard Dialog Item action. Change the parameters of this so that the Type is Panel and the Name is UIContainer/ConsoleUIContainer/MinimapPanel. The Name parameter should have UI to choose this from a tree view in a future patch rather than requiring you to type a string in, but you can use the UI Editor for now to browse the GameUI hierarchy and figure out the path for the control you want to hook up to.
Finally you can add a simple Move Dialog Item trigger and leave all of the parameters at their default values, which will position the Last Created Dialog Item in the Top Left.
You should then be able use Test Document and see that the Minimap is now anchored to the Top Left of the screen rather than the Bottom Left. Hopefully this basic tutorial gives you an idea of the types of modifications to built-in UI that can be accomplished with Triggers.
Move Existing UI Through Layout Files Example:
Next we'll make the same change entirely through the UI Editor. Save the old map if you still have it open, and create another new Arcade map. Open the UI Editor and add a new layout from the Data -> Add Layout... menu item and name it CustomGameUI. Add a new frame to this layout by right-clicking the layout in the tree view and choosing Add Frame. Name this MinimapPanel and click OK. The creation of this layout file alone won't have any impact on the game unless you call the Create Dialog Item From Template trigger to use it or follow the steps listed below to modify it into a UI override.
This sets up the basic structure of what we need through the UI, but the rest will require manual XML editing. In a future patch we will be adding additional support for visual editing in the UI Editor which should further automate the creation of the Layout XML described below. Basically, we are going to copy and paste the XML for the MinimapPanel, then modify it such that it overrides the existing MinimapPanel and adjusts the anchoring.
Expand the GameUI item in the treeview, then expand UIContainer, then expand ConsoleUIContainer, and select the MinimapPanel. This should take you to the XML for the MinimapPanel. Copy the XML beginning with <Frame type="MinimapPanel" and ending with </Frame>, then select your CustomGameUI layout and paste this over the XML for the MinimapPanel that you created.
You then need to change the name="MinimapPanel" attribute to name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel", which is the full path to the original MinimapPanel. Paths like this are constructed by separating the name of each parent frame with a front slash since there could potentially be more than one MinimapPanel in the UI. You also need to add a file="GameUI" attribute in order for the override to be applied to the correct file. The file attribute allows a single layout file to override different frames in different files but is also required even in the case of overriding a single file. These two changes are crucial in having the changes you are making take effect and the override will not function correctly without them.
Now to adjust the anchoring, change the relative="$parent" attribute in the Anchor data to relative="$parent/$parent" so that it is anchored to the full-screen UIContainer rather than the bottom-only ConsoleUIContainer. Change the side="Bottom" attribute to side="Top" and change the pos="Max" attribute to pos="Min" so that the MinimapPanel is anchored to the top-left of the UIContainer rather than the bottom-left of the ConsoleUIContainer.
You should now be able to use Test Document and see that the Minimap is now anchored the same as was previously done through triggers. In case you have trouble following those steps, the XML I created when writing this is listed below:
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <Desc>
<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI"> <Anchor side="Left" relative="$parent/$parent" pos="Min" offset="0"/> <Anchor side="Top" relative="$parent/$parent" pos="Min" offset="0"/> <Width val="395"/> <Height val="327"/> </Frame>
I hope these examples help you gain a better understanding of how to customize the UI. I'm more willing to provide more step by step examples for other types of UI customization if you can help describe exactly what you're trying to accomplish in detail.
Thanks for reading, and have fun modding the UI.