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 はパーティクルを使用して様々なエフェクトを作成できます。</p> 21 <p>ここでは、パーティクルとサンプルのテクスチャを使用して炎のエフェクトを作成する手順を説明します。</p> 22 <h2>エフェクト ( パーティクル ) の作成</h2> 23 <p>CreativeStudio のメニュー [作成]→[エフェクト] を選択します。</p> 24 <p>選択すると別ウィンドウで ParticleCtrCreationPanel が表示され、パーティクル名を任意で入力できます。</p> 25 <p>ここでは、パーティクル名を fire にします。</p> 26 <img src="assets/fire_particle_create.png" alt="パーティクル名作成画像"/> 27 <p>パーティクル名を入力後、適用して閉じる、または適用を選択するとパーティクルが作成されます。</p> 28 <p>CreativeStudio の再生ボタンを押すと プレビューパネルにパーティクルが表示されます。</p> 29 <a href="assets/fire_particle_create01.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/fire_particle_create01.png" alt="パーティクル作成画像01"/></a> 30 <h3>エミッタの設定</h3> 31 <p><a href="../../../glossary/index.html#particle_emitter">エミッタ</a>パネルを使用してエミッタを設定します。</p> 32 <p>エミッタの形状や大きさ、放出するパーティクル量を設定できます。</p> 33 <p class="no">（1）コンテンツパネルに表示されている fireEmitter をシングルクリックすると、プロパティパネルにエミッタパネルが表示されます。</p> 34 <a href="assets/fire_particle_create03.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/fire_particle_create03.png" alt="パーティクル作成画像03"/></a> 35 <p class="hint">CreativeStudio のメニュー [ウィンドウ]→[プロパティパネル ] を選択するか、コンテンツパネルに表示されているエミッタのアイコンをダブルクリックすると、別ウィンドウでプロパティパネルが開き上記と同じエミッタの設定ができます。</p> 36 <h4>エミッタ形状の変更</h4> 37 <p>エミッタパネルでは、エミッタ形状を<em>点、円盤、球、円柱、矩形、立方体</em>から選択できます。</p> 38 <p>ここではエミッタ形状を球に変更し作業します。</p> 39 <img src="assets/fire_particle_create04.png" alt="パーティクル作成画像04"/> 40 <p>エミッタ形状を変更するとプレビューパネルでパーティクルの放出が変わるのが確認できます。</p> 41 <h3>テクスチャ中間ファイルの読み込み</h3> 42 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から以下の場所にある炎のテクスチャ中間ファイルを読み込みます。</p> 43 <p>%NW4C_ROOT%/SampleData/Effect/Intermediate/ManualResource/Fire_Particle/Fire_Anim.ctex</p> 44 <p>以下は、使用するテクスチャ画像です。テクスチャフォーマットは<em> L8 </em>を使用しています。</p> 45 <img src="assets/fire_particle_create02.png" alt="パーティクル作成画像02"/> 46 <p>炎のテクスチャ中間ファイルを読み込むと CreativeStudio の コンテンツパネルに Fire_anim が表示されます。</p> 47 <p>テクスチャには、4 パターンの炎が書かれています。これは後ほど説明するテクスチャパターンアニメーションのためです。</p> 48 <h3>マテリアルの設定</h3> 49 <p>マテリアルパネルを使用して CreativeStudio に読み込んだ炎のテクスチャ中間ファイルをパーティクルに貼り付けます。</p> 50 <p class="no">（1）コンテンツパネルに表示されている fireMaterial をシングルクリックするとプロパティパネルに、マテリアルパネルが表示されます。</p> 51 <a href="assets/fire_particle_create05.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/fire_particle_create05.png" alt="パーティクル作成画像05"/></a> 52 <p>マテリアルパネルには、標準モード、詳細モード、パーティクルモードが用意されています。</p> 53 <p class="warning">ここでは、マテリアルパネルの<em>標準モード</em>を使用して説明します。</p> 54 <p>マテリアルパネルの詳細については、<a href="../../../ui_reference/panel/material/index.html">こちら</a>を参照してください。</p> 55 <h4>テクスチャの追加</h4> 56 <p>マテリアルパネルのテクスチャタブでテクスチャを変更します。</p> 57 <p>テクスチャ一覧のテクスチャ 0 タブのイメージをプルダウンから「Fire_anim」にします。</p> 58 <img src="assets/fire_particle_create06.png" alt="パーティクル作成画像06"/> 59 <p>Fire_anim を選択すると パーティクルに「Fire_anim」テクスチャが設定されます。</p> 60 <img src="assets/fire_particle_create07.png" alt="パーティクル作成画像07"/> 61 <p>マテリアルに使用するテクスチャや、カラーの設定は、マテリアルパネルのフラグメントタブにあるテクスチャコンバイナで行います。</p> 62 <p>テクスチャコンバイナの詳細は、<a href="../../../ui_reference/panel/material/standard_panel/standard_panel_combiner/index.html#combiner">こちら</a>を参照してください。</p> 63 <h3>パーティクルエフェクトの設定</h3> 64 <p>パーティクルセットパネルを使用してパーティクル寿命の時間やアニメーションを設定します。</p> 65 <p>コンテンツパネルに表示されている「fireParticle」をシングルクリックします。</p> 66 <a href="assets/fire_particle_create09.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/fire_particle_create09.png" alt="パーティクル作成画像09"/></a> 67 <p>CreativeStudio メインウィンドウの プロパティパネルに、パーティクルセットパネルが表示されますので以下の項目を変更します。</p> 68 <h4>寿命の設定</h4> 69 <p>ここではパーティクル寿命を設定します。</p> 70 <p>寿命の値を以下の数値に変更します。</p> 71 <img src="assets/fire_particle_create10.png" alt="パーティクル作成画像10"/> 72 <p>上記設定を行うことで 30f ～ 20f の間で<a href="../../../glossary/index.html#particle_life">パーティクル寿命</a>の時間がランダムに変化します。</p> 73 <h4>カラーの設定</h4> 74 <p>パーティクルの色を変更します。</p> 75 <p class="new_hint">補足：<br /> 76 カラーサムネイルを左クリックすると、<a href="../../../ui_reference/panel/property/index.html#color_picker">カラーピッカー</a>がポップアップ表示され色の設定ができます。</p> 77 <img src="assets/fire_particle_create11.png" alt="パーティクル作成画像11"/> 78 <p>ここでのカラーは、パーティクルの頂点シェーダーの色のことです。</p> 79 <p>上記設定を行うと、パーティクルにカラーが反映されます。</p> 80 <img src="assets/fire_particle_create12.png" alt="パーティクル作成画像12"/> 81 <h3>アニメーションの設定</h3> 82 <p>ここでは、炎らしくするためアニメーションを作成します。</p> 83 <h4>アルファのアニメーションを設定</h4> 84 <p>パーティクルの頂点アルファにアニメーションを設定します。</p> 85 <p>アルファのアニメーションプルダウンメニューから「4 キー方式で前の値に上書き」を選択してください。</p> 86 <img src="assets/fire_particle_create13.png" alt="パーティクル作成画像13"/> 87 <p>「4 キー方式で前の値に上書き」の設定項目が表示されますので、以下の数値を設定します。</p> 88 <img src="assets/fire_particle_create22.png" alt="パーティクル作成画像22"/> 89 <p class="new_hint">補足：<br /> 90 4 キー方式とは、アニメーションのキー情報4 箇所のみで構成される負荷の軽いアニメーションです。<br /> 91 4 キー方式で前の値に上書きの詳細は、<a href="../../../user_guide/particle_effect/particleeffect_animation/animation/index.html#four_key">こちら</a>を参照してください。</p> 92 <h4>テクスチャに移動のアニメーションを設定</h4> 93 <p>テクスチャの<em>頂点 UV </em>に移動アニメーションを設定して、テクスチャパターンアニメーションを作成します。</p> 94 <p>設定項目、テクスチャ座標 0 の「頂点 UVの移動」にあるプルダウンメニューからテクスチャパターンを選択して以下の設定をします。</p> 95 <img src="assets/fire_particle_create14.png" alt="パーティクル作成画像14"/> 96 <ul> 97 <li>分割数 U : 4 98 <ul> 99 <li>読み込んだテクスチャ 座標の横方向 ( U 方向 ) の分割数を設定します。</li> 100 </ul> 101 </li> 102 <li>再生順 : 0 - 3 103 <ul> 104 <li>分割したテクスチャの再生順を設定します。</li> 105 </ul> 106 </li> 107 <li>再生オプション : ライフフィットにチェック 108 <ul> 109 <li>アニメーションカーブの時間をパーティクル寿命の時間に合わせます。</li> 110 </ul> 111 </li> 112 </ul> 113 <p>上記設定を行いますと CreativeStudio のプレビューパネルが以下のようになります。</p> 114 <img src="assets/fire_particle_create15.png" alt="パーティクル作成画像15"/> 115 <h4>スケールの設定</h4> 116 <p>パーティクルのスケールを変更してエフェクトの大きさと振れ幅を設定します。</p> 117 <p>スケールの値を以下の設定に変更します。</p> 118 <img src="assets/fire_particle_create16.png" alt="パーティクル作成画像16"/><!-- #BeginLibraryItem "/Library/glossary_particle_amplitude.lbi" --> 119 <!-- 振れ幅 ( particle_shaped_width ) --> 120 <p><em>振れ幅 ( % )</em> とは、パーティクル発生時の基準値にたいして、ランダムな値を入れる機能です。</p> 121 <h5>振れ幅の計算式</h5> 122 <p class="system">基準値 ± ( 乱数 × 基準値 )</p> 123 <!-- #EndLibraryItem --> 124 <h6>例</h6> 125 <p>上記設定の X 軸 = 2 振れ幅 = 25 % にした場合の計算式は、2 ± ( 0.25 × 2 ) になり、ランダムの値は 1.5 ～ 2.5 の間になります。</p> 126 <h5>スケールにアニメーションをつける</h5> 127 <p class="no">（1）スケールのアニメーションプルダウンメニューから「<a href="../../../glossary/index.html#particle_animation_addtion">前の値に加算</a>」を選択します。</p> 128 <p class="no">（2）「前の値に加算」の設定項目が表示されますので、以下の値を設定します。</p> 129 <img src="assets/fire_particle_create17.png" alt="パーティクル作成画像17"/> 130 <p class="new_hint">補足：<br /> 131 上記の設定は、前のフレームの値に -0.02 を加算 ( 小さくする )する設定です。<br /> 132 実際の挙動は、フレームが進むにつれ -0.02 ずつ炎が小さくなります。</p> 133 <h4>回転の設定</h4> 134 <p>回転の設定では、パーティクルの X Y Z 軸への回転とパーティクル生成時の角速度を設定します。<br /> 135 回転の値を以下の設定に変更します。</p> 136 <img src="assets/fire_particle_create18.png" alt="パーティクル作成画像18"/> 137 <h5>回転にアニメーションをつける</h5> 138 <p class="no">（1）回転のアニメーションプルダウンメニューから「前の値に加算」を選択します。</p> 139 <p class="no">（2）「前の値に加算」の設定項目が表示されますので、ランダムテーブルのラジオボタンにチェックを入れます。</p> 140 <img src="assets/fire_particle_create27.png" alt="パーティクル作成画像27"/> 141 <p class="new_hint">補足：<br /> 142 ランダムテーブルにチェックを入れると、以下で作成する回転のアニメーションからランダムにキーを選択してアニメーションさせます。</p> 143 <p>カーブエディタパネルを開き回転の Z 軸にアニメーションを作成します。 </p> 144 <p>Rotate の Z に以下のキーを作成します。</p> 145 <img src="assets/fire_particle_create23.png" alt="パーティクル作成画像23"/> 146 <ul> 147 <li>横軸 : 0 縦軸 : -0.1</li> 148 <li>横軸 : 1 縦軸 : -0.05</li> 149 <li>横軸 : 2 縦軸 : 0.1</li> 150 <li>横軸 : 3 縦軸 : 0.05</li> 151 <li>横軸 : 4 縦軸 : 0</li> 152 </ul> 153 <p class="hint">前の値に加算を使用したアニメーションをカーブエディタパネルで表示させた場合の横軸と縦軸の値は以下になります。<br /> 154 横軸 : フレームの値<br /> 155 縦軸 : 加算するデフォルト値</p> 156 <h4>速度にアニメーションを設定</h4> 157 <p class="no">（1）速度のアニメーションのプルダウンメニューから重力 ( 指定方向に加速 ) を選択して、追加ボタンを押します。</p> 158 <p class="no">（2）重力（指定方向に加速）の設定項目が表示されますので、以下の設定に変更します。</p> 159 <img src="assets/fire_particle_create20.png" alt="パーティクル作成画像20"/> 160 <p>上記設定を行いますと、毎フレーム Y 軸方向に 0.02の重力がかかります 。</p> 161 <img src="assets/fire_particle_create21.png" alt="パーティクル作成画像21"/> 162 <p>パーティクルによる炎のエフェクトが作成されました。</p> 163 <!-- InstanceEndEditable --> </div> 164 <div class="footer" /> 165</div> 166</body> 167<!-- InstanceEnd --> 168</html> 169
