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<!-- InstanceEndEditable --> 10<!-- InstanceBeginEditable name="ページのタイトル" --> 11<title>テクスチャの合成</title> 12<!-- InstanceEndEditable --> 13</head> 14<body> 15<div> 16 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 17 <h1>テクスチャの合成</h1> 18 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 19 <p>CreativeStudio では、読み込んだテクスチャの合成やマルチ UV を使用したテクスチャの編集ができます。</p> 20 <p>ここでは CreativeStudio に 2 枚のテクスチャを読み込み、合成 ( 加算 ) してサンプルモデルに貼り付ける手順を説明します。</p> 21 <h2>サンプルモデルの作成</h2> 22 <p>CreativeStudio のメニュー [作成]→[サンプル]→[キューブモデル] を選択し、サンプルモデルを作成します。</p> 23 <!-- 24 <p>テクスチャ管理ではマテリアルパネルで使用するテクスチャの追加や削除ができます。<br /> 25 テクスチャコンバイナでは複数のカラーやテクスチャを合成することができます。</p> 26--> 27 <h3>テクスチャの読み込み</h3> 28 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から以下の場所にあるテクスチャ中間ファイルを読み込みます。</p> 29 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TextureCombinerSample/ "</p> 30 <table> 31 <thead> 32 <tr> 33 <th class="thumb">中間ファイル名</th> 34 <th class="thumb">イメージ</th> 35 <th>内容</th> 36 </tr> 37 </thead> 38 <tbody> 39 <tr> 40 <th class="thumb">ForegroundBlack.ctex</th> 41 <td class="thumb"><img class="thumb" src="assets/sample_texture00.png" alt="チェスのコマ"/></td> 42 <td>背景が黒の「チェスの駒」テクスチャです。</td> 43 </tr> 44 <tr> 45 <th class="thumb">Background.ctex</th> 46 <td class="thumb"><img class="thumb" src="assets/sample_texture01.png" alt="花畑"/></td> 47 <td>花畑のテクスチャです。</td> 48 </tr> 49 </tbody> 50 </table> 51 <p class="new_hint">補足：<br /> 52 テクスチャの中間ファイル（ .ctex ）は、 NintendoWare が提供するプラグインをインストールした DCC ツールで作成します。</p> 53 <a name="texture_add" id="texture_add"></a> 54 <h3>テクスチャの追加</h3> 55 <p>読み込んだテクスチャをマテリアルに追加します。</p> 56 <p>コンテンツパネルに表示されているマテリアルを選択してマテリアルパネルを開きます。</p> 57 <img src="assets/sample_texture02.png" alt="コンテンツパネルのマテリアル選択画像"/> 58 <p>マテリアルパネルのテクスチャタブを選択して、テクスチャ一覧の「追加」ボタンを押すとテクスチャ 1 のタブが追加されます。</p> 59 <img src="assets/sample_texture03.png" alt="マテリアル編集のコンバイナ画像02"/> 60 <h4>テクスチャの取り付け</h4> 61 <p>テクスチャタブのイメージにあるプルダウンメニューを開くと、<span class="hint">CreativeStudio </span>に読み込まれているテクスチャが表示されます。</p> 62 <img src="assets/pull_down_menu.png" alt="プルダウンメニュー"/> 63 <p>追加したいテクスチャを選択します。</p> 64 <p>今回は以下のテクスチャを選択します。</p> 65 <p>テクスチャ 0 タブ : <span class="thumb">ForegroundBlack</span><br /> 66 テクスチャ 1 タブ : <span class="thumb">Background</span></p> 67 <p>テクスチャを選択すると、追加されたテクスチャイメージと情報が表示されます。</p> 68 <img src="assets/sample_texture04.png" alt="マテリアル編集のコンバイナ画像03"/> 69 <p>上記設定を行うことで、マテリアルに追加したテクスチャが使用できます。</p> 70 <h4>削除</h4> 71 <p>追加したテクスチャタブを削除する場合は「削除」ボタンを押します。</p> 72 <a name="texture_change" id="texture_change"></a> 73 <h3>テクスチャの変更</h3> 74 <p>マテリアルパネルで、変更したいテクスチャのタブを選択します。</p> 75 <img src="assets/sample_texture07.png" alt="テクスチャの変更"/> 76 <p>イメージプルダウンメニューを開き変更するテクスチャを選択します。</p> 77 <img src="assets/sample_texture08.png" alt="テクスチャの変更"/> 78 <p>イメージが選択したテクスチャに変更されます。</p> 79 <img src="assets/sample_texture09.png" alt="テクスチャの変更"/> 80 <p>この状態で、テクスチャの変更は完了しています。</p> 81 <p>プレビュー画面で、選択したテクスチャに変更されたのが確認できます。</p> 82 <h3>コンバイナの設定</h3> 83 <p>マテリアルパネルのフラグメントタブを使用して、追加した 2 枚のテクスチャを加算します。</p> 84 <img src="assets/sample_texture05.png" alt="コンバイナ画像"/> 85 <p>テクスチャコンバイナの詳細については、<a href="../../../ui_reference/panel/material/detailed_panel/texture_combiner/index.html">こちら</a>を参照してください。</p> 86 <p>ここでは、コンバイナ 0 のカラーに以下の設定をします。</p> 87 <table> 88 <thead> 89 <tr> 90 <th>設定項目</th> 91 <th>設定</th> 92 <th>内容</th> 93 </tr> 94 </thead> 95 <tbody> 96 <tr> 97 <th>計算式</th> 98 <td>A + B</td> 99 <td>設定するソースを計算式にあてはめて処理を行います。</td> 100 </tr> 101 <tr> 102 <th>A : ソース 0</th> 103 <td>テクスチャ 0</td> 104 <td>計算式で使用する A の要素をプルダウンメニューから設定します。</td> 105 </tr> 106 <tr> 107 <th>B : ソース 1</th> 108 <td>テクスチャ 1</td> 109 <td>計算式で使用する B の要素をプルダウンメニューから設定します。</td> 110 </tr> 111 <tr> 112 <th>C : ソース 2</th> 113 <td>今回は使用しません。</td> 114 <td>計算式で使用する C の要素をプルダウンメニューから設定します。</td> 115 </tr> 116 </tbody> 117 </table> 118 <p>上記設定を行うと、プレビューでサンプルモデルに 2枚のテクスチャが加算されて表示されます。</p> 119 <img src="assets/sample_texture06.png" alt="コンバイナ画像"/> 120 <h2>3DCG ツールで作成したマルチ UV の編集</h2> 121 <p>マルチ UV とは、1つのポリゴンモデルに対して複数のテクスチャ UV 座標を割り当てることです。</p> 122 <p class="hint_warn">注意：<br /> 123 マルチ UV 自体は CreativeStudio 上で作成することはできません。<br /> 124 ここでは例として「Maya でマルチ UV を設定したサイコロ」を CreativeStudio に読み込み編集する方法を説明します。<br /> 125 3DCG ツールでのマルチ UV の設定方法は、ここでは割愛させて頂きます。</p> 126 <p>図 1 Maya 上でマルチUV を使用して作成したサイコロ<br /> 127 ( 以下の画像は Maya 上のプレビューです )</p> 128 <img src="assets/multi_uv_14.png" alt="" /> 129 <p>マルチ UV として使用したテクスチャは「サイコロの数字」と「面の陰影テクスチャ」の 2 枚になります。</p> 130 <p>図 2 サイコロの数字テクスチャ</p> 131 <img src="assets/multi_uv_00.png" alt="" /> 132 <p>図 3 面の陰影テクスチャ</p> 133 <img src="assets/multi_uv_01.png" alt="" /> 134 <p>上記のテクスチャサンプルは、現在用意されていません。</p> 135 <h3>3DCG ツールから中間ファイルを出力</h3> 136 <p>Maya プラグインを使用して作成したモデル ( サイコロ ) の中間ファイルをエクスポートします。</p> 137 <p class="new_hint">補足：<br /> 138 エクスポートについての詳細は、以下の場所に用意されている各 3DCG ツールのプラグインマニュアルを参照してください。<br /> 139 " %NW4C_ROOT%/documents/DccPlugin "</p> 140 <h3>CreativeStudio で読み込む</h3> 141 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] を選択して、Maya からエクスポートした ( サイコロ ) の中間ファイルを読み込みます。</p> 142 <p>中間ファイルを開くと関連付けされたテクスチャデータなど、自動的に読み込まれます。</p> 143 <p class="new_hint">補足：<br /> 144 中間ファイルを CreativeStudio にドラッグ & ドロップすることでも読み込むことができます。</p> 145 <h4>CreativeStudio の設定を確認</h4> 146 <p>マルチ UV を設定したモデルを CreativeStudio で読み込むと「UV セット」が「自動的に設定」されます。</p> 147 <p>UV セットの確認は、CreativeStudio のマテリアルパネルにある「テクスチャタブ」→「テクスチャコーディネータ」→「使用する UV セット」で確認できます。</p> 148 <p>サンプルには、「サイコロの数字 ( テクスチャ 0 ) 」と「面の陰影テクスチャ ( テクスチャ 1 ) 」の2 枚のテクスチャがあり UV セットが自動的に「0」と「1」に設定されます。</p> 149 <p>ここで設定される「UV セット」でそれぞれのテクスチャの制御ができます。</p> 150 <p>図 4 「2 つのテクスチャ」と UV セットの関係</p> 151 <img src="assets/multi_uv_15.png" alt="UVセットが自動的に設定" /> 152 <h4>コンバイナの設定</h4> 153 <p>ここでは、「サイコロの数字 ( テクスチャ 0 ) 」と「面の陰影テクスチャ ( テクスチャ 1 ) 」の 2 つのテクスチャをかけ合わせるだけの設定にします。</p> 154 <p>テクスチャコンバイナは「マテリアルパネル」→「フラグメント」の中にある設定項目です。</p> 155 <img src="assets/multi_uv_18.png" alt="テクスチャコンバイナの設定" /> 156 <p>上記設定を行うと、3DCG ツールから読み込んだモデルにマルチ UV を使用した 2 枚のテクスチャが確認できます。</p> 157 <p>以下の画像は、CreativeStudio 上でコンバイナ設定を行った後のプレビュー画像です。</p> 158 <p>図 5 「2 つのテクスチャ」をコンバイナでかけ合わせたプレビュー</p> 159 <img src="assets/multi_uv_16.png" alt="" width="409" height="409" /> 160 <h4>テクスチャ UV にアニメーションを設定する</h4> 161 <p>マルチ UV を使った表現としてそれぞれのテクスチャ UV にアニメーションをつけることができます。</p> 162 <p>ここでは、「面の陰影テクスチャ ( テクスチャ 1 ) 」にだけ「スケールのアニメーション」を作成します。</p> 163 <p class="no">（1）CreativeStudio のコンテンツパネルで「マテリアル」を選択します。</p> 164 <p class="no">（2）CreativeStudio のメニュー[ウィンドウ]→[カーブエディタ]を選択してカーブエディタパネルを開きます。</p> 165 <p class="no">（3）カーブエディタパネルのグラフツリービューにある TextureCoordinators[1].Scale の三角マーカーを選択して開きます。</p> 166 <p class="no">（4）TextureCoordinators[1] の「X」と「Y」、両方に以下の「カーブ」を作成します。</p> 167 <p>横軸 = 0 / 縦軸 = 1</p> 168 <p>横軸 = 50 / 縦軸 = 2.5</p> 169 <p>横軸 = 100 / 縦軸 = 1</p> 170 <img src="assets/multi_uv_19.png" alt=""/> 171 <p class="no">（5）カーブを作成後、CreativeStudio のタイムラインパネルの再生ボタンを押すと「面の陰影テクスチャ ( テクスチャ 1 ) 」がスケールアニメーションします。</p> 172 <p>「サイコロの数字 ( テクスチャ 0 ) 」はアニメーションせずにそのままになります。</p> 173 <p class="hint_warn">注意：<br /> 174 サンプルのテクスチャ 1 の「テクスチャ座標の計算方法」は「3ds max方式」にしてあります。</p> 175 <p>図 6 面の陰影テクスチャにアニメーションを設定</p> 176 <img src="assets/multi_uv_17.png" alt="" width="600" height="200" /> 177 <p>マルチ UV を使用することで、上記のように 1つのモデルで 2 枚のテクスチャを使用し、テクスチャ毎にアニメーションさせるなどの表現が作成できます。</p> 178 <!-- InstanceEndEditable --> </div> 179 <div class="footer" /> 180</div> 181</body> 182<!-- InstanceEnd --> 183</html> 184
