レイヤーとアニメーション

レイヤー

レイヤーは、絵を整理するためと、複数のコマからアニメーションを組み立てるために使います。

アニメーションなしの複数レイヤー。新しく作ったレイヤー #12 が太字になっているのは、自分のレイヤーだからです。

キャンバスには必ず 2 つのレイヤーがあり、これらは削除も変更もできません。fg（前景）と bg（背景）です。

自分のレイヤーは、レイヤーパネルの 追加…（Add…）ボタンから作れます。選択中のレイヤーの上と下、どちらに作るかを選べます。

自分のレイヤーは番号が太字になっているのですぐ見分けられます。

レイヤー ID は重なり順ではなく、作られた順番を表します。

自分のレイヤーは フレームを削除 ボタンで削除できますが、残りフレームが 1 つになっているときだけです。この操作は今のところ取り消せません。

注意

デフォルトの fg と bg、そして自分のレイヤー以外に描くときは気をつけてください。そのレイヤーを作った人に、あなたの作品を消されてしまうことがあります。自分のレイヤーを作って描くことをおすすめします。

線は 1 本ずつレイヤーやフレームの間を移動できます。選択ツール の フレームに移動 を使ってください。

アニメーション

ツールはまだ最小限ですが、アニメーションを添えれば絵はぐっと引き立ちます。

昔の scribble.pub のアニメーション（4fps）

レイヤーリストは、そのままアニメーションのタイムラインになります。

フレームレートは 8fps 固定で、1 コマあたりの表示は 125 ミリ秒です。動きをゆっくりにしたいときは、フレームを繰り返す でコマを引き延ばします。

繰り返しはコピーではありません

フレームを繰り返す は新しいコマを作るのではなく、同じコマをタイムラインの別の場所にもう一度置いているだけです。そのため片方に描き足すと、そのコマが使われている場所すべてに反映されます。

レイヤーごとにフレーム数が違っていてもかまいません。ループの詳しい話はこちら。

フレームはどの位置でも編集できます。たとえば 4 コマのアニメーションで 7 番目のティックのコマを削除すると、3 番目のコマが消えます。7 番目のティックは、2 周目の 3 番目にあたるからです。

アニメーションは自分のレイヤーで

フレームを追加できるのは自分のレイヤーだけです。デフォルトの fg と bg、それに他の人が作ったレイヤーには追加できないので、アニメーションを作るときはまず専用のレイヤーを 1 つ用意しましょう（上のレイヤーを参照）。

簡単なアニメーションの作り方

これから作る「ニュートンのゆりかご」。

このアニメーションを手順どおりに作るだけでなく、どこでうまくいかなくなるのか、それをどう直すのかも見ていきます。

始める前に

もっといいチュートリアルのアイデアや、共有したいコツはありませんか？ YouTube、Instagram、TikTok に、うちのアニメーション機能を使った動画を上げた方も。

ぜひ見せてください！ コミュニティで共有するか、Bluesky、X (Twitter)、Instagram、TikTok でタグ付けしてもらえれば、こちらで拝見して紹介します！

ステップ 1 / 15

動かない部分を描く

まずは動かない部分から。この 3 つのボールは、最後まで同じ場所にあります。

レイヤーを追加する

サイドバーから レイヤーとアニメーション（Layers and animations）を開きます。 をクリックして、public layer（パブリックレイヤー）、above（上）の順に選びます。

最初のアニメーション要素は、この新しいレイヤーのフレーム 1 に描きます。

1 コマ目を描く

左のボールを、開始位置である左上に描きます。ここでは動かない背景と区別しやすいように青を使っています。

コマをもう 1 つ足す

追加… をクリックして frame right（右にフレーム）を選びます。

アニメーションが再生されるので 1 コマ目が点滅し始めます。気が散るようなら 一時停止 しておきましょう。

2 コマ目を描く

オニオンスキン をオンにすると、選んだ設定に応じて前のコマの半透明のシルエットが見えます。2 つ目のボールを正しい位置に置くのに役立ちます。

落ちていく途中のボールを描きましょう。

3 コマ目を足して描く

右に 3 コマ目を足して、ボールを一番下 ── 隣のボールにぶつかる位置に描きます。

真ん中のコマを繰り返す

あとはボールを戻すだけ。タイムラインで 2 コマ目を選んで フレームを繰り返す をクリックし、増えたコマを一番右へドラッグします。

ここまでを確認する

再生 をクリックし、オニオンスキン をオフにすると、左のボールが揺れているのが見えます。

まだニュートンのゆりかごではありませんが、簡単なアニメーションならもう作れます。次のステップでは右のボールをアニメーションさせ、2 つを同期させます。

右のボールも同じ手順で

レイヤーをもう 1 つ作って、右のボールにも同じことをします。今度は一番下から始まって、右上へ振り上がる動きです。

ここまでを確認する

もう一度 再生 してみると、2 つのボールがてんでバラバラに動いています。

次は、2 つのトラックを同期させて動きを正しくします。

出だしのコマを揃える

赤いボールは順番を待つ必要があります。止まっている 1 コマ目を選んで 繰り返し を 2 回。青いボールが下りてくる間、赤は動かなくなります。

真ん中のコマを揃える

今度は逆に、青いボールを止めます。フレーム 3（一番下の位置）を選んで 4 回繰り返し、赤が動いている間は青が止まるようにします。

これで赤のコマは 2 回、青のコマは 4 回繰り返したことになります。どうなるか見てみましょう。

レイヤーの長さが揃っていない

1 周目は問題なさそうですが、2 周目で赤いボールが早く動き出してしまい、動きが台無しになっています。

あるレイヤーのアクティブなコマが、別のレイヤーのグレーアウトしたコマ（別の周に属するコマ）と重なっているときは、ループがずれている可能性が高いです。

最後のコマを揃える

ティック 7 と 8 で赤いボールは狙いどおり止まっています。ただしこの 2 つはもう、赤いレイヤーの 2 周目に入っています。

直すには、赤いボールのトラックの最後に待機コマをあと 2 つ足します。止まっているコマを繰り返して一番後ろへドラッグし、両方のトラックが同じ列で終わることを確認してください。

完成

トラックがぴったり揃い、崩れない無限ループになりました。どこで止めても、アクティブなコマとグレーアウトしたコマの境目が同じ位置にあります。

アニメーションモード

コマが 2 つ以上あるレイヤーでは、アニメーションモード（Animation mode）を選べます。

• Sequential（順次）— コマを順番に再生します。通常のアニメーション向けの初期設定です。
• Random（ランダム）— コマをばらばらに再生します。どのティックが出るかは見ている人ごとに違います。
• Roll（ロール）— チャットで誰かが /roll コマンドを送るとティックがランダムに決まり、次のロールまでそのまま表示されます。ティックはサーバー側で生成され全員に共通なので、ボードゲームを描いて遊ぶのにうってつけです。

Roll モードの使い道の一例。チャットに /roll と打ってサイコロを振ります。

順次ループ（Sequential）

順次モードは永久にループします。レイヤーごとのコマ数が違っていて（たとえば 3 と 4）、しかも一方が他方の倍数になっていない場合（3 と 6 なら倍数です）、ループがずれていき、再生するたびに違うコマの組み合わせが生まれます（上のチュートリアルがまさにその例です）。

たとえば、3 コマのレイヤーが 1 周し終えて 1 コマ目に戻ったとき、4 コマのレイヤーはまだ 4 コマ目を表示しています。次のティックでは 3 コマ側が 2 コマ目に進み、4 コマ側がやっと 1 コマ目に戻ります。タイムラインは無限にスクロールできるので、欲しい組み合わせが見つかるまでいくらでも送れます。

アニメーションを 一時停止 すると、レイヤーリストで今いるティックが、すべての順次レイヤーに表示されます。

ランダムと ロール

ランダムとロールは、すべてのレイヤーに同じように効きます。つまり絵を複数のレイヤーに分けても、動きは予想どおりになります。

いちばん単純なのは、全レイヤーのコマ数が同じ場合。このときはどの瞬間も、すべてのレイヤーで同じティックが表示されます。

下の例では、レイヤー 3 と 4 に 1 から 3 の数字が描かれています。どちらも常に同じ数字が出ているのが分かります。

各レイヤーのコマ数が同じ場合の Random モード。

内部では、ランダムなパーセンテージを 1 つ決めて、それを各レイヤーに個別に当てはめてコマを選んでいます。たとえば：

• 4 コマのレイヤーなら、25% 未満が 1 コマ目、25%〜50% が 2 コマ目、以下同様です。
• 3 コマのレイヤーなら、約 33% 未満が 1 コマ目、約 33%〜約 66% が 2 コマ目、以下同様です。

コマ数の違うレイヤーをランダムやロールで思いどおりに動かしたいときは、この仕組みを覚えておくと役に立ちます。