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>ここでは、サンプルデータを使用して テクスチャパターンアニメーションの基本設定を説明します。</p> 21 <h2>テクスチャパターンアニメーションとは</h2> 22 <p>テクスチャパターンアニメーションは、任意のフレームで表示するテクスチャを切り替えるアニメーションです。</p> 23 <p>CreativeStudio では、読み込んだテクスチャに番号を振り、カーブエディタパネルで再生方法 ( パターン ) を設定します。</p> 24 <p>マテリアルアニメーションデータパネルの詳細は、<a href="../../../ui_reference/panel/material_animation_panel/index.html">こちら</a>を参照してください。</p> 25 <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p> 26 <p>図 1 . カーブエディタパネル</p> 27 <a href="assets/curve_editor_axis.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="カーブエディタパネルの軸説明"/></a> 28 <p>テクスチャパターンアニメーションを作成する際のカーブエディタパネルの縦軸と横軸の設定は以下になります。</p> 29 <p>表 1 . テクスチャパターンアニメーション作成時のカーブエディタパネルの縦軸 / 横軸</p> 30 <table> 31 <thead> 32 <tr> 33 <th>アニメーション</th> 34 <th>カーブエディタの縦軸 / 横軸</th> 35 <th>設定内容</th> 36 </tr> 37 </thead> 38 <tbody> 39 <tr> 40 <th rowspan="2">テクスチャパターンアニメーション</th> 41 <td>縦軸</td> 42 <td>使用するテクスチャ番号<br /> 43 テクスチャ番号は、マテリアルアニメーションデータパネルのテクスチャリストに追加したときに自動的に設定される番号です。</td> 44 </tr> 45 <tr> 46 <td>横軸</td> 47 <td>フレーム数 ( テクスチャをアニメーションさせるフレーム数 )</td> 48 </tr> 49 </tbody> 50 </table> 51 <h2>設定例</h2> 52 <p>ここでは、サンプルデータ 53 ToyButterfly を使用して、テクスチャパターンアニメーションの設定を説明します。<br /> 54 また、3DCG ツールでテクスチャパターンアニメーションを作成した際のエクスポート方法も説明します。</p> 55 <ol> 56 <li><a href="#sample_data_reading">サンプルデータの読み込み</a></li> 57 <li><a href="#texturepattern_animation_making">テクスチャパターンアニメーションの作成と編集</a></li> 58 <li><a href="#Toy02">3DCG ツールからテクスチャパターンアニメーションをエクスポート</a></li> 59 </ol> 60 <a name="sample_data_reading" id="sample_data_reading"></a> 61 <h3>サンプルデータの読み込み</h3> 62 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] で以下の場所にある ToyButterfly.cres を開きます。</p> 63 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyButterfly/ToyButterfly.cres "</p> 64 <p>図 2 . ToyButterfly</p> 65 <a href="assets/Toy02.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/Toy02.png" alt="木枠の蝶"/></a> 66 <p> ToyButterfly は、木枠の中に蝶がヒラヒラと舞うサンプルです。<br /> 67 蝶のテクスチャの羽ばたきをテクスチャパターンアニメーションで設定されています。</p> 68 <p>CreativeStudio のコントロールパネルで再生ボタンを押すと、蝶がヒラヒラとアニメーションするのが確認できます。</p> 69 <a name="texturepattern_animation_making" id="texturepattern_animation_making"></a> 70 <h3>テクスチャパターンアニメーションの作成と編集</h3> 71 <p>サンプルデータ ToyButterfly では以下の 6 枚のテクスチャを使用して、蝶の羽ばたきをテクスチャパターンアニメーションで作成しています。</p> 72 <img src="assets/texturepattern_animation.png" alt="テクスチャパターンアニメーション"/> 73 <p>テクスチャのファイル名は左から、ButterflyBtfry.00 ～ 05 です。</p> 74 <h4>マテリアルアニメーションデータパネルの設定</h4> 75 <p>マテリアルアニメーションデータパネルで登録されているテクスチャを確認します。</p> 76 <p>CreativeStudio のコンテンツパネルに表示されている <em>Toy_Butterfly.MaterialAnimation</em> を選択するとプロパティパネルに図 3 . マテリアルアニメーションデータパネルが表示されます。<br /> 77 マテリアルアニメーションのアイコンをダブルクリックすると、別ウィンドウでマテリアルアニメーションデータパネルが開きます。</p> 78 <p>マテリアルアニメーションデータパネルの詳細は、<a href="../../../ui_reference/panel/material_animation_panel/index.html">こちら</a>を参照してください。</p> 79 <p>図 3 . マテリアルアニメーションデータパネル</p> 80 <img src="assets/material_animation_panel.png" alt="マテリアルデータパネル画像"/> 81 <p>マテリアルアニメーションデータパネルには、 テクスチャパターンアニメーションで使用する 6 枚のテクスチャが設定されています。</p> 82 <h5>テクスチャの追加 / 削除</h5> 83 <p>テクスチャパターンアニメーションに使用するテクスチャは、以下の方法で追加 / 削除できます。</p> 84 <p>CreativeStudio にテクスチャの中間ファイルを読み込ませると、プルダウンメニューに読み込ませたテクスチャが表示されますので、追加ボタンを押します。</p> 85 <img src="assets/material_animation_panel01.png" alt="マテリアルデータパネル画像01"/> 86 <p>追加ボタンを押すと、テクスチャリストにプルダウンで選択したテクスチャファイルが追加されます。<br /> 87 テクスチャリストから削除したい場合は、削除するテクスチャを選択した状態で削除ボタンを押します。</p> 88 <h4>テクスチャパターンアニメーションの確認</h4> 89 <p>カーブエディタパネルを使って、テクスチャパターンアニメーションを確認します。</p> 90 <p>カーブエディタパネルのグラフツリービューで TextureMappers[0].Texture を選択するとグラフビューに図 4 . テクスチャパターンアニメーションのカーブが表示されます。<br /> 91 グラフビューを選択して A キーを押すと、全キーが表示されるようにグラフビューが調整されます。</p> 92 <p>図 4 . テクスチャパターンアニメーションのカーブ</p> 93 <a href="assets/texturepattern_animation01.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/texturepattern_animation01.png" alt="蝶の羽ばたき"/></a> 94 <p>上記カーブで、テクスチャパターンアニメーションが設定されています。</p> 95 <table> 96 <thead> 97 <tr> 98 <th>フレーム</th> 99 <th>設定内容</th> 100 </tr> 101 </thead> 102 <tbody> 103 <tr> 104 <th>0 ～ 55</th> 105 <td>蝶がゆっくりと羽ばたくアニメーションをテクスチャ番号 1, 2, 5 を使い表現しています。</td> 106 </tr> 107 <tr> 108 <th>57 ～ 169</th> 109 <td>飛び立った蝶が勢いよく羽ばたくアニメーションをテクスチャ番号 3, 4 を短いフレーム数で表現しています。</td> 110 </tr> 111 <tr> 112 <th>171 ～ 195</th> 113 <td>飛び回った蝶が元の位置に戻り、ゆっくりと羽を止めるアニメーションをテクスチャ番号 1, 2, 5 を使い表現しています。</td> 114 </tr> 115 </tbody> 116 </table> 117 <p>読み込んだテクスチャをカーブエディタで編集することにより、色々なパターンアニメーションを作成できます。</p> 118 <a name="Toy02" id="Toy02"></a> 119 <h3>3DCG ツールからテクスチャパターンアニメーションをエクスポート</h3> 120 <p>3DCG ツールからの出力は専用のプラグインを使用します。</p> 121 <p class="new_hint">補足：<br /> 122 テクスチャパターンアニメーションのエクスポートについての詳細は、以下に用意されているプラグインマニュアルを参照してください。<br /> 123 " %NW4C_ROOT%/documents/DccPlugin "</p> 124 <p>ToyButterfly の Maya サンプルデータは以下に用意してあります。</p> 125 <p>" %NW4C_ROOT%/SampleData/Graphics/DccPlugin/Maya/ToyButterfly/scenes/Toy_Butterfly.ma "</p> 126 <h3>CreativeStudio で読み込み</h3> 127 <p>テクスチャパターンアニメーションが使用されているモデルを CreativeStudio に読み込みます。</p> 128 <p>サンプルモデル Toy_Butterfly を 3DCG ツールからエクスポートすると、表 2 . の中間ファイルが作成されますので実際に CreativeStudio に読み込みます。</p> 129 <p>3DCG ツールから出力した中間ファイルを CreativeStudio に読み込む方法は以下の 2 つがあります。</p> 130 <ul> 131 <li>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から読み込む</li> 132 <li>中間ファイルをドラッグ & ドロップで読み込む</li> 133 </ul> 134 <p>表 2 . ToyButterfly の中間ファイル</p> 135 <table> 136 <thead> 137 <tr> 138 <th>ファイル名</th> 139 <th>内容</th> 140 </tr> 141 </thead> 142 <tbody> 143 <tr> 144 <th>Toy_Butterfly.cmata</th> 145 <td>Toy_Butterfly のマテリアルデータが入った中間ファイルです。</td> 146 </tr> 147 <tr> 148 <th>Toy_Butterfly.cmdl</th> 149 <td>Toy_Butterfly のモデルデータが入った中間ファイルです。</td> 150 </tr> 151 <tr> 152 <th>ButterflyBG.ctex</th> 153 <td>Toy_Butterfly の木枠の表のテクスチャ中間ファイルです。</td> 154 </tr> 155 <tr> 156 <th>ButterflyBG2.ctex</th> 157 <td>Toy_Butterfly の木枠の裏のテクスチャ中間ファイルです。</td> 158 </tr> 159 <tr> 160 <th>ButterflyBtfly.00.ctex</th> 161 <td rowspan="6">Toy_Butterfly の蝶のテクスチャ中間ファイルです。 ( テクスチャパターンアニメーションで使用 )</td> 162 </tr> 163 <tr> 164 <th>ButterflyBtfly.01.ctex</th> 165 </tr> 166 <tr> 167 <th>ButterflyBtfly.02.ctex</th> 168 </tr> 169 <tr> 170 <th>ButterflyBtfly.03.ctex</th> 171 </tr> 172 <tr> 173 <th>ButterflyBtfly.04.ctex</th> 174 </tr> 175 <tr> 176 <th>ButterflyBtfly.05.ctex</th> 177 </tr> 178 </tbody> 179 </table> 180 <h4>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から読み込む</h4> 181 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] を選択して、Toy_Butterfly.cmata と Toy_Butterfly.cmdl を同時に読み込みます。<br /> 182 上記のように CreativeStudio のメニューから中間ファイルを開く方法では、関連付けされたテクスチャデータは自動的に読み込まれます。</p> 183 <h4>中間ファイルをドラッグ & ドロップで読み込む</h4> 184 <p>中間ファイルをドラッグ & ドロップすることでも CreativeStudio に読み込むことができます。</p> 185 <!-- InstanceEndEditable --> </div> 186 <div class="footer" /> 187</div> 188</body> 189<!-- InstanceEnd --> 190</html> 191
