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 <h2>ビジビリティアニメーションとは</h2> 22 <p>ビジビリティアニメーションは、モデルの表示 / 非表示を制御するアニメーションです。</p> 23 <h3>カーブエディタパネルの設定</h3> 24 <p>ビジビリティアニメーションの作成 / 編集は、カーブエディタパネルを使用します。</p> 25 <p>カーブエディタパネルの詳細は、<a href="../../../ui_reference/tool_panel/curveeditor_panel/index.html">こちら</a>を参照してください。</p> 26 <a href="assets/curve_editor_axis.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/curve_editor_axis.png" alt="カーブエディタパネルの軸説明"/></a> 27 <p>ビジビリティアニメーションを作成するカーブエディタパネルの縦軸と横軸の設定内容は「表 1」になります。</p> 28 <p>表 1 ビジビリティアニメーションを作成する際のカーブエディタ縦軸 / 横軸の設定</p> 29 <table> 30 <thead> 31 <tr> 32 <th>設定項目</th> 33 <th>縦軸 / 横軸</th> 34 <th>設定内容</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <th rowspan="2">IsVisible ( Curve )</th> 40 <td>縦軸</td> 41 <td>0 と 1 でモデルの表示 / 非表示を設定します。<br /> 42 0 : モデルを非表示<br /> 43 1 : モデルを表示</td> 44 </tr> 45 <tr> 46 <td>横軸</td> 47 <td>フレーム数 ( モデルを表示 / 非表示にするフレーム数 )</td> 48 </tr> 49 </tbody> 50 </table> 51 <h2>設定例</h2> 52 <p>ここでは、サンプルデータ TutorialToyBlock の ToyMt を使用してビジビリティアニメーションの設定方法を説明します。</p> 53 <ol> 54 <li><a href="#sample_data_reading">サンプルデータの読み込み</a></li> 55 <li><a href="#curve_editor_confirms">カーブエディタパネルの確認</a></li> 56 <li><a href="#visibility_animation_edit">ビジビリティアニメーションの編集</a></li> 57 </ol> 58 <a name="sample_data_reading" id="sample_data_reading"></a> 59 <h3>サンプルデータの読み込み</h3> 60 <p>CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] で以下の場所にある ToyMt.cres を開きます。</p> 61 <p>" %NW4C_ROOT%/SampleData/Graphics/Intermediate/ManualResource/TutorialToyBlock/ToyMt.cres "</p> 62 <a href="assets/Toy_Block.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/Toy_Block.png" alt="Toy_Block読み込み画像"/></a> <a name="curve_editor_confirms" id="curve_editor_confirms"></a> 63 <h3>カーブエディタパネルの確認</h3> 64 <p>カーブエディタパネルで ToyMt のビジビリティアニメーション設定を確認します。</p> 65 <p>コンテンツパネルに表示されている Toy_Mt ( モデル ) を選択してカーブエディタパネルを開きます。</p> 66 <p>図 1. コンテンツパネルで Toy_Mt を選択</p> 67 <img src="assets/visibility_animation.png" alt="マテリアルカラーアニメーションコンテンツ"/> 68 <p>CreativeStudio のメニュー [ウィンドウ]→[カーブエディタ] を選択してカーブエディタを開きます。</p> 69 <p>図 2 Toy_Mt のカーブエディタパネル</p> 70 <a href="assets/visibility_animation01.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/visibility_animation01.png" alt="visibility_animation"/></a> 71 <p>カーブが設定されている「設定項目」は、カーブエディタパネルのグラフツリービューに強調されて表示されます。</p> 72 <p>ビジビリティアニメーションは、IsVisible の Curve に作成してあります。</p> 73 <a name="visibility_animation_edit" id="visibility_animation_edit"></a> 74 <h3>ビジビリティアニメーションの編集</h3> 75 <p>実際に Toy_Mt を使い、ビジビリティアニメーションの作成と編集方法を説明します。</p> 76 <p>カーブエディタパネルのグラフツリービューで IsVisible を選択するとグラフビューに図 3 が表示されます。</p> 77 <p>図 3 ビジビリティアニメーションカーブ</p> 78 <a href="assets/visibility_animation02.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/visibility_animation02.png" alt="エミッションカラーアニメーション"/></a> 79 <p>グラフビューを選択して A キーを押すと、設定してあるすべてのキーが表示されるように調整されます。</p> 80 <p>Toy_Mt のビジビリティアニメーションの設定は以下になります。</p> 81 <p>表示されていた Toy_Mt が 70 フレームから 99 フレーム目まで消えて、 100 フレームからまた表示される設定になります。</p> 82 <table> 83 <thead> 84 <tr> 85 <th>フレーム</th> 86 <th>設定内容</th> 87 <th>結果</th> 88 </tr> 89 </thead> 90 <tbody> 91 <tr> 92 <th>0 ～ 69</th> 93 <td>キー設定は、 1 になります。</td> 94 <td>ToyMt はこの間、表示されています。</td> 95 </tr> 96 <tr> 97 <th>70 ～ 99</th> 98 <td>キー設定は、 0 になります。</td> 99 <td>ToyMt はこの間、非表示になります。</td> 100 </tr> 101 <tr> 102 <th>100 ～ 180</th> 103 <td>キー設定は、 1 になります。</td> 104 <td>ToyMt はこの間、表示されています。</td> 105 </tr> 106 </tbody> 107 </table> 108 <h4>編集例</h4> 109 <ol> 110 <li><a href="#not_hide_model">モデルを非表示にしない</a></li> 111 <li><a href="#change_timing">モデルの表示タイミングを変更する</a></li> 112 </ol> 113 <a name="not_hide_model" id="not_hide_model"></a> 114 <h5>モデルを非表示にしない</h5> 115 <p>カーブエディタパネルで、以下のように 0 になる キーを削除します。</p> 116 <p>図 4 カーブに設定してあるキーを削除</p> 117 <a href="assets/visibility_animation03.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/visibility_animation03.png" alt="エミッションカラーアニメーション"/></a> 118 <p class="hint">キーの削除は、消したいキーをマウスで範囲選択して、Delete キーで削除できます。</p> 119 <p>キーを削除すると、上の図のように 0 フレームから 180 フレーム目まで 1 のカーブに編集できます。</p> 120 <p>この状態で、アニメーションを再生すると今まで、70 フレームから 99 フレーム目まで消えていたモデルが表示されます。</p> 121 <a name="change_timing" id="change_timing"></a> 122 <h5>モデルの表示タイミングを変更する</h5> 123 <p>ここでは、「図 4」で非表示にしない設定をしたカーブに新たに 2 つのキーを追加して、モデル Toy_Mt が表示されるフレーム数を変更します。</p> 124 <a href="assets/visibility_animation04.png" rel="ibox" title="画像をクリックして拡大"><img class="ui_thumb" src="assets/visibility_animation04.png" alt="エミッションカラーアニメーション"/></a> 125 <p class="hint">グラフビューでカーブを選択した状態で、 S キーを押すとキーが追加されます。<br /> 126 追加したキーをマウスで範囲選択した後、中ボタンでドラッグして移動できます。</p> 127 <ul> 128 <li>追加したキーを以下の設定にします。 129 <ul> 130 <li>横軸 20 / 縦軸 0</li> 131 <li>横軸 160 / 縦軸 1</li> 132 </ul> 133 </li> 134 </ul> 135 <p>上記の設定をしてアニメーションを再生させると、サンプルモデル Toy_Mt はアニメーションの最初と最後の 20 フレームのみ表示します。</p> 136 <!-- InstanceEndEditable --> </div> 137 <div class="footer" /> 138</div> 139</body> 140<!-- InstanceEnd --> 141</html> 142
