ドット絵・アニメーション制作などに便利な画像エディタ Aseprite で描いた、数枚のドット絵を用いてパラパラ漫画のようなアニメーションを作成する際に、いくつかのフレームだけ同じ画像を共有するように設定できるリンクセル機能の使用例について紹介します。
※ Steam 版の Aseprite 1.3.7 を使用しています。
関連記事
Aseprite で描いた数枚のドット絵を用いて、パラパラ漫画のようなアニメーションを作成する手順については以下の記事を参照してください。
リンクセルとは
リンクセルは、指定されたフレームたちの用いる画像を共有できます。
例えば、右に進む歩行アニメーションで、「まっすぐ立つ」→「右足を前に出す」→「まっすぐ立つ」→「左足を前に出す」という４フレームがあった場合、1・3 番目の「まっすぐ立つ」フレームは、コピーするよりもリンクセルで共有した方が、修正する際などに自動的にどちらも同じ画像になり便利です。
Two cels are linked when they share their image and the xy-coordinate. Linked cels looks as follow in the timeline:
2 つのセルは、イメージと xy 座標を共有するとリンクされます。リンクされたセルはタイムラインでは次のように表示されます。When you modify one of these cels, all linked cels are modified. In this way you can propagate the same change into several frames. E.g. If you have a static background, you would prefer linked cels, so you can make changes just in one cel to view the change in the whole animation.
これらのセルの 1 つを変更すると、リンクされているすべてのセルが変更されます。このようにして、同じ変更を複数のフレームに伝播できます。例えば。静的な背景がある場合は、リンクされたセルを使用すると、1 つのセルに変更を加えてアニメーション全体の変更を確認できるようになります。Aseprite – Docs – Linked-cels と Google 翻訳
リンクセルする前のサンプル
今回は、フレーム１と３の各レイヤー１の画像をリンクセル（共有）します。
リンクセルをする前の、各フレームの画像を Sprite Sheet 形式で確認しましょう。
Sprite Sheet 形式では、アニメーションの各フレームを１枚の画像に並べて表示・出力できます。
メニュー「File」→「Export」→「Export Sprite Sheet」を選択します。
Sprite Sheet 形式で出力する前のプレビュー画面では、マウスホイールの回転でプレビュー画像を拡大・縮小できます。
左から順にフレーム１，２，３，４の画像です。
リンクセルする前の１と３は、異なる画像（手書きの番号）が描かれています。
リンクセルで 1・3 番目のフレームを共有する
複数選択したレイヤーをリンクセルで共有します。
この結果として２番目に選択したレイヤーの画像は消えて、１番目に選択したレイヤーの画像と共有されます。
Shift キーを押すとフレーム１、３のレイヤー１を選択した場合フレーム １、２、３のレイヤー１がリンクセルの対象です。
Ctrl キーを押すとフレーム１、３の各レイヤー１だけが対象になりますが、左クリックだと範囲選択のようになったので Ctrl + 右クリックで選択しました。
１・３番目のフレームの各レイヤー１をリンクセルで共有する手順は以下です。
- フレーム１のレイヤー１の「〇」をクリックします。
- フレーム３のレイヤー１の「〇」を Ctrl + 右クリックします。
- 表示されたメニュー「Link Cels」をクリックします。
フレーム１と３の各レイヤー１のリンクセルを行うと、それらが線で結ばれました。
前述した方法で Sprite Sheet を表示すると、３番目の画像が１番目の画像に変わりました。
※ Sprite Sheet のプレビュー表示は、メニュー「File」→「Export」→「Export Sprite Sheet」を選択してください。
リンクセルしたレイヤー群は、画像が共有されているので、一方の画像を変更すると、リンクセルした他のレイヤーの画像も変化します。
テスト再生
再生ボタンを押すと、１フレーム目と３フレーム目はリンクセルで共有された同じ画像が表示されました。
※１コマ３００ミリ秒に変更して再生しました。
いくつかのフレームで同じ画像を使う際は、リンクセルを設定しておくと、画像を修正した際にリンクセルした他の画像にも自動的に反映されるので便利です。
まとめ
今回は、ドット絵・アニメーション制作などに便利な画像エディタ Aseprite で描いた、数枚のドット絵を用いてパラパラ漫画のようなアニメーションを作成する際に、いくつかのフレームだけ同じ画像を共有するように設定できるリンクセル機能の使用例について紹介しました。
参照サイト Thank You!
- Aseprite – Animated sprite editor & pixel art tool
- Steam：Aseprite
- Aseprite – Docs – Linked-cels
- 【Asepriteでアニメーション】これは便利！「リンクセル（Link Cels）」を使ってみよう | ゆずゆろぐ。 (yuzuyu3.com)
記事一覧 → Compota-Soft-Press
コメント