mirror of
https://github.com/dhewm/iddevnet.git
synced 2024-11-22 04:21:59 +00:00
258 lines
17 KiB
HTML
258 lines
17 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<meta name="robots" content="index,nofollow">
|
|
|
|
<title>Guidelines for GUI Editing and Creation - Quake 4 SDK Documentation</title>
|
|
<script type="text/javascript" src="wiki/common/js/common.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
<!--// common functions
|
|
|
|
// We keep here the state of the search box
|
|
searchIsDisabled = false;
|
|
|
|
function searchChange(e) {
|
|
// Update search buttons status according to search box content.
|
|
// Ignore empty or whitespace search term.
|
|
var value = e.value.replace(/\s+/, '');
|
|
if (value == '' || searchIsDisabled) {
|
|
searchSetDisabled(true);
|
|
} else {
|
|
searchSetDisabled(false);
|
|
}
|
|
}
|
|
|
|
function searchSetDisabled(flag) {
|
|
// Enable or disable search
|
|
document.getElementById('fullsearch').disabled = flag;
|
|
document.getElementById('titlesearch').disabled = flag;
|
|
}
|
|
|
|
function searchFocus(e) {
|
|
// Update search input content on focus
|
|
if (e.value == 'Search') {
|
|
e.value = '';
|
|
e.className = '';
|
|
searchIsDisabled = false;
|
|
}
|
|
}
|
|
|
|
function searchBlur(e) {
|
|
// Update search input content on blur
|
|
if (e.value == '') {
|
|
e.value = 'Search';
|
|
e.className = 'disabled';
|
|
searchIsDisabled = true;
|
|
}
|
|
}
|
|
|
|
function actionsMenuInit(title) {
|
|
// Initialize action menu
|
|
for (i = 0; i < document.forms.length; i++) {
|
|
var form = document.forms[i];
|
|
if (form.className == 'actionsmenu') {
|
|
// Check if this form needs update
|
|
var div = form.getElementsByTagName('div')[0];
|
|
var label = div.getElementsByTagName('label')[0];
|
|
if (label) {
|
|
// This is the first time: remove label and do buton.
|
|
div.removeChild(label);
|
|
var dobutton = div.getElementsByTagName('input')[0];
|
|
div.removeChild(dobutton);
|
|
// and add menu title
|
|
var select = div.getElementsByTagName('select')[0];
|
|
var item = document.createElement('option');
|
|
item.appendChild(document.createTextNode(title));
|
|
item.value = 'show';
|
|
select.insertBefore(item, select.options[0]);
|
|
select.selectedIndex = 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//-->
|
|
</script>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="wiki/modern/css/common.css">
|
|
<link rel="stylesheet" type="text/css" charset="utf-8" media="screen" href="wiki/modern/css/screen.css">
|
|
<link rel="stylesheet" type="text/css" charset="utf-8" media="print" href="wiki/modern/css/print.css">
|
|
<link rel="stylesheet" type="text/css" charset="utf-8" media="projection" href="wiki/modern/css/projection.css">
|
|
|
|
<!-- css only for MSIE browsers -->
|
|
<!--[if IE]>
|
|
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="wiki/modern/css/msie.css">
|
|
<![endif]-->
|
|
|
|
|
|
|
|
<link rel="Start" href="./Quake4SDK">
|
|
<link rel="Alternate" title="Wiki Markup" href="./Guidelines_for_GUI_Editing_and_Creation?action=raw">
|
|
<link rel="Alternate" media="print" title="Print View" href="./Guidelines_for_GUI_Editing_and_Creation?action=print">
|
|
<link rel="Search" href="./FindPage">
|
|
<link rel="Index" href="./TitleIndex">
|
|
<link rel="Glossary" href="./WordIndex">
|
|
<link rel="Help" href="./HelpOnFormatting">
|
|
</head>
|
|
|
|
<body lang="en" dir="ltr">
|
|
|
|
<div id="header">
|
|
<div id="logo"><a href="./Quake4SDK"><img src="wiki/common/moinmoin.png" alt="MoinMoin Logo"></a></div>
|
|
|
|
<form id="searchform" method="get" action="">
|
|
<div>
|
|
<input type="hidden" name="action" value="fullsearch">
|
|
<input type="hidden" name="context" value="180">
|
|
<label for="searchinput">Search:</label>
|
|
<input id="searchinput" type="text" name="value" value="" size="20"
|
|
onfocus="searchFocus(this)" onblur="searchBlur(this)"
|
|
onkeyup="searchChange(this)" onchange="searchChange(this)" alt="Search">
|
|
<input id="titlesearch" name="titlesearch" type="submit"
|
|
value="Titles" alt="Search Titles">
|
|
<input id="fullsearch" name="fullsearch" type="submit"
|
|
value="Text" alt="Search Full Text">
|
|
</div>
|
|
</form>
|
|
<script type="text/javascript">
|
|
<!--// Initialize search form
|
|
var f = document.getElementById('searchform');
|
|
f.getElementsByTagName('label')[0].style.display = 'none';
|
|
var e = document.getElementById('searchinput');
|
|
searchChange(e);
|
|
searchBlur(e);
|
|
//-->
|
|
</script>
|
|
|
|
<ul id="username"><li><a href="./Guidelines_for_GUI_Editing_and_Creation?action=login" id="login">Login</a></li></ul>
|
|
<div id="locationline">
|
|
|
|
|
|
<ul id="pagelocation">
|
|
<li><a class="backlink" title="Click to do a full-text search for this title" href="./Guidelines_for_GUI_Editing_and_Creation?action=fullsearch&value=linkto%3A%22Guidelines+for+GUI+Editing+and+Creation%22&context=180">Guidelines for GUI Editing and Creation</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
|
|
<ul id="navibar">
|
|
<li class="wikilink"><a href="./GettingStarted">GettingStarted</a></li><li class="wikilink"><a href="./ScriptFile">ScriptFile</a></li><li class="wikilink"><a href="./MakeAMod">MakeAMod</a></li><li class="wikilink"><a href="./LevelEditor">LevelEditor</a></li><li class="wikilink"><a href="./FXEditor">FXEditor</a></li><li class="wikilink"><a href="./GUIEditor">GUIEditor</a></li><li class="wikilink"><a href="./Sounds">Sounds</a></li><li class="wikilink"><a href="./Animations">Animations</a></li><li class="wikilink"><a href="./ArtReference">ArtReference</a></li><li class="wikilink"><a href="./DownloadableContent">DownloadableContent</a></li><li class="wikilink"><a href="./RecentChanges">RecentChanges</a></li><li class="wikilink"><a href="./FindPage">FindPage</a></li><li class="wikilink"><a href="./HelpContents">HelpContents</a></li><li class="current"><a href="./Guidelines_for_GUI_Editing_and_Creation">Guidelines ...nd Creation</a></li>
|
|
</ul>
|
|
|
|
<div id="pageline"><hr style="display:none;"></div>
|
|
|
|
<ul class="editbar"><li><span class="disabled">Immutable Page</span></li><li><a href="./Guidelines_for_GUI_Editing_and_Creation?action=info">Info</a></li><li><a href="./Guidelines_for_GUI_Editing_and_Creation?action=AttachFile">Attachments</a></li><li>
|
|
<form class="actionsmenu" method="get" action="">
|
|
<div>
|
|
<label>More Actions:</label>
|
|
<select name="action"
|
|
onchange="if ((this.selectedIndex != 0) &&
|
|
(this.options[this.selectedIndex].disabled == false)) {
|
|
this.form.submit();
|
|
}
|
|
this.selectedIndex = 0;">
|
|
<option value="raw">Raw Text</option>
|
|
<option value="print">Print View</option>
|
|
<option value="RenderAsDocbook">Render as Docbook</option>
|
|
<option value="refresh">Delete Cache</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="SpellCheck">Check Spelling</option>
|
|
<option value="LikePages">Like Pages</option>
|
|
<option value="LocalSiteMap">Local Site Map</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="RenamePage" disabled class="disabled">Rename Page</option>
|
|
<option value="DeletePage" disabled class="disabled">Delete Page</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="MyPages">My Pages</option>
|
|
<option value="SubscribeUser">Subscribe User</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="Despam">Remove Spam</option>
|
|
<option value="PackagePages">Package Pages</option>
|
|
</select>
|
|
<input type="submit" value="Do">
|
|
</div>
|
|
<script type="text/javascript">
|
|
<!--// Init menu
|
|
actionsMenuInit('More Actions:');
|
|
//-->
|
|
</script>
|
|
</form>
|
|
</li></ul>
|
|
|
|
</div>
|
|
|
|
<div id="page" lang="en" dir="ltr">
|
|
<div dir="ltr" id="content" lang="en"><span class="anchor" id="top"></span>
|
|
<span class="anchor" id="line-1"></span><ul><li>Use generalized animations to do basic, repeatable functions in your GUIs. For example, if you're using popups in your menu, create a single animation or named event that brings the generic popup graphics up, and then set a desktop float that will be checked in an if statement to determine which message to show on top of it. <span class="anchor" id="line-2"></span><span class="anchor" id="line-3"></span><span class="anchor" id="line-4"></span></li><li class="gap"><p class="line862">Organize your GUIs and use the parent-child relationship of nested <a href="./Def_Types">windowDefs</a> to keep things organized. For example, if you have several animation <a href="./Def_Types">windowDefs</a>, house them all under a parent windowDef marked "p_anims" or something similar. <span class="anchor" id="line-5"></span><span class="anchor" id="line-6"></span><span class="anchor" id="line-7"></span></li><li class="gap"><p class="line862">If you plan to resize <a href="./Def_Types">windowDefs</a> through transitions frequently, it's helpful to create an invisible <a href="./Def_Types">windowDef</a> that is sized to the new size and then using this <a href="./Def_Types">windowDef</a> in your transition command accordingly, where "window1_newsize" is the invisible <a href="./Def_Types">windowDef</a>: <span class="anchor" id="line-8"></span></li></ul><p class="line867"><span class="anchor" id="line-9"></span><pre> transition "window1::rect" "$window1::rect" "$window1_newsize::rect" "250" ;
|
|
<span class="anchor" id="line-10"></span></pre><span class="anchor" id="line-11"></span><ul><li><p class="line862">If your menus get large, it's helpful to create a few reset animations or named events that sets everything in a particular group of <a href="./Def_Types">windowDefs</a> back to a default value. For example, you may want to reset a screen of buttons back to an unhighlighted default state. <span class="anchor" id="line-12"></span><span class="anchor" id="line-13"></span><span class="anchor" id="line-14"></span></li><li class="gap"><p class="line862">Use <a href="./Scripting_Actions_and_Animations#animations">animations</a> when you know you need something to happen over time steps. Use <a class="nonexistent" href="./Floats%252C_Definevec4%252C_and_NamedEvents#namedevent">named events</a> when you just want to set properties instantly. <span class="anchor" id="line-15"></span><span class="anchor" id="line-16"></span><span class="anchor" id="line-17"></span></li><li class="gap">Statements in a script in the GUI system are executed simultaneously. If you want certain steps to happen before others, you must use an animation. <span class="anchor" id="line-18"></span><span class="anchor" id="line-19"></span><span class="anchor" id="line-20"></span></li><li class="gap">Avoid calling named events or using the set "cmd" or consoleCmd statements in animations. If a frame gets dropped and your command or named event call is in that frame, it won't be executed and will break the GUI. <span class="anchor" id="line-21"></span><span class="anchor" id="line-22"></span><span class="anchor" id="line-23"></span></li><li class="gap"><p class="line862">If your <a href="./GUIEditor">GUIEditor</a> crashes when you try to load a GUI, it's probably because of an error in your scripting. The most common culprits are brace errors or bad if statements. Since the <a href="./GUIEditor">GUIEditor</a> lacks an error feedback system, it's best to save different versions of your gui files in case one becomes corrupted. Try to remember which area you were working in and if possible use an advanced editor such as Ultra Edit so that you can compare files against each other to spot differences that might have caused the crash/corruption. <span class="anchor" id="line-24"></span><span class="anchor" id="line-25"></span><span class="anchor" id="line-26"></span></li><li class="gap"><p class="line862">It's possible to use math statements in your Desktop header and element properties to achieve certain effects, such as dynamic placement. For examples of this, look at <strong>scoreboard.gui</strong> and <strong>mpmain.gui</strong>. But be careful! The <a href="./GUIEditor">GUIEditor</a> has been known to corrupt Desktop headers with math statements in them if you open the Desktop scripting window in the editor. Saving a copy of your Desktop header to copy and paste in if this happens is usually helpful. <span class="anchor" id="line-27"></span><span class="anchor" id="line-28"></span></li></ul><p class="line874">Example, A desktop header script such as this: <span class="anchor" id="line-29"></span><span class="anchor" id="line-30"></span><pre>windowDef Desktop
|
|
<span class="anchor" id="line-31"></span>{
|
|
<span class="anchor" id="line-32"></span> rect 0,0,640,480
|
|
<span class="anchor" id="line-33"></span> visible 1
|
|
<span class="anchor" id="line-34"></span> nocursor 1
|
|
<span class="anchor" id="line-35"></span> menugui 1
|
|
<span class="anchor" id="line-36"></span> float "igOffset" 282-((32*"gui::ig_awards")/2)
|
|
<span class="anchor" id="line-37"></span> float "aim_fade_time" 10000 - "gui::main_notice_duration"
|
|
<span class="anchor" id="line-38"></span></pre><span class="anchor" id="line-39"></span><span class="anchor" id="line-40"></span><span class="anchor" id="line-41"></span><p class="line862">Will turn into this: (<em>note the quotes that were stripped, this will break these script arguments</em>) <span class="anchor" id="line-42"></span><span class="anchor" id="line-43"></span><pre>windowDef Desktop
|
|
<span class="anchor" id="line-44"></span>{
|
|
<span class="anchor" id="line-45"></span> rect 0,0,640,480
|
|
<span class="anchor" id="line-46"></span> visible 1
|
|
<span class="anchor" id="line-47"></span> nocursor 1
|
|
<span class="anchor" id="line-48"></span> menugui 1
|
|
<span class="anchor" id="line-49"></span> float "igOffset" 282-((32*gui::ig_awards)/2)
|
|
<span class="anchor" id="line-50"></span> float "aim_fade_time" 10000-gui::main_notice_duration
|
|
<span class="anchor" id="line-51"></span></pre><span class="anchor" id="line-52"></span><ul><li><p class="line862">The Desktop is a <a href="./Def_Types">windowDef</a> just like all the others, and its properties can be modified as such. For instance, if you want to bring up a semi-transparent overlay, give the Desktop of your GUI a backcolor of 0,0,0,0.5. <span class="anchor" id="line-53"></span><span class="anchor" id="line-54"></span><span class="anchor" id="line-55"></span></li><li class="gap"><p class="line862">All elements in an GUI must have a unique name. When duplicating elements or creating new ones, the <a href="./GUIEditor">GUIEditor</a> will sometimes give them unique names, but sometimes will not. If your elements don't have unique names the functionality of your GUI will likely be broken. If you save and close a gui that has multiple windows with the same name, it is possible to hand-edit the gui to fix this. However, if you instead save and close the <a href="./GUIEditor">GUIEditor</a>, your work can be lost. <span class="anchor" id="line-56"></span><span class="anchor" id="line-57"></span><span class="anchor" id="line-58"></span></li><li class="gap">GUI variables must be explicitly sent to each GUI that references them. If your GUI variable isn't working, try checking the code to be sure it's sending it to the right GUI. <span class="anchor" id="line-59"></span></li></ul><span class="anchor" id="bottom"></span></div><p id="pageinfo" class="info" lang="en" dir="ltr">Guidelines for GUI Editing and Creation (last edited 2005-11-04 23:00:40 by <span title="MattVainio @ 67.129.250.254[67.129.250.254]"><a class="nonexistent" href="./MattVainio" title="MattVainio @ 67.129.250.254[67.129.250.254]">MattVainio</a></span>)</p>
|
|
|
|
<div id="pagebottom"></div>
|
|
</div>
|
|
|
|
|
|
<div id="footer">
|
|
<ul class="editbar"><li><span class="disabled">Immutable Page</span></li><li><a href="./Guidelines_for_GUI_Editing_and_Creation?action=info">Info</a></li><li><a href="./Guidelines_for_GUI_Editing_and_Creation?action=AttachFile">Attachments</a></li><li>
|
|
<form class="actionsmenu" method="get" action="">
|
|
<div>
|
|
<label>More Actions:</label>
|
|
<select name="action"
|
|
onchange="if ((this.selectedIndex != 0) &&
|
|
(this.options[this.selectedIndex].disabled == false)) {
|
|
this.form.submit();
|
|
}
|
|
this.selectedIndex = 0;">
|
|
<option value="raw">Raw Text</option>
|
|
<option value="print">Print View</option>
|
|
<option value="RenderAsDocbook">Render as Docbook</option>
|
|
<option value="refresh">Delete Cache</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="SpellCheck">Check Spelling</option>
|
|
<option value="LikePages">Like Pages</option>
|
|
<option value="LocalSiteMap">Local Site Map</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="RenamePage" disabled class="disabled">Rename Page</option>
|
|
<option value="DeletePage" disabled class="disabled">Delete Page</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="MyPages">My Pages</option>
|
|
<option value="SubscribeUser">Subscribe User</option>
|
|
<option value="show" disabled class="disabled">------------</option>
|
|
<option value="Despam">Remove Spam</option>
|
|
<option value="PackagePages">Package Pages</option>
|
|
</select>
|
|
<input type="submit" value="Do">
|
|
</div>
|
|
<script type="text/javascript">
|
|
<!--// Init menu
|
|
actionsMenuInit('More Actions:');
|
|
//-->
|
|
</script>
|
|
</form>
|
|
</li></ul>
|
|
|
|
<ul id="credits">
|
|
<li><a href="http://moinmoin.wikiwikiweb.de/">MoinMoin Powered</a></li><li><a href="http://www.python.org/">Python Powered</a></li><li><a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01</a></li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|