iddevnet/quake4/ArtReference_Q4Shaders_AnimatedStrips.html

271 lines
15 KiB
HTML
Raw Permalink Normal View History

<!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>ArtReference Q4Shaders AnimatedStrips - 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.html">
2021-04-10 13:40:18 +00:00
<link rel="Alternate" title="Wiki Markup" href="./ArtReference_Q4Shaders_AnimatedStrips?action=raw">
<link rel="Alternate" media="print" title="Print View" href="./ArtReference_Q4Shaders_AnimatedStrips?action=print">
<link rel="Search" href="./FindPage.html">
<link rel="Index" href="./TitleIndex.html">
<link rel="Glossary" href="./WordIndex.html">
<link rel="Help" href="./HelpOnFormatting.html">
</head>
<body lang="en" dir="ltr">
<div id="header">
<div id="logo"><a href="./Quake4SDK.html"><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>
2021-04-10 13:40:18 +00:00
<ul id="username"><li><a href="./ArtReference_Q4Shaders_AnimatedStrips?action=login" id="login">Login</a></li></ul>
<div id="locationline">
<ul id="pagelocation">
2021-04-10 13:40:18 +00:00
<li><a class="backlink" title="Click to do a full-text search for this title" href="./ArtReference_Q4Shaders_AnimatedStrips?action=fullsearch&amp;value=linkto%3A%22ArtReference+Q4Shaders+AnimatedStrips%22&amp;context=180">ArtReference Q4Shaders AnimatedStrips</a></li>
</ul>
</div>
<ul id="navibar">
<li class="wikilink"><a href="./GettingStarted.html">GettingStarted</a></li><li class="wikilink"><a href="./ScriptFile.html">ScriptFile</a></li><li class="wikilink"><a href="./MakeAMod.html">MakeAMod</a></li><li class="wikilink"><a href="./LevelEditor.html">LevelEditor</a></li><li class="wikilink"><a href="./FXEditor.html">FXEditor</a></li><li class="wikilink"><a href="./GUIEditor.html">GUIEditor</a></li><li class="wikilink"><a href="./Sounds.html">Sounds</a></li><li class="wikilink"><a href="./Animations.html">Animations</a></li><li class="wikilink"><a href="./ArtReference.html">ArtReference</a></li><li class="wikilink"><a href="./DownloadableContent.html">DownloadableContent</a></li><li class="wikilink"><a href="./RecentChanges.html">RecentChanges</a></li><li class="wikilink"><a href="./FindPage.html">FindPage</a></li><li class="wikilink"><a href="./HelpContents.html">HelpContents</a></li><li class="current"><a href="./ArtReference_Q4Shaders_AnimatedStrips.html">ArtReferenc...matedStrips</a></li>
</ul>
<div id="pageline"><hr style="display:none;"></div>
2021-04-10 13:40:18 +00:00
<ul class="editbar"><li><span class="disabled">Immutable Page</span></li><li><a href="./ArtReference_Q4Shaders_AnimatedStrips?action=info">Info</a></li><li><a href="./ArtReference_Q4Shaders_AnimatedStrips?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><p class="line862">Animated strips are <a href="./ArtReference_Q4Shaders.html">materials</a> that scroll in steps across an image simulated animation. Below are example <a href="./ArtReference_Q4Shaders.html">shaders</a> and images from a fire animated <a href="./ArtReference_Q4Shaders.html">shader</a> used in Quake 4. <span class="anchor" id="line-2"></span><span class="anchor" id="line-3"></span><p class="line867">
<h3 id="head-478b7a36426c1864a8e8b6de508bc7f97188bd57">Shader</h3>
<span class="anchor" id="line-4"></span><p class="line867"><hr /><p class="line874"> <span class="anchor" id="line-5"></span><span class="anchor" id="line-6"></span><p class="line867"><span class="anchor" id="line-7"></span><pre>gfx/effects/fire/flame1
<span class="anchor" id="line-8"></span>{
<span class="anchor" id="line-9"></span> qer_editorimage gfx/effects/fire/flame_strip.tga
<span class="anchor" id="line-10"></span> noSelfShadow
<span class="anchor" id="line-11"></span> translucent
<span class="anchor" id="line-12"></span> noShadows
<span class="anchor" id="line-13"></span> twosided
<span class="anchor" id="line-14"></span> {
<span class="anchor" id="line-15"></span> blend add
<span class="anchor" id="line-16"></span> map gfx/effects/fire/flame_strip.tga
<span class="anchor" id="line-17"></span> scale 1 / 32 , 1
<span class="anchor" id="line-18"></span> scroll table32[ time * .6 ] , 0
<span class="anchor" id="line-19"></span> clamp
<span class="anchor" id="line-20"></span> vertexColor
<span class="anchor" id="line-21"></span> }
<span class="anchor" id="line-22"></span>}
<span class="anchor" id="line-23"></span></pre><span class="anchor" id="line-24"></span><span class="anchor" id="line-25"></span><p class="line874">The important lines to notice are: <span class="anchor" id="line-26"></span><span class="anchor" id="line-27"></span><ul><li style="list-style-type:none"><p class="line891"><strong>scale 1 / 32 , 1</strong> <span class="anchor" id="line-28"></span><span class="anchor" id="line-29"></span>This adjusts the scale of the image to only show 1/32th of its width. The image has exactly 32 parts. The height stays at the default of 1. <span class="anchor" id="line-30"></span><span class="anchor" id="line-31"></span></li></ul><p class="line867"><br />
<span class="anchor" id="line-32"></span><ul><li style="list-style-type:none"><p class="line891"><strong>scroll table32[ time * .6 ] , 0</strong> <span class="anchor" id="line-33"></span><span class="anchor" id="line-34"></span><p class="line862">This scrolls the image horizontally using a <a href="./ArtReference_Q4Shaders_Tables.html">table</a> named <strong>table32</strong>: <span class="anchor" id="line-35"></span><span class="anchor" id="line-36"></span></li></ul><p class="line867"><span class="anchor" id="line-37"></span><pre>table table32
<span class="anchor" id="line-38"></span>{
<span class="anchor" id="line-39"></span> snap
<span class="anchor" id="line-40"></span> {
<span class="anchor" id="line-41"></span> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
<span class="anchor" id="line-42"></span> 16, 17, 18, 19, 20, 21, 22, 23 ,24, 25, 26, 27, 28, 29, 30, 31
<span class="anchor" id="line-43"></span> }
<span class="anchor" id="line-44"></span>}
<span class="anchor" id="line-45"></span></pre><span class="anchor" id="line-46"></span><span class="anchor" id="line-47"></span><ul><li style="list-style-type:none">The table used must match exactly the scale dimensions to animate correctly. If you are using an image with 16 parts, you need a scale of 1/16 and a table that works in 16 steps. <span class="anchor" id="line-48"></span><span class="anchor" id="line-49"></span></li></ul><p class="line867">
<h3 id="head-c2152e255e7cd1377ab20fde4df49c19b3e9cb35">Images</h3>
<span class="anchor" id="line-50"></span><p class="line867"><hr /><p class="line874"> <span class="anchor" id="line-51"></span><span class="anchor" id="line-52"></span><p class="line874">The animated fire image has 32 parts to it, each 128 pixels wide. This image has been resized to fit. <span class="anchor" id="line-53"></span><span class="anchor" id="line-54"></span><p class="line867"><img class="attachment" src="./ArtReference_Q4Shaders_AnimatedStrips1.jpg" title="attachment:shader_stripimage1.jpg" /> <span class="anchor" id="line-55"></span><span class="anchor" id="line-56"></span><p class="line874">Here is a close-up of a part of the image. <span class="anchor" id="line-57"></span><span class="anchor" id="line-58"></span><p class="line867"><img class="attachment" src="./ArtReference_Q4Shaders_AnimatedStrips2.jpg" title="attachment:shader_stripimage2.jpg" /> <span class="anchor" id="line-59"></span><span class="anchor" id="bottom"></span></div><p id="pageinfo" class="info" lang="en" dir="ltr">ArtReference Q4Shaders AnimatedStrips (last edited 2005-11-09 21:33:14 by <span title="MattVainio @ 67.129.250.254[67.129.250.254]"><a class="nonexistent" href="./MattVainio.html" title="MattVainio @ 67.129.250.254[67.129.250.254]">MattVainio</a></span>)</p>
<div id="pagebottom"></div>
</div>
<div id="footer">
2021-04-10 13:40:18 +00:00
<ul class="editbar"><li><span class="disabled">Immutable Page</span></li><li><a href="./ArtReference_Q4Shaders_AnimatedStrips?action=info">Info</a></li><li><a href="./ArtReference_Q4Shaders_AnimatedStrips?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>