【Aseprite】タイムラインの基本:レイヤーとアニメーション

Aseprite【ドット絵】

この記事では、エディタ下部にあるタイムラインとその機能に触れつつ、Asepriteにおけるレイヤーとアニメーション作成のための機能について解説していきます。

タイムラインの概要と各アイコンの見方

タイムラインは、レイヤーとともに、アニメーションを描くためのセルを管理する場所です。
(表示されていない場合はTabキーで表示/非表示を切り替えられます)

<各アイコンの意味>

 目のマーク:レイヤの表示/非表示を切り替え
 鍵マーク:編集のロック(ロックするとそのレイヤーの編集ができなくなる=誤タッチを防ぐ
 リンクマーク:新規フレームを追加した際に、リンク状態で追加されるかを選択する
 設定マーク:フレームやオニオンスキンの詳細設定を行うためのメニューを開く
 オニオンスキンマーク:オニオンスキンの有効/無効を切り替え(詳細は後述)

一言コメント
一言コメント

アイコンについては後ほど機能ベースで解説していきますのでこの時点ではそんなもんがあるんやな的な認識で大丈夫です!

タイムラインの操作

はじめに、タイムライン自体の表示に関する操作をまとめておきます。

操作効果動作イメージ
Tabキータイムラインの表示/非表示
(タイムライン上で)
Ctrl+マウスホイール
タイムライン表示の拡大/縮小
Enterアニメーションの再生/停止
Shift+Enterアニメーションの再生/停止
(プレビューウィンドウ)

レイヤー

まずはレイヤーの基本操作から押さえていきましょう。

基本操作

操作効果・説明動作イメージ
Shift+N新規レイヤーの追加
Ctrl+J

Ctrl+Shift+J
選択範囲から新規レイヤー作成
(コピー)

選択範囲から新規レイヤー作成
(切り取り)
レイヤーを選択し、
ドラッグ&ドロップ
レイヤーの移動
Shift+X
または
アイコンをクリック
レイヤーの表示/非表示
(対象を選択後、)
Shift+P
レイヤーの設定:
・レイヤ名
・モード
・透過度

  が設定可能
Shift+Alt+N

Shift+E
レイヤーグループの作成

グループの展開切替

レイヤーの移動時、ドラッグするのは[レイヤー]。
誤ってセル(黒丸部分)を選択してしまうと上書きとなってしまうため注意
(↓セルの上書きとなってしまった結果、青いボールの絵が消えてしまった失敗例)

一言コメント
一言コメント

レイヤーについて:
描き終わった絵を後でレイヤー分割するのは少々面倒なのですが、分けすぎたレイヤーをまとめるのは比較的簡単ですので初心者の方はとりあえず色ごとなどでレイヤー分割の感覚をつかんでみるのもおすすめの練習方法です。

静的なレイヤーの設定-背景レイヤーの作成

  1. 背景用のレイヤを追加(Shift+N →レイヤ移動で最下層へ)
  2. 背景の作成(今回の場合色を選択して塗りつぶし+適当に文字を書いてます)
    *背景を作成する際はアイコンで背景以外のレイヤを非表示にすると良いです
  3. レイヤ名を右クリック→[Convert To]→[Background from Layer]で、背景として設定する

    *この設定を行わないと、オニオンスキンの透過が背景色にも適用されてしまい、透過描画がつぶれてしまいます。
  4. (複数のセルが既に存在する場合)他フレームを選択後に右クリックメニューで[Link Cels]でセルをリンクする
    →この操作によって、リンクされたセルのいずれかを変更した場合、そのセルとリンク状態のすべてのセルに反映されるようになります。
  5. 最後にアイコンでセルのリンクを有効化(連続レイヤー化)しておきましょう
    (新規セルを追加した際に自動でリンクされるようになります)

アニメーションとフレーム

ここからはアニメーションを作成するための関連操作について解説していきます。

基本操作

操作効果動作イメージ
Alt+N新規フレームの追加*

*フレームを複製する形で追加
Alt+B空のフレームを追加
(対象を選択後、)
Alt+C
フレームを削除
(対象を選択後、)
Ctrl+ドラッグ&ドロップ
フレームのコピー(挿入)

オニオンスキン(アニメ用透過表示)の有効化/無効化

オニオンスキンとは、アニメーションを作成する際には必須となる前後のセルを透過表示する機能のことです(例↓)

アイコンをクリックすることでオニオンスキンの有効/無効を切り替えることができます

参考情報

おすすめの本①
Aseprite【ドット絵】
ひらまめ(hiramame)をフォローする
ひらまめゲーム制作研究室

コメント

タイトルとURLをコピーしました