メインコンテンツまでスキップ

フレーム

フレームヘッダーとフレームメニュー

タイムラインの各列は、1つのフレームに対応しています。フレームヘッダーをクリックすると現在のフレームを切り替えられます。フレーム長が長めに設定されている場合は、ヘッダー下部にドットや短いバーが表示されるため、タイミングをすばやく確認できます。タグを付けたフレームには、ヘッダー上に対応する色のマークも表示されます。

  • モバイルでは、フレームヘッダーをダブルタップするとフレームメニューを開けます。
  • デスクトップでは、フレームヘッダーを右クリックするとフレームメニューを開けます。
  • デスクトップで Double Tap to Open Menu を有効にしている場合は、フレームヘッダーのダブルクリックでもメニューを開けます。無効の場合、ダブルクリックでは Frame Properties が直接開きます。

フレームメニューでよく使う項目は次のとおりです。

  • Frame Properties:現在のフレーム、または複数選択中のフレームの長さを設定します。
  • New Frame:現在のフレームを複製し、右側に挿入します。
  • New Empty Frame:右側に空のフレームを挿入します。
  • Delete Frame:現在のフレームを削除します。Resprite は常に最低1フレームを保持します。
  • Copy FramePaste Frame:現在のフレームをコピーまたは貼り付けます。デスクトップではキーボード操作も使えます。
  • Tag:色タグを付けて、キーになるフレーム、タイミングの変化、書き出し地点などを見分けやすくします。

現在のフレームがどのクリップにも属していない場合は、メニューに New Clip も表示されます。モバイルのフレームメニューには Select / Deselect もあり、そこからフレームの複数選択を始められます。

/new-medias/animation/animation-frame-ios-menu.png
モバイルのフレームメニュー

デスクトップのメニュー項目もおおむね同じですが、クリップ関連の操作は主にクリップバーとクリップメニューから行います。

/new-medias/animation/animation-frame-desktop-menu.png
デスクトップのフレームメニュー

フレームの並び替えと複数選択

モバイルでは、フレームヘッダーを長押ししてから左右へドラッグすると並び替えできます。デスクトップでは、フレームヘッダーを直接ドラッグします。連続した複数フレームを選択している場合は、その範囲をまとめて移動できます。

  • モバイルでは、フレームメニューから複数選択に入れます。
  • デスクトップでは、Shift 選択、Select All、右クリックメニュー、ショートカットを組み合わせると複数選択を扱いやすくなります。
  • デスクトップでは、フレームのコピー、カット、貼り付け、削除、全選択もキーボードから操作できます。
/new-medias/animation/animation-frame-reorder.gif
フレームヘッダーをドラッグして並び替える

フレームプロパティとフレーム長

Frame Properties ダイアログでは、フレーム長を設定できます。すでに複数フレームを選択している場合、このダイアログの変更は選択範囲全体に適用されます。

  • フレーム長は、スプライトの基準 FPS に対する倍率として扱われます。
  • 新規フレームは、デフォルトで前のフレーム長を引き継ぎます。
  • 複数フレームを選択してから、同じ長さをまとめて設定できます。
  • フレームヘッダー下部には、短めの長さはドットで表示されます。より長い値は短いバーで表示され、タイムラインが詰まっても読み取りやすくなります。
/doc-imgs/frame-property.jpeg
Frame Properties のフレーム長設定

フレーム長を一括設定するときは、似たタイミングのフレーム範囲を先に選び、まとめて編集すると効率的です。1フレームずつ調整するよりも、アニメーションのリズムを素早く整えられます。

/new-medias/animation/animation-frame-multi-select-duration.gif
複数選択したフレーム長を一括設定

フレームヘッダー上のドットやバーは、プロパティを開かずにアニメーションのタイミングを確認したいときに役立ちます。

/versions/d29/frame_duration_dots.png
フレームヘッダー上の長さドットとバー

書き出した GIF やスプライトシートにも、これらのフレーム長設定が反映されます。

アニメーションクリップ

アニメーションクリップは、連続したフレーム範囲に名前を付けて個別に再生できるようにする機能です。1つのスプライトには複数のクリップを含められます。各クリップは「クリップヘッド」から始まり、次のクリップヘッド、またはタイムラインの終端まで続きます。

  • 現在のフレームがどのクリップにも属していない場合、フレームメニューの New Clip からクリップを作成できます。
  • 連続したフレーム範囲を複数選択している場合、新しいクリップはその選択範囲を優先して作成されます。
  • クリップをクリックすると選択できます。
  • デスクトップでは、クリップバーを右クリックしてクリップメニューを開けます。Double Tap to Open Menu を有効にしている場合はダブルクリックでもメニューを開けます。無効の場合、ダブルクリックではクリッププロパティが直接開きます。

クリップの編集では、クリップメニューとクリッププロパティが主な入口になります。通常のフレームメニューとは別のワークフローとして扱います。

再生モードとクリッププロパティ

Clip Properties ダイアログでは、次の項目を設定できます。

  • クリップ名
  • 再生方向
  • 開始フレーム
  • 終了フレーム

現在使える再生モードは次のとおりです。

  • Forward:先頭フレームから末尾フレームへ再生
  • Backward:末尾フレームから先頭フレームへ再生
  • Ping-pong:順方向に再生したあと、逆方向に戻りながらループ
/new-medias/animation/animation-frame-clip-property-dialog.png
Clip Properties ダイアログ

クリップを選択したあと、左右の端を直接ドラッグして範囲を変更できます。Resprite はクリップ同士が重ならないように自動で制御します。

/versions/d29/drag_clip_range.gif
クリップ端をドラッグして範囲を調整

続けて読む: