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>カラーアニメーション</title> 13<!-- InstanceEndEditable --> 14</head> 15<body> 16<div> 17 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 18 <h1>カラーアニメーション</h1> 19 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 20 <p>CreativeStudio でマテリアルにカラーアニメーションをつける際の設定をサンプルデータ ToyMt を使用して説明します。</p> 21 <h2>カラーアニメーションとは</h2> 22 <p>CreativeStudio は、カーブエディタパネルを使用してマテリアルにカラーアニメーションをつけることができます。</p> 23 <p>マテリアルカラーは以下の 5 つからなり、それぞれを設定することで「光の反射」や「マテリアルの色」を変更できます。</p> 24 <p>表 1 マテリアルカラーの種類</p> 25 <table> 26 <thead> 27 <tr> 28 <th>マテリアルカラー</th> 29 <th>内容</th> 30 </tr> 31 </thead> 32 <tbody> 33 <tr> 34 <th>エミッション</th> 35 <td>エミッションとは、モデル自体が発光しているように見せることができる色です。</td> 36 </tr> 37 <tr> 38 <th>アンビエント</th> 39 <td>アンビエントとは、モデル全体に対して均一に影響する色です。<br /> 40 アンビエントライトで作成されるグローバルアンビエントとは違いますのでご注意ください。</td> 41 </tr> 42 <tr> 43 <th>ディフューズ</th> 44 <td>ディフューズとは、光の向きが影響する色で、モデルが光源に向いているほど多くの光を反射して明るくなる色です。</td> 45 </tr> 46 <tr> 47 <th>スペキュラー 0</th> 48 <td>スペキュラー 0 とは、物体に入るハイライトの色です。<br /> 49 CreativeStudio では 0 と 1 が用意されています。</td> 50 </tr> 51 <tr> 52 <th>スペキュラー 1</th> 53 <td>スペキュラー 1 も 0 と同じく物体に入るハイライトの色です。</td> 54 </tr> 55 </tbody> 56 </table> 57 <h3>カーブエディタパネルの設定</h3> 58 <p>マテリアルのカラーアニメーションの作成 / 編集は、カーブエディタパネルを使用します。</p> 59 <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p> 60 <a href="assets/curve_editor_axis.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="カーブエディタパネルの軸説明"/></a> 61 <p>マテリアルカラーアニメーションを作成するカーブエディタパネルの縦軸と横軸の設定は「表 2」になります。</p> 62 <p>ディフューズのみアルファの設定ができます。</p> 63 <p>表 2 マテリアルアニメーションを作成する際のカーブエディタ縦軸 / 横軸の設定</p> 64 <table> 65 <thead> 66 <tr> 67 <th>設定項目</th> 68 <th>縦軸 / 横軸</th> 69 <th>設定内容</th> 70 </tr> 71 </thead> 72 <tbody> 73 <tr> 74 <th rowspan="2">MaterialColor.Emission ( R G B )</th> 75 <td>縦軸</td> 76 <td>エミッションを R G B 毎に 0 ～ 1 の範囲で設定できます。<br /> 77 1 に近づくほど R G B のカラー成分が強くなります。</td> 78 </tr> 79 <tr> 80 <td>横軸</td> 81 <td>フレーム数 ( マテリアルカラーをアニメーションさせるフレーム数 )</td> 82 </tr> 83 <tr> 84 <th rowspan="2">MaterialColor.Ambient ( R G B )</th> 85 <td>縦軸</td> 86 <td>アンビエントを R G B 毎に 0 ～ 1 の範囲で設定できます。<br /> 87 1 に近づくほど R G B のカラー成分が強くなります。</td> 88 </tr> 89 <tr> 90 <td>横軸</td> 91 <td>フレーム数 ( マテリアルカラーをアニメーションさせるフレーム数 )</td> 92 </tr> 93 <tr> 94 <th rowspan="2">MaterialColor.Diffuse ( R G B A )</th> 95 <td>縦軸</td> 96 <td>ディフューズを R G B A 毎に 0 ～ 1 の範囲で設定できます。<br /> 97 1 に近づくほど R G B のカラー成分が強くなります。<br /> 98 A ( アルファ ) については、 1 に近づくほど透明になります。</td> 99 </tr> 100 <tr> 101 <td>横軸</td> 102 <td>フレーム数 ( マテリアルカラーをアニメーションさせるフレーム数 )</td> 103 </tr> 104 <tr> 105 <th rowspan="2">MaterialColor.Specular 0 ( R G B )</th> 106 <td>縦軸</td> 107 <td>スペキュラー 0 を R G B 毎に 0 ～ 1 の範囲で設定できます。<br /> 108 1 に近づくほど R G B のカラー成分が強くなります。</td> 109 </tr> 110 <tr> 111 <td>横軸</td> 112 <td>フレーム数 ( マテリアルカラーをアニメーションさせるフレーム数 )</td> 113 </tr> 114 <tr> 115 <th rowspan="2">MaterialColor.Specular 1 ( R G B )</th> 116 <td>縦軸</td> 117 <td>スペキュラー 1 を R G B 毎に 0 ～ 1 の範囲で設定できます。<br /> 118 1 に近づくほど R G B のカラー成分が強くなります。</td> 119 </tr> 120 <tr> 121 <td>横軸</td> 122 <td>フレーム数 ( マテリアルカラーをアニメーションさせるフレーム数 )</td> 123 </tr> 124 </tbody> 125 </table> 126 <h2>設定例</h2> 127 <p>ここでは、サンプルデータ TutorialToyBlock の ToyMt を使用してマテリアルカラーのアニメーションの設定方法を説明します。</p> 128 <ol> 129 <li><a href="#sample_data_reading">サンプルデータの読み込み</a></li> 130 <li><a href="#curve_editor_confirms">カーブエディタパネルの確認</a></li> 131 <li><a href="#color_animation_edit">カラーアニメーションの編集</a></li> 132 <li><a href="#diffuse_animation_edit">アルファアニメーションの編集</a></li> 133 </ol> 134 <a name="sample_data_reading" id="sample_data_reading"></a> 135 <h3>サンプルデータの読み込み</h3> 136 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] で以下の場所にある ToyMt.cres を開きます。</p> 137 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyBlock/ToyMt.cres"</p> 138 <a href="assets/Toy_Block.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/Toy_Block.png" alt="Toy_Block読み込み画像"/></a> 139 <h4>サンプルデータの確認</h4> 140 <p>サンプルデータ ToyMt の設定情報を確認します。</p> 141 <h5>マテリアル</h5> 142 <p>ToyMt には、マテリアルが 4 つ使われています。</p> 143 <p>マテリアルの設定は、3DCG ツールで行い CreativeStudio で用意しているプラグインを使って中間ファイルにしています。 </p> 144 <p>表 3 3DCG ツールで設定したマテリアル内容</p> 145 <table> 146 <thead> 147 <tr> 148 <th>マテリアル</th> 149 <th>内容</th> 150 </tr> 151 </thead> 152 <tbody> 153 <tr> 154 <th>Toy_Mt1 ランバート ( Lambert )</th> 155 <td>ランバートノードのカラーにテクスチャ Toy_Mt1.tga が適用されています。</td> 156 </tr> 157 <tr> 158 <th>Toy_Mt2 フォン ( Phong )</th> 159 <td>フォンノードのカラーにテクスチャ Toy_Mt2.tga（グレー） が適用されています。</td> 160 </tr> 161 <tr> 162 <th>Toy_Mt3 フォン ( Phong )</th> 163 <td>フォンノードのカラーにテクスチャ Toy_Mt2.tga（グレー） が適用されています。</td> 164 </tr> 165 <tr> 166 <th>Toy_Mt4 フォン ( Phong )</th> 167 <td>フォンノードのカラーにテクスチャ Toy_Mt2.tga（グレー） が適用されています。</td> 168 </tr> 169 </tbody> 170 </table> 171 <h5>マテリアルカラーアニメーション</h5> 172 <p>ToyMt には、2 つのマテリアルカラーアニメーションが使われています。</p> 173 <p>表 4 使用されているマテリアルカラーアニメーション</p> 174 <table> 175 <thead> 176 <tr> 177 <th>アニメーションの種類</th> 178 <th>内容</th> 179 </tr> 180 </thead> 181 <tbody> 182 <tr> 183 <th>カラーアニメーション</th> 184 <td> CreativeStudio でモデルのボディ部分のカラーアニメーションを設定しています。</td> 185 </tr> 186 <tr> 187 <th>アルファアニメーション</th> 188 <td>CreativeStudio でアルファアニメーションを設定しています。</td> 189 </tr> 190 </tbody> 191 </table> 192 <h5>その他のアニメーション</h5> 193 <p>ToyMt には、マテリアルカラーアニメーションの他に以下のアニメーションが使われています。</p> 194 <p>表 5 その他のアニメーション</p> 195 <table> 196 <thead> 197 <tr> 198 <th>アニメーションの種類</th> 199 <th>内容</th> 200 </tr> 201 </thead> 202 <tbody> 203 <tr> 204 <th>回転のアニメーション</th> 205 <td>モデルについている回転のアニメーションは、3DCG ツールを使用して作成してあります。</td> 206 </tr> 207 <tr> 208 <th>ビジビリティアニメーション</th> 209 <td>モデルの表示 / 非表示のアニメーションを CreativeStudio で設定しています。</td> 210 </tr> 211 </tbody> 212 </table> 213 <p>ここでは、マテリアルカラーアニメーションのみ説明しています。</p> 214 <a name="curve_editor_confirms" id="curve_editor_confirms"></a> 215 <h3>カーブエディタパネルの確認</h3> 216 <p>ここでは、カーブエディタパネルでマテリアル Toy_Mt2 のアニメーション設定を確認します。</p> 217 <p>コンテンツパネルに表示されている Toy_Mt2 を選択してカーブエディタパネルを開きます。</p> 218 <p>図 1 コンテンツパネルで Toy_Mt2 を選択</p> 219 <img src="assets/material_animation_curve.png" alt="マテリアルカラーアニメーションコンテンツ"/> 220 <p>CreativeStudio のメニュー [ウィンドウ]→[カーブエディタ] を選択してカーブエディタを開きます。</p> 221 <p>図 2 Toy_Mt2 のカーブエディタパネル</p> 222 <a href="assets/material_color_animation.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/material_color_animation.png" alt="Toy01M"/></a> 223 <p>カーブが設定されている設定項目は、カーブエディタパネルのグラフツリービューに強調されて表示されます。</p> 224 <p>表 6 Toy_Mt2 にアニメーションが設定されている設定項目</p> 225 <table> 226 <thead> 227 <tr> 228 <th>設定項目</th> 229 <th>内容</th> 230 </tr> 231 </thead> 232 <tbody> 233 <tr> 234 <th>MaterialColor.Emission ( R G B )</th> 235 <td>エミッションの R G B すべてにアニメーションが設定されています。</td> 236 </tr> 237 <tr> 238 <th>MaterialColor.Diffuse ( R G B A )</th> 239 <td>ディフューズは、アルファのみ、アニメーションが設定されています。</td> 240 </tr> 241 </tbody> 242 </table> 243 <a name="color_animation_edit" id="color_animation_edit"></a> 244 <h3>カラーアニメーションの編集</h3> 245 <p>実際に Toy_Mt2 を使い、マテリアルカラーアニメーションの作成と編集方法を説明します。</p> 246 <p>カラーアニメーションの編集方法は、基本的にすべてのマテリアルカラーで同じです。</p> 247 <p>カーブエディタパネルのグラフツリービューで MaterialColor.Emission を選択するとグラフビューに図 3 エミッションのカラーアニメーションカーブが表示されます。</p> 248 <p>図 3 エミッションのカラーアニメーションカーブ</p> 249 <a href="assets/material_color_animation01.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/material_color_animation01.png" alt="エミッションカラーアニメーション"/></a> 250 <p>グラフビューを選択して A キーを押すと、設定してあるすべてのキーが表示されるように調整されます。</p> 251 <p class="hint">選択した設定項目に複数のカーブが設定されていた場合、図 3 のように設定されているすべてのカーブが同時に表示され編集できます。</p> 252 <p>カーブを個別に表示したい場合はグラフツリービューで、設定項目の中に設定されているカーブを選択します。</p> 253 <img src="assets/material_color_animation02.png" alt="ノードを開いたときのグラフツリービュー画像"/> 254 <p>選択したカーブのみ表示され編集できます。</p> 255 <p>図 4 Toy_Mt2 のエミッションで設定されている R G B のカーブ</p> 256 <img src="assets/material_color_animation03.png" alt="エミッションカラーアニメーション"/> 257 <p>Toy_Mt2 エミッションのカラーアニメーションは以下の設定がしてあります。</p> 258 <p>表 7 エミッションのカラーアニメーション設定</p> 259 <table> 260 <thead> 261 <tr> 262 <th>フレーム</th> 263 <th>カラー成分</th> 264 <th>設定内容</th> 265 <th>結果</th> 266 </tr> 267 </thead> 268 <tbody> 269 <tr> 270 <th rowspan="3">0 ～ 20</th> 271 <th>R</th> 272 <td>R のカラー成分は、20 フレームまで 0 ですのでモデルに反映されません。</td> 273 <td rowspan="3">G と B のカラー成分で Toy_MT2 は水色になっています。</td> 274 </tr> 275 <tr> 276 <th>G</th> 277 <td>G のカラー成分は、20 フレームまで 1 です。</td> 278 </tr> 279 <tr> 280 <th>B</th> 281 <td>B のカラー成分は、160 フレームまで固定で 1 です。</td> 282 </tr> 283 <tr> 284 <th rowspan="3">21 ～ 30</th> 285 <th>R</th> 286 <td>R のカラー成分は、21 フレームから 30 フレームまでの間に 1 に向けてカーブが作成されています。</td> 287 <td rowspan="3">R のカラー成分と G のカラー成分が入れ替わりますので、 Toy_Mt2 は<em>水色から紫色にカラーアニメーション</em>します。</td> 288 </tr> 289 <tr> 290 <th>G</th> 291 <td>G のカラー成分は、21 フレームから 30 フレームまでに 0 に向けてカーブが作成されています。</td> 292 </tr> 293 <tr> 294 <th>B</th> 295 <td>B のカラー成分は、160 フレームまで固定で 1 です。</td> 296 </tr> 297 <tr> 298 <th rowspan="3">31 ～ 110</th> 299 <th>R</th> 300 <td>この間、カーブに変化はありません。</td> 301 <td rowspan="3">Toy_MT2 は紫色のまま回転しています。途中ビジビリティアニメーションでモデル自体が消えます。</td> 302 </tr> 303 <tr> 304 <th>G</th> 305 <td>この間、カーブに変化はありません。</td> 306 </tr> 307 <tr> 308 <th>B</th> 309 <td>B のカラー成分は、160 フレームまで固定で 1 です。</td> 310 </tr> 311 <tr> 312 <th rowspan="3">111 ～ 120</th> 313 <th>R</th> 314 <td>R のカラー成分は、111 フレームから 120 フレームまでに 0 に向けてカーブが作成されています。</td> 315 <td rowspan="3">21 フレームから 30 フレームとは逆に R のカラー成分と G のカラー成分が入れ替わりますので、 Toy_Mt2 は<em>紫色から水色にカラーアニメーション</em>します。</td> 316 </tr> 317 <tr> 318 <th>G</th> 319 <td>G のカラー成分は、111 フレームから 120 フレームまでに 1 に向けてカーブが作成されています。</td> 320 </tr> 321 <tr> 322 <th>B</th> 323 <td>B のカラー成分は、160 フレームまで固定で 1 です。</td> 324 </tr> 325 <tr> 326 <th rowspan="3">121 ～ 160</th> 327 <th>R</th> 328 <td>この間、カーブに変化はありません。</td> 329 <td rowspan="3">Toy_MT2 は水色のままです。</td> 330 </tr> 331 <tr> 332 <th>G</th> 333 <td>この間、カーブに変化はありません。</td> 334 </tr> 335 <tr> 336 <th>B</th> 337 <td>B のカラー成分は、160 フレームまで固定で 1 です。</td> 338 </tr> 339 </tbody> 340 </table> 341 <h4>編集例</h4> 342 <p>ここでは、簡単に Toy_Mt2 のカラーアニメーションを編集してみます。</p> 343 <p>カーブエディタパネルで MaterialColor.Emission の R と G のカーブを入れ替えるように設定します。</p> 344 <p>図 5 設定例 1</p> 345 <a href="assets/material_color_animation04.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/material_color_animation04.png" alt="カーブエディタで R と G を編集"/></a> 346 <p>MaterialColor.Emission の R と G のカーブの形を逆にしてアニメーションを再生すると、Toy_Mt2 のカラーアニメーションが編集前の ( 水色 → 紫 / 紫 → 水色 ) から ( 紫 → 水色 / 水色 → 紫 ) に変わったのが確認できます。</p> 347 <h5>テクニック</h5> 348 <p>カーブエディタパネルのグラフビューでは、選択したカーブを Ctrl+C キーでコピーできます。</p> 349 <p>コピーしたカーブをペーストする場合は、Ctrl+V キーを押します。</p> 350 <p class="new_hint">補足：<br /> 351 コピーは設定されているキー単体ではなく、<em>カーブ全体</em>のコピーになります。<br /> 352 コピー & ペーストする場合は、カーブエディタパネルのグラフビュー（カーブが表示されている範囲）をクリックしてアクティブ状態にしておく必要があります。</p> 353 <a name="diffuse_animation_edit" id="diffuse_animation_edit"></a> 354 <h3>アルファアニメーションの編集</h3> 355 <p>Toy_Mt2 の MaterialColor.Diffuse でアルファアニメーションの作成と編集方法を説明します。</p> 356 <p>カーブエディタパネルのグラフツリービューで MaterialColor.Diffuse を選択するとグラフビューに図 6. ディフューズのアルファアニメーションカーブが表示されます。</p> 357 <p>図 6 ディフューズのアルファアニメーションカーブ</p> 358 <a href="assets/material_diffuse_animation01.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/material_diffuse_animation01.png" alt="エミッションカラーアニメーション"/></a> 359 <p>グラフビューを選択して A キーを押すと、設定してあるすべてのキーが表示されるように調整されます。</p> 360 <p>MaterialColor.Diffuse では、アルファのアニメーションのみ設定されています。</p> 361 <p>表 8 アルファのアニメーション設定</p> 362 <table> 363 <thead> 364 <tr> 365 <th>フレーム</th> 366 <th>カラー成分</th> 367 <th>設定内容</th> 368 <th>結果</th> 369 </tr> 370 </thead> 371 <tbody> 372 <tr> 373 <th>0 ～ 10</th> 374 <th>A</th> 375 <td>アルファ成分は、0 フレームから 10 フレームで 1 に向けてカーブが作成されています。</td> 376 <td>カーブエディタパネルの縦軸 ( 透明度 ) を 0 ～ 1 に向けてカーブを作成しています。<br /> 377 このことにより、モデルは 10 フレームに向けて非透明になるアニメーションになります。</td> 378 </tr> 379 <tr> 380 <th>11 ～ 145</th> 381 <th>A</th> 382 <td>アルファ成分は、この間 1 固定で作成されています。</td> 383 <td>11 ～ 145 フレームまで、モデルは表示され続けます。<br /> 384 途中でモデルが消えるのは、ビジビリティアニメーションです。</td> 385 </tr> 386 <tr> 387 <th>146 ～ 155</th> 388 <th>A</th> 389 <td>アルファ成分は、146 フレームから 155 フレームで 0 に向けてカーブが作成されています。</td> 390 <td>カーブエディタパネルの縦軸 ( 透明度 ) を 1 ～ 0 に向けてカーブを作成しています。<br /> 391 このことにより、モデルは 155 フレームに向けて透明になるアニメーションになります。</td> 392 </tr> 393 </tbody> 394 </table> 395 <h4>編集例</h4> 396 <p>ここでは、簡単に Toy_Mt2 のアルファアニメーションを編集してみます。</p> 397 <p>カーブエディタパネルで MaterialColor.Diffuse の A のカーブを編集します。</p> 398 <p>図 7 設定例 2</p> 399 <a href="assets/material_diffuse_animation02.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/material_diffuse_animation02.png" alt="カーブエディタで A を編集"/></a> 400 <p>オリジナルのカーブでは、0 フレームから 10 フレームの短い間に透明から表示に向けてカーブを作成していますので、もっとゆっくりアルファアニメーションをするようにカーブを編集しています。</p> 401 <ul> 402 <li>10フレーム目にあるキーを 60 フレームへ移動</li> 403 <li>145 フレーム目にあるキーを 100 フレームへ移動</li> 404 </ul> 405 <p>カーブを編集してアニメーションの再生を行うと、設定を変更する前よりモデルがゆっくりと表示されることが確認できます。</p> 406 <p>このことを応用すると、色々な場面でモデルを透明や半透明、透明なしで表示することが容易にできます。</p> 407 <!-- InstanceEndEditable --> </div> 408 <div class="footer" /> 409</div> 410</body> 411<!-- InstanceEnd --> 412</html> 413
