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 でパーティクルエフェクトをアニメーションさせる方法について説明します。</p> 20 <a name="how_to_animate" id="how_to_animate"></a> 21 <h2>アニメーションの方法</h2> 22 <h3>前の値に加算</h3> 23 <!-- #BeginLibraryItem "/Library/glossary_particle_animation_addition.lbi" --> 24 <!-- 前の値に加算 ( particle_animation_addtion ) --> 25 <p><em>前の値に加算</em>とは、直前のフレームの値に対して毎フレーム値を加算していくアニメーションの方法です。等速なアニメーションを作成したいときに使用します。</p> 26 <!-- #EndLibraryItem --> 27 <h4>基準値</h4> 28 <p>アニメーションの基準となる値です。 </p> 29 <h4>振れ幅</h4> 30 <!-- #BeginLibraryItem "/Library/glossary_particle_amplitude.lbi" --> 31 <!-- 振れ幅 ( particle_shaped_width ) --> 32 <p><em>振れ幅 ( % )</em> とは、パーティクル発生時の基準値にたいして、ランダムな値を入れる機能です。</p> 33 <h5>振れ幅の計算式</h5> 34 <p class="system">基準値 ± ( 乱数 × 基準値 )</p> 35 <!-- #EndLibraryItem --> 36 <h6>例</h6> 37 <p>スケールの基準値を 10 に、振れ幅 ( % ) の設定を 50 % にした場合、<br /> 38 10 + ( -0.5 ～ 0.5 の乱数 ) × 10<br /> 39 となり、スケール値は 5 ～ 15 の間で変化します。</p> 40 <!-- #BeginLibraryItem "/Library/glossary_random.lbi" --> 41 <!-- ランダム ( random ) --> 42 <p><em>ランダム</em>とは、パラメータに対して乱数をかけることで、常に一定の結果にならない様にする機能のことです。</p> 43 <!-- #EndLibraryItem --> 44 <h4>デフォルト値</h4> 45 <p>設定したデフォルト値を毎フレーム基準値に加算して等速なアニメーションにします。</p> 46 <p class="hint">カーブエディタパネルでアニメーションを作成した場合はキーフレームの値を毎フレーム加算していきます。</p> 47 <h3>前の値に上書き</h3> 48 <!-- #BeginLibraryItem "/Library/glossary_particle_animation_overwrite.lbi" --> 49 <!-- 前の値に上書き ( particle_animation_overwrite) --> 50 <p><em>前の値に上書き</em>とは、直前のフレームの値を指定した値で上書きするアニメーションの方法です。アニメーションカーブでアニメーションを制御しやすい為、便利です。</p> 51 <!-- #EndLibraryItem --> 52 <h4>デフォルト値</h4> 53 <p>直前のフレームの値に対し、デフォルト値を上書きします。<br /> 54 カーブエディタパネルでアニメーションカーブを作成した場合はそのアニメーションで上書きします。</p> 55 <a name="reproduction_order" id="reproduction_order"></a> 56 <h3>再生順</h3> 57 <p>再生順は、テクスチャ座標の頂点UVの移動で<em>テクスチャパターン</em>を選択した時に使用します。</p> 58 <!-- #BeginLibraryItem "/Library/glossary_particle_pattern_animation.lbi" --> 59 <!-- パーティクルのパターンアニメーション ( particle_pattern_animation ) --> 60 <p><em>頂点 UV の移動によるテクスチャパターンアニメーション</em>とは、複数の画像を横または縦に並べた 1 枚のテクスチャ画像に対して、パーティクル各頂点のテクスチャ座標 ( UV ) を移動させることで、表示する画像を切り替える手法のことです。</p> 61 <!-- #EndLibraryItem --> 62 <p>以下の図は、 32 × 32 Pixel 単位に、 A ～ D の文字を横一列に並べたテクスチャ画像を、頂点 UV の移動アニメーションによりパターンアニメーションさせる方法について説明しています。</p> 63 <img class="user_guide_chart" src="assets/particleeffect_playback.png" alt="再生順"/> <a name="four_key" id="four_key"></a> 64 <h3>4キー方式で前の値に上書き</h3> 65 <p><em>4キー方式で前の値に上書き</em>とは、 アニメーションのキー情報4 箇所のみで構成される負荷の軽いアニメーションです。 <br /> 66 フェードイン、フェードアウトアニメーションに特化しており、パーティクルのアルファアニメーション等で、徐々に出現し、徐々に消滅していく様な使用ケースでは、カーブエディタを使用することなく簡単にアニメーションを作成することが出来ます。</p> 67 <p>以下の図は、4キー方式で前の値に上書きについて、スケールのパラメータを例に説明しています。</p> 68 <table> 69 <thead> 70 <tr> 71 <th>パラメータ</th> 72 <th>説明</th> 73 </tr> 74 </thead> 75 <tbody> 76 <tr> 77 <th>フェードイン終了時間</th> 78 <td>開始時の値から中間時の値への変化が終了する時間を、 0.0 ～ 1.0 の間で指定します。</td> 79 </tr> 80 <tr> 81 <th>フェードアウト開始時間</th> 82 <td>中間時の値から終了時の値へ開始する時間を 0.0 ～ 1.0 の間で指定します。</td> 83 </tr> 84 <tr> 85 <th>開始時の値</th> 86 <td>アニメーション開始時の値を指定します。</td> 87 </tr> 88 <tr> 89 <th>中間時の値</th> 90 <td>アニメーション開始から値の変化が終了した時点の値を指定します。</td> 91 </tr> 92 <tr> 93 <th>終了時の値</th> 94 <td>アニメーション終了時の値を指定します。</td> 95 </tr> 96 </tbody> 97 </table> 98 <p>以下の表は、寿命が 100 フレームのパーティクルのアルファアニメーションにおいて、4キー方式で前の値に上書きを使用した場合を例に説明しています。</p> 99 <h6>例</h6> 100 <p>フェードイン終了時間を 0.2 、フェードアウト開始時間を 0.8 とし、 <br /> 101 開始時のアルファ値を 0 、中間時のアルファ値を 1、終了時のアルファ値を 0とした場合、 <br /> 102 20 フレーム間で徐々に出現し、80フレームから徐々に消滅するアニメーションになります。</p> 103 <img class="user_guide_chart" src="assets/particleeffect_in_out_animation.png" alt="4キー方式で前の値に上書き"/> 104 <p class="hint">4キー方式で前の値に上書きは、スケール、スケール ( 拡張 ) 、カラー、アルファのアニメーションで使用できます。</p> 105 <!-- InstanceEndEditable --> </div> 106 <div class="footer" /> 107</div> 108</body> 109<!-- InstanceEnd --> 110</html> 111
