1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="Content-Style-Type" content="text/css" /> 6<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 7<link href="../../../../common/manual.css" rel="stylesheet" type="text/css" /> 8<script type="text/javascript" src="../../../../common/ibox.js"></script> 9<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 10<title>SRT Animation</title> 11<!-- InstanceEndEditable --> 12</head> 13<body> 14<div> 15 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 16 <h1>Texture SRT Animation</h1> 17 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 18 <p>This page uses sample data to describe basic settings for texture SRT animations.</p> 19 <h2>Texture SRT Animation</h2> 20 <p>Animations can be applied to the Scale, Rotate and Translate of a texture UV.</p> 21 <p>Taking the first letter from each transformation, this is called an "SRT animation."</p> 22 <p>Texture SRT animations can be created and edited on the <B>CurveEditor</B> panel of CreativeStudio.</p> 23 <p>For details on the <B>CurveEditor</B> panel, click <a href="../../../../ui_reference/tool_panel/curveeditor_panel/index.html">here</a>.</p> 24 <a href="assets/curve_editor_axis.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="Description of Curve Editor Panel Axes"/></a> 25 <p>Settings made for the vertical axis and horizontal axis on the <B>CurveEditor</B> panel are used to create texture SRT animations as follows.</p> 26 <p class="warning">Texture SRT animation settings vary greatly depending on how the texture coordinates being used are calculated.<br /> The method used to calculate texture coordinates can be changed using texture settings on the Material panel.</p> 27 <p>The description in this tutorial is based on the method of calculating texture coordinates used by Maya.</p> 28 <p>For details on the texture coordinate systems used by other 3DCG tools, click <a href="../../../../user_guide/texture/uv_coordinate/index.html">here</a>.</p> 29 <table> 30 <thead> 31 <tr> 32 <th>Animation</th> 33 <th>Vertical axis and horizontal axis of <B>CurveEditor</B></th> 34 <th>Description of Setting</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <th rowspan="2">Scale</th> 40 <td>Vertical axis</td> 41 <td>The size of the texture UV is set using X and Y.<br /> X: The scale of X (U) increases when the curve heads in the negative direction. Its scale decreases when the curve heads in the positive direction.<br /> Y: The scale of Y (V) increases when the curve heads in the negative direction. Its scale decreases when the curve heads in the positive direction.</td> 42 </tr> 43 <tr> 44 <td>Horizontal axis</td> 45 <td>Number of frames (number of frames to animate the texture)</td> 46 </tr> 47 <tr> 48 <th rowspan="2">Rotate</th> 49 <td>Vertical axis</td> 50 <td>Rotates counterclockwise around the texture center when negative, and rotates clockwise when positive.</td> 51 </tr> 52 <tr> 53 <td>Horizontal axis</td> 54 <td>Number of frames (number of frames to animate the texture)</td> 55 </tr> 56 <tr> 57 <th rowspan="2">Translate</th> 58 <td>Vertical axis</td> 59 <td>The translate of the texture UV is set using X and Y.<br /> X: Moves the texture to the left when the curve heads in the negative direction, and moves it to the right when the curve heads in the positive direction.<br /> Y: Moves the texture down when the curve heads in the negative direction, and moves it up when the curve heads in the positive direction.</td> 60 </tr> 61 <tr> 62 <td>Horizontal axis</td> 63 <td>Number of frames (number of frames to animate the texture)</td> 64 </tr> 65 </tbody> 66 </table> 67 <h2>Sample Configuration</h2> 68 <p>This page uses <B>Toy_Butterfly</B> sample data to confirm texture SRT animation settings.</p> 69 <ol> 70 <li><a href="#sample_data_reading">Loading sample data</a></li> 71 <li><a href="#curve_editor_confirms">Checking the CurveEditor panel</a></li> 72 <li><a href="#srt_animation_making">Creating and editing texture SRT animations</a></li> 73 </ol> 74 <a name="sample_data_reading" id="sample_data_reading"></a> 75 <h3>Loading sample data</h3> 76 <p>Use CreativeStudio to load the <B>Toy_Butterfly</B> sample data prepared in the following folder.</p> 77 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/Tutorial/toy_butterfly/toy_butterfly.cres "</p> 78 <p>On the CreativeStudio menu, select <B>File > Open > Intermediate file</B> to open <B>toy_butterfly.cres</B>.</p> 79 <a href="assets/Toy02.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/Toy02.png" alt="Butterfly in wooden frame"/></a> 80 <p> In the <B>Toy_Butterfly</B> sample, a butterfly is seen to flutter around inside a wooden frame.</p> 81 <p>The texture pattern animation is configured by applying UV translate and rotate to the butterfly texture.</p> 82 <p>Confirm that the butterfly is animated to flutter around by pressing the <B>Play</B> button on the CreativeStudio <B>Control</B> panel.</p> 83 <a name="curve_editor_confirms" id="curve_editor_confirms"></a> 84 <h3>Checking the CurveEditor panel</h3> 85 <p>SRT animations are created on the CreativeStudio <B>CurveEditor</B> panel.</p> 86 <p>Select the <B>ButterflyBtfryC</B> material displayed in the <B>Contents</B> panel to open the <B>CurveEditor</B> panel.</p> 87 <p>Figure 1. Select the Material on the <B>Content</B> Panel</p> 88 <img class="manual_image" src="assets/texture_animation01.png" alt="Texture Animation 01"/> 89 <p>On the CreativeStudio menu, select <B>Window > CurveEditor</B> to open <B>CurveEditor</B>. <B>CurveEditor</B> will open in a separate window as shown in Figure 2.</p> 90 <p>Figure 2. <B>CurveEditor</B> Panel</p> 91 <a href="assets/texture_animation02.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/texture_animation02.png" alt="Butterfly in wooden frame"/></a> 92 <p>Nodes for which a curve is set are displayed in bold in the graph tree view of the CurveEditor panel.</p> 93 <p>An animation is configured for the nodes given in Table 1 in <B>Toy_Butterfly</B> sample data.</p> 94 <p>Table 1. Nodes for Which a Curve is Set in <B>Toy_Butterfly</B> Sample Data</p> 95 <table> 96 <thead> 97 <tr> 98 <th>Nodes</th> 99 <th>Description</th> 100 </tr> 101 </thead> 102 <tbody> 103 <tr> 104 <th>TextureMappers[0].Texture</th> 105 <td>A texture pattern animation is set.</td> 106 </tr> 107 <tr> 108 <th>TextureCoordinators[0].Rotate</th> 109 <td>A texture UV rotate animation is set.</td> 110 </tr> 111 <tr> 112 <th>TextureCoordinators[0].Translate</th> 113 <td>A texture UV translate animation is set using X and Y.</td> 114 </tr> 115 </tbody> 116 </table> 117 <a name="srt_animation_making" id="srt_animation_making"></a> 118 <h3>Creating and editing texture SRT animations</h3> 119 <p>Here, we will actually edit an SRT animation using <B>Toy_Butterfly</B>.</p> 120 <ul> 121 <li><a href="#Translate">Editing a translate animation</a></li> 122 <li><a href="#Rotate">Editing a rotate animation</a></li> 123 <li><a href="#Scale">Creating a scale animation</a></li> 124 </ul> 125 <p>We will confirm how translate and rotate animations are edited using the existing curves. </p> 126 <p>As for the scale animation, we will actually create a new animation using the <B>CurveEditor</B> panel.</p> 127 <a name="Translate" id="Translate"></a> 128 <h4>Editing a translate animation</h4> 129 <p>A translate animation is set for X (horizontal translate) and Y (vertical translate). This animation causes the butterfly to fly from its resting place, flutter about irregularly, and then return.</p> 130 <p>Selecting <B>TextureCoordinators[0].Translate</B> in the graph tree view on the <B>CurveEditor</B> panel will display the translate animation curve shown in Figure 3 in the graph view.</p> 131 <p>Figure 3. Translate Animation Curve</p> 132 <a href="assets/texture_animation03.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/texture_animation03.png" alt="Translate animation for butterfly in wooden frame"/></a> 133 <p>Select the graph view and press the <B>A</B> key. The display will be arranged to show all keys currently set.</p> 134 <p>The translate animation is set using the above curve.</p> 135 <table> 136 <thead> 137 <tr> 138 <th>Frame</th> 139 <th>Axes to be animated</th> 140 <th>Description of Setting</th> 141 </tr> 142 </thead> 143 <tbody> 144 <tr> 145 <th rowspan="2">0 ～ 53</th> 146 <td>X (horizontal translate)</td> 147 <td>The butterfly texture does not move from its start position because there are no changes to settings during these frames.</td> 148 </tr> 149 <tr> 150 <td>Y (vertical translate)</td> 151 <td>The butterfly texture does not move from its start position because there are no changes to settings during these frames.</td> 152 </tr> 153 <tr> 154 <th rowspan="2">54 ～ 94</th> 155 <td>X (horizontal translate)</td> 156 <td>The butterfly texture moves to the left because the curve is heading in the negative direction.</td> 157 </tr> 158 <tr> 159 <td>Y (vertical translate)</td> 160 <td>The butterfly texture moves down because the curve is heading in the negative direction.</td> 161 </tr> 162 <tr> 163 <th rowspan="2">95 ～ 159</th> 164 <td>X (horizontal translate)</td> 165 <td>In the end, the butterfly returns to the animation start position because the curve has turned positive.<br /> This setting results in an animation where the butterfly continues moving to the right and returns to its starting position in the end.</td> 166 </tr> 167 <tr> 168 <td>Y (vertical translate)</td> 169 <td>After the curve first heads negative, it is again made to head positive, and returns to the animation start position in the end.<br /> This setting results in an animation where the butterfly moves up and down and returns to its starting position in the end.</td> 170 </tr> 171 </tbody> 172 </table> 173 <p class="hint">The behavior of translate animations varies depending on the method used to calculate texture coordinates set on the material <B>Properties</B> panel.</p> 174 <h5>Editing animations on the CurveEditor panel</h5> 175 <p>Here, we will actually edit the translate animation using the <B>CurveEditor</B> panel.</p> 176 <p>Selecting the curve to be edited in the graph tree view on the <B>CurveEditor</B> panel or selecting the the range of keys to be edited on the graph view will cause the curve to turn yellow, indicating that it can be edited.</p> 177 <a href="assets/curve_edit.png" rel="ibox" title="Click the image"><img class="ui_thumb" src="assets/curve_edit.png" alt="Editable Curve Image"/></a> 178 <p>Confirm that the translate animation for the butterfly changes in the preview window when keys are edited.</p> 179 <h6>Changing settings</h6> 180 <p>Move the key located in Frame 53 for Y (vertical translate) to Frame 30. This changes the translate start timing for the butterfly in the vertical direction only.</p> 181 <p class="hint">The butterfly can be made to fly in various directions by editing the curves.</p> 182 <a name="Rotate" id="Rotate"></a> 183 <h4>Editing a rotate animation</h4> 184 <p>An animation that changes the orientation of the butterfly according to its direction of movement has been set for the rotate animation.</p> 185 <p>Selecting <B>TextureCoordinators[0].Rotate</B> in the graph tree view on the <B>CurveEditor</B> panel will display the rotate animation curve shown in Figure 4 in the graph view.</p> 186 <p>Select the graph view and press the <B>A</B> key. The graph view will be arranged to show all keys.</p> 187 <p>Figure 4. Rotate Animation Curve</p> 188 <a href="assets/texture_animation04.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/texture_animation04.png" alt="Rotate animation for butterfly in wooden frame"/></a> 189 <p>The rotate animation is set using the above curve.</p> 190 <table> 191 <thead> 192 <tr> 193 <th>Frame</th> 194 <th>Description of Setting</th> 195 </tr> 196 </thead> 197 <tbody> 198 <tr> 199 <th>0 ～ 53</th> 200 <td>During this period, the butterfly texture continues to fly straight because the vertical axis value remains 0.</td> 201 </tr> 202 <tr> 203 <th>54 ～ 73</th> 204 <td>The curve heads in the negative direction.<br /> This setting causes the butterfly to rotate and face toward the left. At this time, the translation animation causes the butterfly to move toward the lower left.</td> 205 </tr> 206 <tr> 207 <th>74 ～ 99</th> 208 <td>From here, the curve heads in the positive direction.<br /> This setting causes the butterfly to rotate and face toward the right. At this time, the translation animation causes the butterfly to move toward the upper right.</td> 209 </tr> 210 <tr> 211 <th>100 ～ 159</th> 212 <td>From here, the curve repeatedly heads positive and negative according to the direction of movement of the butterfly.</td> 213 </tr> 214 </tbody> 215 </table> 216 <h5>Sample Configuration</h5> 217 <p>If the keys of the curve are all reversed, the butterfly will rotate in the opposite direction of its direction of movement.</p> 218 <a name="Scale" id="Scale"></a> 219 <h4>Creating a scale animation</h4> 220 <p>Now, we will try creating an actual scale animation.</p> 221 <p>We will create an image of the butterfly in the <B>Toy_Butterfly</B> sample flying around in the same position (height).</p> 222 <p>We will use a scale animation to make the butterfly appear to fly toward the viewpoint.</p> 223 <p>Select <B>TextureCoordinators[0].Scale</B> in the graph tree view on the <B>CurveEditor</B> panel.</p> 224 <p>X and Y can be displayed by opening the expander for TextureCoordinators[0].Scale.</p> 225 <a href="assets/texture_animation06.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/texture_animation06.png" alt="Scale animation for butterfly in wooden frame"/></a> 226 <p class="hint">X and Y shown here are the U and V of the texture.</p> 227 <p>At this point, nothing is happening in the graph view. Press the <B>S</B> key to create keys as shown in Figure 6 below.</p> 228 <p>Because the scale animation for Toy_Butterfly will animate X and Y at the same timing, the shape of the curve is the same.</p> 229 <p>For details on the <B>Curve Editor</B> shortcut keys, click <a href="../../../../ui_reference/shortcut/index.html#curveeditor_shortcut">Here</a>.</p> 230 <p>Figure 6. Scale Animation Curve</p> 231 <a href="assets/texture_animation05.png" rel="ibox" title="Click to enlarge image"><img class="ui_thumb" src="assets/texture_animation05.png" alt="Scale animation for butterfly in wooden frame"/></a> 232 <p>The flow of the curve to be created is given below.</p> 233 <table> 234 <thead> 235 <tr> 236 <th>Frame</th> 237 <th>Description of Setting</th> 238 </tr> 239 </thead> 240 <tbody> 241 <tr> 242 <th>0 ～ 50</th> 243 <td>The key value remains 1 for both X and Y. The texture UV scale does not change because no changes have been made to the curve.</td> 244 </tr> 245 <tr> 246 <th>51 ～ 120</th> 247 <td>A key of 0.5 is created in Frame 120 for both X and Y. The curve heads in the negative direction.<br /> This setting causes the scale of the texture UV of the butterfly to increase each frame. It reaches its largest size in frame 120.<br /> By making the texture UV larger, the flying buttefly is made to appear to fly toward the viewpoint.</td> 248 </tr> 249 <tr> 250 <th>121 ～ 200</th> 251 <td>A key of 1 is created in Frame 170 for both X and Y. The curve heads in the positive direction.<br /> This setting causes the scale of the texture UV of the butterfly to decrease each frame. It reaches the same scale as when it started in frame 170.<br /> The flying butterfly is seen to return to its original position.</td> 252 </tr> 253 </tbody> 254 </table> 255 <p class="hint"><em>Curve Creation Hint</em><br />Use the copy function when creating multiple curves.<br /> Ctrl+C : Copies the curve selected on the CurveEditor panel.<br /> Ctrl+V : Pastes the copied curve.</p> 256 <p>Once a curve has been created, the animation is played by CreativeStudio.</p> 257 <p>Unlike before the curve was created, by applying a scale animation to the texture UV of the flying butterfly, it now appears to fly toward the viewpoint.</p> 258 <h5>Sample Configuration</h5> 259 <p>Moving the key in Frame 120 to any other position on the CurveEditor panel allows you to change the size of the butterfly and the timing at which it grows larger.</p> 260 <!-- InstanceEndEditable --> </div> 261 <div class="footer" /> 262</div> 263<hr><p>CONFIDENTIAL</p></body> 264<!-- InstanceEnd --></html> 265
