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>ここでは、パーティクル名を color にします。</p> 26 <img src="assets/particle_create01.png" alt="パーティクル名作成画像"/> 27 <p>パーティクル名を入力後、適用して閉じる、または適用を選択するとパーティクルが作成されます。</p> 28 <p>パーティクルを作成すると以下のコンテンツが CreativeStudio に作成されます。</p> 29 <table> 30 <thead> 31 <tr> 32 <th>コンテンツ名</th> 33 <th>説明</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr> 38 <th>( 任意でつけた名前 ) Model</th> 39 <td><a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleModel">モデル</a>のことです。<br /> 40 モデルでは、パーティクルセットを複数作成し、階層として束ねることができます。<br /> 41 作成したパーティクルセットの表示 / 非表示やモデルを中心としたパーティクルの拡大縮小、回転、移動を制御できます。</td> 42 </tr> 43 <tr> 44 <th>( 任意でつけた名前 ) Particle</th> 45 <td><span class="hint"><a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleSet">パーティクルセット</a>のことです。<br /> 46 パーティクルセットでは、パーティクルに関する設定やアニメーションの作成ができます。</span></td> 47 </tr> 48 <tr> 49 <th>( 任意でつけた名前 ) Material</th> 50 <td>パーティクルによるエフェクト専用のデフォルトマテリアルです。</td> 51 </tr> 52 <tr> 53 <th>( 任意でつけた名前 ) Texture</th> 54 <td>パーティクルエフェクトで使用するテクスチャです。</td> 55 </tr> 56 <tr> 57 <th>( 任意でつけた名前 ) Emitter</th> 58 <td><a href="../../../user_guide/particle_effect/particleeffect_structure/content/index.html#ParticleEmitter">エミッタ</a>のことです。<br /> 59 エミッタでは、放出先のパーティクルセットを指定できます。<br /> 60 また、パーティクルの発生数や発生時間を制御できます。</td> 61 </tr> 62 </tbody> 63 </table> 64 <p class="hint">各コンテンツ名はユーザーが任意で入力したパーティクル名で作成されます。<br /> 65 例 colorModel</p> 66 <h3>パーティクルの確認</h3> 67 <p>作成したパーティクルを確認します。</p> 68 <a href="assets/particle_create.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/particle_create.png" alt="作成したパーティクル画像"/></a> 69 <p>CreativeStudio の再生ボタンを押すと プレビューパネルに作成したパーティクルが表示されます。</p> 70 <h3>パーティクルによるエフェクトの設定</h3> 71 <p>作成するカラーアニメーションを確認しやすくするためにパーティクルの移動方向とフレーム数を設定します。</p> 72 <h4>パーティクルの移動方向を設定</h4> 73 <p>パーティクルセットパネルを使用して、パーティクルの移動方向を設定します。</p> 74 <p>ここでの説明では、パーティクルを上方向に等速移動させます。</p> 75 <p class="no">（1）CreativeStudio の コンテンツパネルに表示されている colorParticle をシングルクリックして、メインウィンドウのプロパティパネルにパーティクルセットパネルを表示します。</p> 76 <p class="new_hint">補足：<br /> 77 「colorParticle のアイコン」をダブルクリックすると別ウィンドウで、パーティクルセットパネルが開きます。</p> 78 <a href="assets/particle_create03.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/particle_create03.png" alt="パーティクルセットパネル画像"/></a> 79 <p class="no">（2）パーティクルセットパネルの位置のプルダウンメニューから「指定方向に加算」を選択して「追加ボタン」を押します。</p> 80 <img src="assets/particle_create09.png" alt="パーティクルセットパネル位置"/> 81 <p class="no">（3）指定方向に加算の項目が追加されますので、以下の値を設定します。</p> 82 <p>方向 Y : 1<br /> 83 速度 : 0.2</p> 84 <p>上記設定を行うと、パーティクルが上方向に等速移動します。</p> 85 <img src="assets/particle_create04.png" alt="上方向へ等速移動するパーティクル画像"/> 86 <h4>タイムラインパネルの設定</h4> 87 <p>CreativeStudio のメインウィンドウにあるタイムラインパネルの最終フレームを 200 に変更します。</p> 88 <p class="hint">再生ボタンが押されている場合は、フレーム値の変更ができませんので再生を停止してから変更してください。</p> 89 <h3>カラーアニメーションの設定</h3> 90 <p>上方向に等速移動していくパーティクルにカラーのアニメーションを設定します。</p> 91 <p>パーティクルセットパネルで、カラーのアニメーションを「前の値に上書き」に変更します。</p> 92 <p class="new_hint">補足：<br /> 93 前の値に上書きは、アニメーションさせる方法のことです。前のフレームの値を、次に設定した値で上書きしていきます。</p> 94 <img src="assets/particle_create05.png" alt="カラーアニメーション絶対値変更画像"/> 95 <p>アニメーションの編集はカーブエディタパネルを使用します。</p> 96 <h5>カーブエディタパネルを開く</h5> 97 <p>CreativeStudio のメニュー [ウィンドウ]→[カーブエディタ] を選択します。</p> 98 <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p> 99 <a href="assets/particle_create06.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/particle_create06.png" alt="カーブエディタパネル画像"/></a> 100 <p>カーブエディタパネルを開くと、グラフツリービューに colorParticle が表示されていますので、マーカーをクリックしていくと X Y Z が表示されます。</p> 101 <p class="hint">X Y Z はカラーチャンネルの R G B に相当します。</p> 102 <h5>カーブの作成</h5> 103 <p>colorParticle の Color X Y Z にアニメーションカーブを作成します。</p> 104 <p>以下の図のように、アニメーションカーブを作成してください。</p> 105 <img class="user_guide_chart" src="assets/startup_guide_effect_curve.png" alt="カラーのアニメーションカーブ"/> 106 <p class="hint">作成したカーブは、Ctrl + C でコピー、Ctrl + V でペーストできます。<br /> 107 カラーチャンネルひとつのカーブを作成し、他のカラーチャンネルへコピーすることで、それをもとにカーブを作成すると便利です。</p> 108 <p>カーブを作成するとメインウィンドウのプレビューパネルでパーティクルが同じタイミングでアニメーションしているのが確認できます。</p> 109 <img src="assets/particle_create07.png" alt="パーティクルアニメーション画像"/> 110 <h4>アニメーションのランダム設定</h4> 111 <p>作成したアニメーションにランダム設定をします。</p> 112 <h5>パーティクルセットパネルの設定</h5> 113 <p>先ほど設定したカラーアニメーションの再生オプションを以下のように設定します。</p> 114 <img src="assets/particle_create10.png" alt="カラーアニメーションの再生オプションを設定"/> 115 <ul> 116 <li>フレーム数指定ループにチェックして 1 周期のフレーム数を 100 に変更<br /> 117 フレーム数指定ループを使用することにより、カーブを任意の尺に伸縮させることができます。<br /> 118 ここでは、作成したカーブと同じ 100 フレームなので作成したカーブそのままにアニメーションします。</li> 119 <li>ランダムオフセットにチェック<br /> 120 上記設定を行うことにより、アニメーションの開始をランダムにずらすことができます。</li> 121 </ul> 122 <p class="hint">1 周期のフレーム数を変更すると、プレビューに表示されているアニメーションがランダムに変わることが確認できます。</p> 123 <img src="assets/particle_create08.png" alt="再生オプション画像"/> <!-- InstanceEndEditable --> </div> 124 <div class="footer" /> 125</div> 126</body> 127<!-- InstanceEnd --> 128</html> 129
