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