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="ja" lang="ja"> 3<!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6<meta http-equiv="Content-Style-Type" content="text/css" /> 7<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 8<link href="../../../common/manual.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../../common/ibox.js"></script> 10<!-- InstanceEndEditable --> 11<!-- InstanceBeginEditable name="ページのタイトル" --> 12<title>SRT アニメーション</title> 13<!-- InstanceEndEditable --> 14</head> 15<body> 16<div> 17 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 18 <h1>テクスチャ SRT アニメーション</h1> 19 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 20 <p>ここでは、サンプルデータを使用してテクスチャ SRT アニメーションの基本設定を説明します。</p> 21 <h2>テクスチャ SRT アニメーションとは</h2> 22 <p>テクスチャ UV の Scale , Rotate , Translate のアニメーションです。</p> 23 <p>各文字の頭文字をとって SRT アニメーションと呼んでいます。</p> 24 <p>CreativeStudio ではカーブエディタパネルを使用してテクスチャ SRT アニメーションの作成と編集ができます。</p> 25 <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p> 26 <a href="assets/curve_editor_axis.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="カーブエディタパネルの軸説明"/></a> 27 <p>テクスチャ SRT アニメーションを作成するカーブエディタパネルの縦軸と横軸の設定は以下になります。</p> 28 <p class="warning">テクスチャ SRT アニメーションの設定は、使用するテクスチャ座標の計算方法により大きく変化します。<br /> 29 テクスチャ座標の計算方法は、マテリアルパネルのテクスチャ設定で変更できます。</p> 30 <p>このチュートリアルでは、 Maya のテクスチャ座標の計算方法を使用して説明しています。</p> 31 <p>その他の 3DCG ツールのテクスチャ座標系についての詳細は、<a href="../../../user_guide/texture/uv_coordinate/index.html">こちら</a>を参照してください。</p> 32 <table> 33 <thead> 34 <tr> 35 <th>アニメーション</th> 36 <th>カーブエディタの縦軸 / 横軸</th> 37 <th>設定内容</th> 38 </tr> 39 </thead> 40 <tbody> 41 <tr> 42 <th rowspan="2">Scale</th> 43 <td>縦軸</td> 44 <td>テクスチャ UV の大きさを X と Y で設定します。<br /> 45 X : カーブをマイナス方向に作成すると X ( U ) のスケールが大きく、プラス方向に作成するとスケールが小さくなります。<br /> 46 Y : カーブをマイナス方向に作成すると Y ( V ) のスケールが大きくなり、プラス方向に作成するとスケールは小さくなります。</td> 47 </tr> 48 <tr> 49 <td>横軸</td> 50 <td>フレーム数 ( テクスチャをアニメーションさせるフレーム数 )</td> 51 </tr> 52 <tr> 53 <th rowspan="2">Rotate</th> 54 <td>縦軸</td> 55 <td>テクスチャの中心を基点にマイナスにすると左回転、プラスにすると右回転します。</td> 56 </tr> 57 <tr> 58 <td>横軸</td> 59 <td>フレーム数 ( テクスチャをアニメーションさせるフレーム数 )</td> 60 </tr> 61 <tr> 62 <th rowspan="2">Translate</th> 63 <td>縦軸</td> 64 <td>テクスチャ UV の移動を X と Y で設定します。<br /> 65 X : カーブをマイナス方向に作成すると左方向へ移動、プラスにすると右方向に移動します。<br /> 66 Y : カーブをマイナス方向に作成すると下方向へ移動、プラスにすると上方向へ移動します。</td> 67 </tr> 68 <tr> 69 <td>横軸</td> 70 <td>フレーム数 ( テクスチャをアニメーションさせるフレーム数 )</td> 71 </tr> 72 </tbody> 73 </table> 74 <h2>設定例</h2> 75 <p>ここでは、サンプルデータ 76 ToyButterfly を使用して、テクスチャ SRT アニメーションの設定を確認します。</p> 77 <ol> 78 <li><a href="#sample_data_reading">サンプルデータの読み込み</a></li> 79 <li><a href="#curve_editor_confirms">カーブエディタパネルの確認</a></li> 80 <li><a href="#srt_animation_making">テクスチャ SRT アニメーションの作成と編集</a></li> 81 </ol> 82 <a name="sample_data_reading" id="sample_data_reading"></a> 83 <h3>サンプルデータの読み込み</h3> 84 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] で以下の場所にある ToyButterfly.cres を開きます。</p> 85 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyButterfly/ToyButterfly.cres "</p> 86 <a href="assets/Toy02.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/Toy02.png" alt="木枠の蝶"/></a> 87 <p> ToyButterfly は、木枠の中に蝶がヒラヒラと舞うサンプルです。</p> 88 <p>蝶のテクスチャに、UV の移動と回転、テクスチャパターンアニメーションが設定されています。</p> 89 <p>CreativeStudio のコントロールパネルで再生ボタンを押すと、蝶がヒラヒラとアニメーションするのが確認できます。</p> 90 <a name="curve_editor_confirms" id="curve_editor_confirms"></a> 91 <h3>カーブエディタパネルの確認</h3> 92 <p>CreativeStudio のカーブエディタパネルで SRT アニメーションを作成しています。</p> 93 <p>コンテンツパネルに表示されているマテリアル ButterflyBtfryC を選択してカーブエディタパネルを開きます。</p> 94 <p>図 1 コンテンツパネルでマテリアルを選択</p> 95 <img src="assets/texture_animation01.png" alt="テクスチャアニメーション01"/> 96 <p>CreativeStudio のメニュー [ウィンドウ]→[カーブエディタ] を選択してカーブエディタを開くと図 2. のようにカーブエディタパネルが別ウィンドウで開きます。</p> 97 <p>図 2 カーブエディタパネル</p> 98 <a href="assets/texture_animation02.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texture_animation02.png" alt="木枠の蝶"/></a> 99 <p>カーブが設定されている「設定項目」は、カーブエディタパネルのグラフツリービューで強調されて表示されます。</p> 100 <p>サンプルデータ ToyButterfly では表 1 の「設定項目」にアニメーションが設定されています。</p> 101 <p>表 1 サンプルデータ ToyButterfly でカーブが設定されている設定項目</p> 102 <table> 103 <thead> 104 <tr> 105 <th>設定項目</th> 106 <th>内容</th> 107 </tr> 108 </thead> 109 <tbody> 110 <tr> 111 <th>TextureMappers[0].Texture</th> 112 <td>テクスチャパターンアニメーションが設定されています。</td> 113 </tr> 114 <tr> 115 <th>TextureCoordinators[0].Rotate</th> 116 <td>テクスチャ UV の回転アニメーションが設定されています。</td> 117 </tr> 118 <tr> 119 <th>TextureCoordinators[0].Translate</th> 120 <td>テクスチャ UV の移動アニメーションが X と Y で設定されています。</td> 121 </tr> 122 </tbody> 123 </table> 124 <a name="srt_animation_making" id="srt_animation_making"></a> 125 <h3>テクスチャ SRT アニメーションの作成と編集</h3> 126 <p>ToyButterfly を使って実際に SRT アニメーションの編集を行います。</p> 127 <ul> 128 <li><a href="#Translate">移動アニメーションの編集</a></li> 129 <li><a href="#Rotate">回転アニメーションの編集</a></li> 130 <li><a href="#Scale">スケールアニメーションの作成</a></li> 131 </ul> 132 <p>移動と回転のアニメーションは、既存のカーブで編集の方法を確認します。</p> 133 <p>スケールのアニメーションは、実際にカーブエディタパネルを使用して新規に作成します。</p> 134 <a name="Translate" id="Translate"></a> 135 <h4>移動アニメーションの編集</h4> 136 <p>移動アニメーションは、 X ( 横移動 ) Y ( 縦移動 ) に設定してあり、蝶が木枠から飛び立ち不規則に飛び回ってから元の位置に戻るアニメーションです。</p> 137 <p>カーブエディタパネルのグラフツリービューで TextureCoordinators[0].Translate を選択するとグラフビューに図 3. 移動アニメーションのカーブが表示されます。</p> 138 <p>図 3 移動アニメーションのカーブ</p> 139 <a href="assets/texture_animation03.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texture_animation03.png" alt="木枠の蝶移動アニメーションカーブ"/></a> 140 <p>グラフビューを選択して A キーを押すと、設定してあるすべてのキーが表示されるように調整されます。</p> 141 <p>上記カーブで移動アニメーションが設定されています。</p> 142 <table> 143 <thead> 144 <tr> 145 <th>フレーム</th> 146 <th>アニメーション対応軸</th> 147 <th>設定内容</th> 148 </tr> 149 </thead> 150 <tbody> 151 <tr> 152 <th rowspan="2">0 ～ 53</th> 153 <td>X ( 横移動)</td> 154 <td>このフレーム数の間は設定に変更がないので、蝶のテクスチャは開始位置から動きません。</td> 155 </tr> 156 <tr> 157 <td>Y ( 縦移動 )</td> 158 <td>このフレーム数の間は設定に変更がないので、蝶のテクスチャは開始位置から動きません。</td> 159 </tr> 160 <tr> 161 <th rowspan="2">54 ～ 94</th> 162 <td>X ( 横移動 )</td> 163 <td>カーブがマイナスに向かって作成されていますので、蝶のテクスチャは左に移動します。</td> 164 </tr> 165 <tr> 166 <td>Y ( 縦移動 )</td> 167 <td>カーブがマイナスに向かって作成されていますので、蝶のテクスチャは下に移動します。</td> 168 </tr> 169 <tr> 170 <th rowspan="2">95 ～ 159</th> 171 <td>X ( 横移動 )</td> 172 <td>カーブがプラスに向かって作成されて、最後にアニメーションの開始位置に戻っています。<br /> 173 この設定で、蝶は右側に移動していき、最後は開始位置に戻るアニメーションになります。</td> 174 </tr> 175 <tr> 176 <td>Y ( 縦移動 )</td> 177 <td>カーブがプラスに向かって作成されたあと、もう一度マイナスに向かってから最後にアニメーションの開始位置に戻っています。<br /> 178 この設定で、蝶は上下にヒラヒラと移動して、最後は開始位置に戻るアニメーションになります。</td> 179 </tr> 180 </tbody> 181 </table> 182 <p class="hint">マテリアルパネルで設定するテクスチャ座標系の計算方法で、移動アニメーションの挙動は変化します。</p> 183 <h5>カーブエディタパネルでアニメーションを編集する</h5> 184 <p>実際にカーブエディタパネルを使用して、移動アニメーションを編集します。</p> 185 <h6><span class="text_color">●</span>設定を変更</h6> 186 <p>カーブエディタパネルのグラフツリービューで編集するカーブを選択するか、グラフビュー上で編集したいキーを範囲選択すると、カーブが黄色になり編集可能になります。</p> 187 <p><em>設定例：</em><br /> 188 TextureCoordinators[0].Translate の Y 軸( 縦移動 ) の 53 フレームにあるキーを 30 フレームに変更すると、蝶の移動開始 ( 縦方向のみ ) タイミングが変わります。</p> 189 <p>図 4 TextureCoordinators[0].Translate の Y 軸カーブ</p> 190 <a href="assets/curve_edit.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/curve_edit.png" alt="カーブ編集可能画像"/></a> 191 <p>キーを編集すると、プレビューで蝶の移動アニメーションが変化することを確認できます。</p> 192 <a name="Rotate" id="Rotate"></a> 193 <h4>回転アニメーションの編集</h4> 194 <p>回転アニメーションは蝶の移動方向に合わせて、蝶の向きを変えるアニメーションが設定してあります。</p> 195 <p>カーブエディタパネルのグラフツリービューで TextureCoordinators[0].Rotate を選択するとグラフビューに図 4. 回転アニメーションのカーブが表示されます。</p> 196 <p>グラフビューを選択して A キーを押すと、全キーが表示されるようにグラフビューが調整されます。</p> 197 <p>図 5 回転アニメーションのカーブ</p> 198 <a href="assets/texture_animation04.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texture_animation04.png" alt="木枠の蝶回転アニメーションカーブ"/></a> 199 <p>上記カーブで回転アニメーションが設定されています。</p> 200 <table> 201 <thead> 202 <tr> 203 <th>フレーム</th> 204 <th>設定内容</th> 205 </tr> 206 </thead> 207 <tbody> 208 <tr> 209 <th>0 ～ 53</th> 210 <td>この間、縦軸は 0 のままなので、蝶のテクスチャは真っ直ぐなままです。</td> 211 </tr> 212 <tr> 213 <th>54 ～ 73</th> 214 <td>マイナスに向かってカーブが作成されています。<br /> 215 この設定で、蝶は左側に向かい回転していきます。この時、蝶は移動アニメーションで左下に向かって移動しています。</td> 216 </tr> 217 <tr> 218 <th>74 ～ 99</th> 219 <td>ここからプラスに向かってカーブが作成されています。<br /> 220 この設定で、蝶は右側に向かい回転していきます。この時、蝶は移動アニメーションで右上に向かって移動しています。</td> 221 </tr> 222 <tr> 223 <th>100 ～ 159</th> 224 <td>ここからは蝶の移動方向に合わせて、マイナスとプラスを交互に繰り返しています。</td> 225 </tr> 226 </tbody> 227 </table> 228 <h5>設定例</h5> 229 <p>カーブのキーをすべて逆にすると、蝶の回転は移動方向とは逆向きに回転するようになります。</p> 230 <a name="Scale" id="Scale"></a> 231 <h4>スケールアニメーションの作成</h4> 232 <p>ここでは、実際にスケールのアニメーションを作成してみます。</p> 233 <p>ToyButterfly の蝶は、同じ位置 ( 高さ ) で飛び回るイメージで作成されています。</p> 234 <p>この蝶をスケールアニメーションを使って、手前に向かって飛んでくるように見せることができます。</p> 235 <p>カーブエディタパネルのグラフツリービューで TextureCoordinators[0].Scale を選択します。</p> 236 <p>TextureCoordinators[0].Scale を開くと 「X」 と「Y」 が表示されます。</p> 237 <p>図 6 TextureCoordinators[0].Scale のカーブ</p> 238 <a href="assets/texture_animation06.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texture_animation06.png" alt="木枠の蝶スケールアニメーションカーブ"/></a> 239 <p class="hint">ここでの X と Y はテクスチャの U と V になります。</p> 240 <p>グラフビューには何もない状態ですので、S キーを押してキーを以下の図 6 . のように作成します。</p> 241 <p>ToyButterfly のスケールアニメーションは、 X と Y を同じタイミングでアニメーションさせますので、カーブの形は同じになります。</p> 242 <p>カーブエディタパネルのショートカットキーの詳細は、<a href="../../../ui_reference/shortcut/index.html#curveeditor_shortcut">こちら</a>を参照してください。</p> 243 <p>図 7 スケールアニメーションのカーブ</p> 244 <a href="assets/texture_animation05.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texture_animation05.png" alt="木枠の蝶スケールアニメーションカーブ"/></a> 245 <p>作成するカーブの大きな流れは以下になります。</p> 246 <table> 247 <thead> 248 <tr> 249 <th>フレーム</th> 250 <th>設定内容</th> 251 </tr> 252 </thead> 253 <tbody> 254 <tr> 255 <th>0 ～ 50</th> 256 <td>X Y 共にキーを 1 のままにしておきます。カーブに変化がありませんので、テクスチャ UV のスケールも変化しません。</td> 257 </tr> 258 <tr> 259 <th>51 ～ 120</th> 260 <td>X Y 共に 120 フレームに 0.5 のキーを作成します。カーブはマイナス方向に作成されます。<br /> 261 この設定で、蝶のテクスチャ UV のスケールはフレームごとに大きくなり、 120 フレームで一番大きくなる設定になります。<br /> 262 テクスチャの UV が大きくなることにより、飛び立った蝶が手前に飛んできている様に見せます。</td> 263 </tr> 264 <tr> 265 <th>121 ～ 200</th> 266 <td>X Y 共に 170 フレームに 1 のキーを作成します。カーブはプラス方向に作成されます。<br /> 267 この設定で、蝶のテクスチャ UV のスケールはフレームごとに小さくなり、 170 フレームで開始時のスケールと同じになります。<br /> 268 飛び立った蝶が元の位置に戻るように見せます。</td> 269 </tr> 270 </tbody> 271 </table> 272 <p class="hint"><em>カーブ作成のヒント</em><br /> 273 複数のカーブを作成する場合は、コピー機能を使うと便利です。<br /> 274 Ctrl+C : カーブエディタパネルで、選択したカーブをコピーします。<br /> 275 Ctrl+V : コピーしたカーブをペーストします。</p> 276 <p>カーブの作成が完了しましたら、 CreativeStudio でアニメーションを再生させます。</p> 277 <p>カーブを作成する前と違い、飛び立った蝶のテクスチャ UV がスケールアニメーションすることにより、手前に飛んできているように見えます。</p> 278 <h5>設定例</h5> 279 <p>カーブエディタパネルで 120 フレームにあるキーを任意の位置に動かすと、手前に飛んでくる蝶の大きさや大きくなるタイミングを変更することができます。</p> 280 <!-- InstanceEndEditable --> </div> 281 <div class="footer" /> 282</div> 283</body> 284<!-- InstanceEnd --> 285</html> 286
