colorになります。colorに設定ができます。colorのロックを解除するとパレットの選択している色とカラーサークルの色が連動するようになります。押すとパレットに新たな色として追加されます。現在のスプライトシートが表示されます。これもスプライトシート同様スクロールでサイズを変更できます。右上の3つのボタンは左から「スプライトシートをプレビューの真ん中に合わせる」「アニメーションを再生する」「プレビューを閉じる」です。2つ目はよく使うので覚えておきましょう。ツール右側にいくつか並んでいるのがツールです。Tool、下から2番目左)の4つだけ覚えれば塗るツールは最低限問題ないと思います。それと一番上の段にある範囲選択も覚えておきましょう。Tool、一番右)の三つが重要です。短形選択はそのまま四角い範囲が選択範囲になります。投げ縄選択はツールの投げ縄と同じ方法で範囲を選択できます。マジックワンドはスプライトシート上の色を左クリックするとそれとつながっている同じ色が選択されます。この三つも覚えておくと便利です。これを一番左にすると新しく範囲を選択した際にそこが新しい選択範囲になり、真ん中だと新しく選択した範囲が古いほうの選択範囲に追加され、一番右だと今選択している範囲から選択した範囲が引かれていきます。選択した範囲はツールバーにあるSelectのDeselectで解除できます。タイムラインこのタイムラインこそAsepriteがドット絵のアニメーション制作ツールにおいて最強たる所以です。Layerを押してみましょう。タイムラインの上に増えた横一列、これが「レイヤー」です。上にあるレイヤーほどスプライトの上に表示されます。Flameを押してみましょう。タイムラインの横に増えた縦一列、これが「フレーム」です。縦一列のレイヤーをまとめたものが一つのフレームとして表示されます。これは「セル」と言いこれをクリックして出てきた黄色い枠線をドラッグアンドドロップすることで移動させることができます。黄色い枠線をCtrlを押しながらドラッグアンドドロップすることでコピーすることができます。これがなかなか便利なので覚えておきましょう。タイムラインについてはさらに便利な機能があるのでそれは後程。その他の機能Q:やり直しがしたいA:EditのUndoからやり直しができます。ショートカットキーはCtrl+Zです。同様にCtrl+Cでコピー、Ctrl+Xで切り取り、Ctrl+Vで張り付け、Ctrl+Sで保存などができます。Shortcutsからできます。Sizeから変更ができます。Sizeは画像の見た目そのままに縦横に引き延ばすイメージです。どちらも画像のサイズは同じですが意味合いが変わってきます。ロックを解除してカラーサークルで作った色とパレットの色が連動するようにします。ModeをIndexedにするとパレットの色と画面の色が連動するようになります。アニメーションについての知識アニメーションを作るための下準備です。制作方法ドット絵に限らずアニメーションの作り方には大きく「逐次描き」と「原画による設計」の2種類に分けられます。Action)一つ目のコマを描いてその次に二つ目のコマを描いて...というようにそのまま順番に作っていく描き方です。Action)重要なコマを先に描いてから間を中割と呼ばれるコマで補完していく描き方です。3DCGに手を出したことがある人ならわかりやすいかも?メリット:全体を先に決めるのでまず失敗しないデメリット:タイミングを合わせるのがやや難しい、うまくやれないとぎこちない動きになるどちらかがとくに優れているわけではないのでこれらの中から時と場合によって選択することになります。速度と加速度あるフレームから次のフレームにドット絵が移動したとき、人はその間にある何もない場所を頭の中で埋めることでドット絵が移動したと認識します。これがアニメーションの基本です。その移動した距離が長いほど人はドット絵が速く移動したと認識します。下の点はツールを使って描いた円の上をピクセル単位でなぞりながら動いています。斜めの移動になった瞬間に動きが速くなったと感じませんか?これが縦横移動と斜め移動の差です。ドット絵は正方形を最小の単位としているために斜めの移動が縦横の移動の約1.4倍の速度になります。このように縦横の移動と斜め移動が混じった動きで斜め移動の速度の差を意識せずにピクセル単位で動かそうとするとコレジャナイ感が出てしまうので注意が必要です。規則に沿った動きがあるとアニメーションの見栄えは良くなります。逆に言うと規則から外れた動きはぎこちなさの原因にもなるので注意が必要です。きに等加速度運動といった感じですね。規則性をピクセル単位で表現できるのはドット絵の大きな強みの一つです。先ほどのように斜め移動が混じる場合ではピクセル単位で移動距離を考えると失敗するので気を付けましょう。両端づめ先ほど規則性が大事と言いましたが直線的にするとぎこちなくなる場面があります。それが生き物の動きです。生き物らしい動き方にするためには直線的な動きにするのではなく、だんだん加速して、だんだん減速するという動きをさせればよいのです。このような動きを「両端づめ」と言います。振り子のような動きと言えばわかりやすいでしょうか。逆に動きに無機物感を出すためにあえて直線的な動きをさせることもあります。上の作品は手の動きが両端づめになっています。急激に手が下に落ちているのは肩を落としてその力で引っ張っているイメージです。づめに加えて生き物の動きにさらにリアリティを与えるのが予備動作と慣性です。両端づめが動作を行うときの動きとするなら予備動作と慣性はその前後に入れられる動きのことになります。予備動作の具体的な例として振りむく前に瞬きをする、軽くうつむくバットを振る前に振りかぶるくしゃみをする前に大きく息を吸うなどがあげられます。この猫ジャンプの場合飛ぶ前の溜めと尻尾が予備動作になっています。尻尾が二本あるのは作画ミスではないです。検索また慣性の例としては着地した時に軽く前のめりになってから戻る走って止まる際に滑って止まるなどですね。予備動作と慣性と両端づめのどれにも言えるのは生き物は突然動作を行ったり突然止めたりはできないということです。この3つを意識すると生き物らしさがグンと増します。言葉そのまま伸び縮みさせることです。物がなにかとぶつかったときや抵抗を受けたときに形を変形させることでその物体の質感を表現することができます。生き物に対して誇張表現として使うこともあります。後追い後追いは髪の毛やスカートなど何かにくっついた物体が付け根に対して遅れて動く動きのことです。このような物体は付け根から離れるほどに最初はその場にとどまろうとし、少し遅れてから付け根の影響を大きく受けます。いった動きは動きの最後にブワッと広げるのがミソです。男の目は揺れるものを追う習性があるらしいので男性向けのものなら特に意識したいところですね。とここまで見てきましたが下の動画にもっとわかりやすくて詳しい説明が載っています。時間がある人はそっちを見てください。押すとオニオンスキンが有効になります。オニオンスキンとは前後のフレームを薄く表示してくれて逐次描き、原画による設計どちらでも非常に頼りになる機能です。逐次描きの場合まず1枚目を描きオニオンスキンを有効にして2枚目を描き、同様に3枚目、4枚目...と続けていきます。原画による設計の場合重要なコマを先に描き間を補完していきます。間のフレームが多くなったときは逐次描きのように少ないフレームから進めるのではなく真ん中のフレームを埋めていくようにすると失敗しにくいです。動く対象が生き物の場合速度が一定だと前述の生き物らしい動きが出なくなるので両端づめを意識した動きにしましょう。オニオンスキンの設定をいじることができます。Tintにチェックを入れると選択しているフレームより前のフレームは赤色、選択しているフレームよりあとのフレームは青色で表示されるようになります。Opacityで透過度も変更できます。レイヤー分けで編集個所を減らす背景や建物といった動かす予定のないものはレイヤーに分けることによって作業量を減らすことができます。このやり方は非常に便利なのでよく使いますがたまに前後関係がややこしくなるときがあります(例:髪の毛の前髪、後ろ髪のレイヤー分け等)。そのようなときは一つのレイヤーで描き切ってしまったほうが速いです。セルを繋げる先ほどのレイヤー分けをした際、誰しもがほぼ間違いなく同じ絵を何フレームも表示するという場面に当たります。そのような場合にセルを一つ一つコピーするのではなくまとめてセルを繋げるという方法が二通りあります。