<li><aclass="backlink"title="Click to do a full-text search for this title"href="./Using_the_GUIEditor?action=fullsearch&value=linkto%3A%22Using+the+GUIEditor%22&context=180">Using the GUIEditor</a></li>
<liclass="wikilink"><ahref="./GettingStarted.html">GettingStarted</a></li><liclass="wikilink"><ahref="./ScriptFile.html">ScriptFile</a></li><liclass="wikilink"><ahref="./MakeAMod.html">MakeAMod</a></li><liclass="wikilink"><ahref="./LevelEditor.html">LevelEditor</a></li><liclass="wikilink"><ahref="./FXEditor.html">FXEditor</a></li><liclass="wikilink"><ahref="./GUIEditor.html">GUIEditor</a></li><liclass="wikilink"><ahref="./Sounds.html">Sounds</a></li><liclass="wikilink"><ahref="./Animations.html">Animations</a></li><liclass="wikilink"><ahref="./ArtReference.html">ArtReference</a></li><liclass="wikilink"><ahref="./DownloadableContent.html">DownloadableContent</a></li><liclass="wikilink"><ahref="./RecentChanges.html">RecentChanges</a></li><liclass="wikilink"><ahref="./FindPage.html">FindPage</a></li><liclass="wikilink"><ahref="./HelpContents.html">HelpContents</a></li><liclass="current"><ahref="./Using_the_GUIEditor.html">Using the GUIEditor</a></li>
<spanclass="anchor"id="line-2"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-3"></span>The GUI editor can be started from the console with the <strong>editguis</strong> command. You can also start it via the command line by adding the <strong>+editguis</strong> parameter. <spanclass="anchor"id="line-4"></span><spanclass="anchor"id="line-5"></span><pclass="line862">The GUI editor contains four main areas: the <strong>GUI display</strong>, the <strong>Navigator</strong>, the <strong>Transformer</strong>, and the <strong>Properties window</strong>. <spanclass="anchor"id="line-6"></span><spanclass="anchor"id="line-7"></span><pclass="line862">The <strong>GUI display</strong> is the main working area of the editor. This area displays all of the *Def elements in the GUI including the Desktop. The basic display properties of this area can be modified under <strong>View>Options</strong>. *Def elements appear on the display as blue frames with handle controls on the sides and corners. <spanclass="anchor"id="line-8"></span><spanclass="anchor"id="line-9"></span><pclass="line862">The properties of a windowDef (rect, visible, etc.) are displayed in the <strong>Properties window</strong>. A separate Properties dialog can be brought up by hitting <strong>alt + Enter</strong> or double-clicking on the element. The Properties dialog contains three tabs: <strong>General</strong>, <strong>Image</strong>, and <strong>Text</strong>. All of these contain basic properties of the element which will be discussed individually in subsequent sections. The properties of an element can also be changed in the Properties window by clicking in the desired space to change a value, or clicking in an empty space to add a new property. <spanclass="anchor"id="line-10"></span><spanclass="anchor"id="line-11"></span><pclass="line862">The <strong>Navigator</strong> displays the *Def element tree of the GUI. The elements are layered and nested such that elements that are further down the tree are in a higher order than previous elements, and elements that are nested inside others are indented under their parent elements. Parent elements can be collapsed and expanded by clicking the arrow that appears to the left of them in the Navigator. For an element to be visible in its entirety, its parent window must be as large or bigger in size than the child element. The order of elements and their parent-child relationships can be changed within the Navigator -- see the section below on <strong>Working with Elements</strong>. <spanclass="anchor"id="line-12"></span><spanclass="anchor"id="line-13"></span><pclass="line862">The scripts that are associated with a windowDef appear in a separate editing area that can be brought up by hitting <strong>ctrl + Enter</strong> or by right-clicking on an element in either the display area or the Navigator and selecting "Scripts". See <ahref="./Scripting_Actions_and_Animations.html">Scripting Actions and Animations</a> for more information on scripts. <spanclass="anchor"id="line-14"></span><spanclass="anchor"id="line-15"></span><pclass="line867">
<spanclass="anchor"id="line-16"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-17"></span>In this document, <strong>windowDef</strong> is used to refer to any of the *Def elements since they share nearly all of the same properties. If something is different, it’ll be noted. <spanclass="anchor"id="line-18"></span><spanclass="anchor"id="line-19"></span><pclass="line862">GUIs are made up of individual elements, most of which are <strong>windowDefs</strong>. There are also choiceDefs, editDefs, and other *Defs that are described below. All windowDefs are contained in the <strong>Desktop</strong>, which is the master GUI parent element. When a windowDef is created, it’s nested under the Desktop. <aclass="nonexistent"href="./WindowDefs.html">WindowDefs</a> can be nested within other windowDefs, creating a parent-child relationship. <spanclass="anchor"id="line-20"></span><spanclass="anchor"id="line-21"></span><pclass="line862">A windowDef contains <strong><ahref="./Def_Flags.html">flags</a></strong> and <strong><ahref="./Scripting_Actions_and_Animations.html">scripts</a></strong>. The flags are values that determine basic properties of the windowDef such as size, visibility, color, etc. Scripts are nested inside the windowDef's braces and are executed depending on the circumstances. <spanclass="anchor"id="line-22"></span><spanclass="anchor"id="line-23"></span><pclass="line862">The Desktop also contains all the definitions for <strong>floats</strong>, <strong>vec4s</strong>, and <strong>namedEvents</strong> (see section 6). <spanclass="anchor"id="line-24"></span><spanclass="anchor"id="line-25"></span><pclass="line874">If you use the GUI editor, you generally won’t be manually writing a windowDef (although you could open a plain text file and hand-script a GUI this way). But it’s useful to know what the basic windowDef scripting looks like in case you have to go into the scripting text itself and manipulate things. The following example is what the scripting looks like for a couple of simple windowDefs in a GUI: <spanclass="anchor"id="line-26"></span><spanclass="anchor"id="line-27"></span><pclass="line867"><spanclass="anchor"id="line-28"></span><pre> windowDef element1
<spanclass="anchor"id="line-44"></span></pre><spanclass="anchor"id="line-45"></span><spanclass="anchor"id="line-46"></span><pclass="line874">The following example would be a windowDef that also contains some scripting that performs actions: <spanclass="anchor"id="line-47"></span><spanclass="anchor"id="line-48"></span><pclass="line867"><spanclass="anchor"id="line-49"></span><pre> windowDef element1
<spanclass="anchor"id="line-50"></span> {
<spanclass="anchor"id="line-51"></span> rect 0,0,640,480
<spanclass="anchor"id="line-65"></span></pre><spanclass="anchor"id="line-66"></span><spanclass="anchor"id="line-67"></span><pclass="line862">See <ahref="./Def_Flags.html">definitions on what each of the possible flags</a> of a windowDef are. <spanclass="anchor"id="line-68"></span><spanclass="anchor"id="line-69"></span><pclass="line874">There are two kinds of GUIs that can be created in the Quake 4 GUI system: menu and HUD GUIs and world GUIs. Menu and HUD GUIs are used as the basic game UI, while world GUIs are screens that players can walk up to and use in-game to solve puzzles, get information, or move around in the world (i.e., an elevator GUI that lets the player select a floor to move to). <spanclass="anchor"id="line-70"></span><spanclass="anchor"id="line-71"></span><spanclass="anchor"id="line-72"></span><pclass="line867">
<h2id="head-9f3d08b8878d2219e0b5f17c747c35101915997c">Working with Elements</h2>
<spanclass="anchor"id="line-73"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-74"></span>To move *Def elements around the display area, simply click and drag the element and move. To resize, simple click and drag a *Def element's control handle. The position and size of an element can also be controlled by the Properties dialog. <spanclass="anchor"id="line-75"></span><spanclass="anchor"id="line-76"></span><pclass="line862">To make an element the child of another element, first select the desired parent element. Then holding <strong>CTRL</strong>, select the desired child element. Then either right-click and select <strong>Arrange>Make Child</strong> or hit <strong>CTRL + \</strong>. To reverse this action, repeat the process using the Desktop as the desired parent element. When selecting elements, the first element selected will always be the parent element when the action is taken. Multiple children elements can be made by selecting more than one element after first selecting the parent element. <spanclass="anchor"id="line-77"></span><spanclass="anchor"id="line-78"></span><pclass="line862">The layer order of elements can be changed in the Navigator. To do so, select an element and then either right-click and choose <strong>Arrange</strong> and then an option to move to front, back, or bring forward or backward. This can also be accomplished via the keyboard shortcuts displayed in the right-click menu. <spanclass="anchor"id="line-79"></span><spanclass="anchor"id="line-80"></span><pclass="line862">The GUI editor also allows you to resize or move elements by using another element as a point of reference. To make two elements the same size, select the first element, which will be used as the point of reference, and then holding down <strong>CTRL</strong> select the second element, which will be resized. Right-click and select <strong>Align>Make Same Size</strong>. Select width, height, or both to resize. Multiple elements can be selected; the first element selected will always be the point of reference and all other selected elements will be resized accordingly. The <strong>Align</strong> option also allows you to align multiple elements along a primary element's left side, right side, top, bottom, or center. As with other actions, the first element will always be used as the point of reference and subsequently selected elements will be aligned accordingly. <spanclass="anchor"id="line-81"></span><spanclass="anchor"id="line-82"></span><spanclass="anchor"id="line-83"></span><pclass="line867">
<h2id="head-4fd42fb526907351d02639473c4b9065eb548af7">Working with Textures</h2>
<spanclass="anchor"id="line-84"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-85"></span>Elements reference <ahref="./ArtReference_Q4Shaders.html">materials</a> with the <strong>background</strong> property. All <ahref="./ArtReference_Q4Shaders.html">materials</a> used in GUIs must be sized in powers of 2. <ahref="./ArtReference_Q4Shaders.html">Materials</a> can be simple textures, or they can be <ahref="./ArtReference_Q4Shaders.html">shaders</a> defined in the <ahref="./ArtReference_Q4Shaders.html">.mtr</a> file. A default <ahref="./ArtReference_Q4Shaders.html">shader</a> will be used if the path used is not a <ahref="./ArtReference_Q4Shaders.html">shader</a> path, but a path directly to an image. This default <ahref="./ArtReference_Q4Shaders.html">shader</a> will be a 32bit alpha blend image <ahref="./ArtReference_Q4Shaders.html">shader</a>. Even when referencing a direct image, it is best to leave off the .tga at the end of the path. <spanclass="anchor"id="line-86"></span><spanclass="anchor"id="line-87"></span><spanclass="anchor"id="line-88"></span><pclass="line867">
<h2id="head-06c7685751ee7872398b69256a4ed39a4ce3f324">Using the Viewer</h2>
<spanclass="anchor"id="line-89"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-90"></span>Hitting <strong>CTRL + T</strong> will display the GUI Viewer. This window shows the loaded GUI exactly as it would appear in-game, allowing you to test your GUI's functionality. <spanclass="anchor"id="line-91"></span><spanclass="anchor"id="line-92"></span><spanclass="anchor"id="line-93"></span><pclass="line867">
<spanclass="anchor"id="line-94"></span><pclass="line867"><hr/><pclass="line874"><spanclass="anchor"id="line-95"></span>There are several display options under the <strong>View</strong> tab. Zooming in and out is self-explanatory. <strong>Hide/Show</strong> will hide or show selected elements, or will unhide all elements. <strong>Show Outlines</strong> will show outlines for all elements in the GUI. <strong>Show Grid</strong> will display the grid, which is customizable under <strong>View>Options</strong>. <strong>Snap to Grid</strong> will snap an element's position to the grid. <strong>Show Safe Area</strong> is used only for GUIs developed for consoles and displays the region which elements must stay inside in order to not be potentially clipped off by a TV screen. <spanclass="anchor"id="line-96"></span><spanclass="anchor"id="line-97"></span><pclass="line862">There are two options under the <strong>Tools</strong> menu option. <strong>Viewer</strong> has already been discussed. <strong>Reload <ahref="./ArtReference_Q4Shaders.html">Materials</a></strong> (<strong>CTRL + M</strong>) will reload the textures used in your GUI. This is especially helpful if you've changed a texture and want to quickly refresh your GUI to see the change. <spanclass="anchor"id="line-98"></span><spanclass="anchor"id="line-99"></span><pclass="line862">The <strong>Localize Current GUI</strong> option takes all text strings in the GUI and saves them out as "#str_xxxxxx" values referenced in *.lang files. This is used to ensure easy GUI localization for other languages. <spanclass="anchor"id="line-100"></span><spanclass="anchor"id="bottom"></span></div><pid="pageinfo"class="info"lang="en"dir="ltr">Using the GUIEditor (last edited 2005-11-04 21:17:17 by <spantitle="MattVainio @ 67.129.250.254[67.129.250.254]"><aclass="nonexistent"href="./MattVainio.html"title="MattVainio @ 67.129.250.254[67.129.250.254]">MattVainio</a></span>)</p>
<li><ahref="http://moinmoin.wikiwikiweb.de/">MoinMoin Powered</a></li><li><ahref="http://www.python.org/">Python Powered</a></li><li><ahref="http://validator.w3.org/check?uri=referer">Valid HTML 4.01</a></li>
