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

タイムライン概要

Resprite には、レイヤー、フレーム、セル、アニメーションクリップをまとめて管理できる Aseprite 風のタイムラインがあります。ここではまずタイムラインの基本構成を確認し、そのあとでプラットフォームごとの使いやすい設定や操作を紹介します。

タイムラインの基本構成

タイムラインは主に次の領域で構成されています。

  • レイヤーヘッダー レイヤー名、表示状態、グループを管理します。
  • 上部のフレームヘッダー フレームを確認したり選択したりします。
  • 中央のセル領域 各レイヤーが各フレームでどんな内容を持っているかを見ます。
  • クリップ行 アニメーションクリップを使っている場合に表示されます。

Resprite を使い始めたばかりなら、まずはこの4つの役割を把握しておくと、後でレイヤー、フレーム、セルの各ページを読むときにもわかりやすくなります。

タイムラインの配置とパネルサイズ

iOS 版では、スプライトエディタの Menu ▸ View ▸ Timeline Position から、タイムラインを左、右、下のいずれかに配置できます。

/new-medias/animation/animation-timeline-ios-position-menu.jpeg
iOS のタイムライン位置メニュー

デスクトップ版では、タイムラインは独立したウィンドウとして使います。用途に応じてウィンドウサイズを変えれば、一覧重視にも編集重視にも切り替えやすくなります。

/new-medias/animation/animation-timeline-desktop-overview.png
デスクトップ版のタイムラインウィンドウ

レイヤーヘッダー幅の調整

iOS でもデスクトップでも、レイヤー名エリア右端の仕切りをドラッグして、レイヤーヘッダーの幅を調整できます。レイヤー名が長いときや、サムネイルを見やすくしたいときに便利です。

/new-medias/animation/animation-timeline-layer-header-width.gif
レイヤーヘッダー幅の調整

レイヤーサムネイル

レイヤーサムネイルを表示すると、各レイヤーの内容をひと目で把握しやすくなります。

  • iOS では View メニューや関連設定から切り替えられます。
  • デスクトップ版ではタイムライン設定でオン・オフできます。
/versions/r51/layer_thumbnails.png
タイムラインのレイヤーサムネイル

タイムラインのアクションバー

タイムライン上部のアクションバーには、よく使う操作がまとめられています。たとえば次のようなものです。

  • 再生、停止、前後フレームへの移動
  • 新規レイヤー、新規フレーム
  • オニオンスキンの切り替え

iOS 版では、タイムラインのアクションバー全体を表示するかどうかを決められるほか、どのボタンを並べるかも細かく調整できます。

デスクトップ版のタイムラインアクションバーはより軽量で、主に再生、新規レイヤー、新規フレーム、オニオンスキンが中心です。タイムラインウィンドウの高さが足りない場合は、表領域を優先するためにアクションバーが自動的に非表示になることもあります。

/new-medias/animation/animation-timeline-desktop-action-bar-settings.png
デスクトップ版のタイムラインアクションバー設定

再生動作の設定

少し描いては再生し、また描き足す、という作業をよくするなら、タイムラインの再生設定を知っておくと便利です。現在のバージョンでは次のような設定が使えます。

  • 先頭から再生する
  • クリップをまたいで連続再生する
  • 一定回数の再生後に自動停止する
  • 停止時に元の選択フレームへ戻る

短いアニメーションを何度も確認しながら作業したいときに役立ちます。

/new-medias/animation/animation-timeline-playback-settings.png
タイムラインの再生設定

モバイルでのフレーム移動ジェスチャ

モバイルでは、単指でフレーム移動するモードを有効にすると、タイムラインへ戻らなくてもキャンバス上でいくつかの時間軸操作を行えます。

基本的な使い方は次のとおりです。

  • 左右へドラッグして前後のフレームへ移動
  • 上下へドラッグしてオニオンスキンを切り替え
  • 必要に応じてダブルタップで再生 / 一時停止

この操作系は主にタブレット向けです。デスクトップ版では使わず、iPhone でも同じ単指描画モード設定は表示されません。

/doc-imgs/timeline-gesture.jpeg
モバイルの単指フレーム移動ジェスチャ

続けて読む: