おりんくうと学ぶ2Dゲー開発

のほほんと進むゲーム作りブログ

Asepriteで作るドット絵アニメーション

この記事はドット絵 Advent Calendar 2017の12月8日分で寄稿させていただきました。adventar.org

今回は数あるドット絵制作用ツールの中でもアニメーション制作に特化したAsepriteを利用し実際にアニメーションを作るまでの過程を紹介します。Asepriteについてはアケルさんが打ち方講座を記事にしてくださっているので今回はその補完的な役割として考えてください。

qiita.com

今回使用しているAsepriteはv1.2.5-beta2のものです。Asepriteには興味ないけどアニメーションには興味あるよって人はアニメーションについての知識の項から読み始めてね。

目次

Asepriteの基本部分

スプライトシートを作る

Home画面のNew FileからWidth(幅)、Height(高さ)を入力してスプライトシートを作ります。今回は例として64*64のサイズで進めていますがサイズは後述の方法であとからでも変更できるのであまり気にしなくても問題ありません。

f:id:stickBBB:20171205104547g:plain

画面の見方

スプライトシート

中央の四角いパネル模様がスプライトシートです。ここにドット絵を打っていきます。

主な操作

  • 左クリック    パレットから色を選んで塗る
  • スクロール    画面の拡大縮小
  • Ctrl + ドラッグ   スプライトシートの中のものを移動
  • Space + ドラッグ スプライトシートを移動
  • 右クリック    Background colorで塗る

f:id:stickBBB:20171205134402g:plain

右クリックは上のツールバーのEditから一番下のPreferencesを押して上から二つ目のEditorにあるRight-clickで機能を変更することができます。EDGEでドット絵を打っていた人はRight-clickをPick Background Colorにして右クリックを背景色を拾う機能に変えるのがおすすめ。そうでない人も右クリックは背景色を拾うにしたほうがよっぽどの理由がない限りいいです。

また灰色に表示されている部分は透過色と言って保存した時に真っ黒になるので注意。ここの色とサイズもEditのPreferenceからBackgroundで変更可能です。

グリッドが欲しいって人はAlt + Shift + Gでグリッドが表示されます。

パレット

f:id:stickBBB:20171205185921p:plain

一番下に二つある色の上がForeground color、下にある色がBackground colorです。デフォルトの右クリックにあるBackground colorで塗るのBackground colorがこれ。カラーサークルで作った色がForeground colorになります。

パレットの色を左クリックするとその色がForeground color、右クリックするとその色がBackground colorに設定ができます。

また上にあるこれf:id:stickBBB:20171205191213p:plainを押してEdit colorのロックを解除するとパレットの選択している色とカラーサークルの色が連動するようになります。

カラーサークルで作った色はForeground colorの横にあるこれf:id:stickBBB:20171205191640p:plainを押すとパレットに新たな色として追加されます。

プレビュー

現在のスプライトシートが表示されます。これもスプライトシート同様スクロールでサイズを変更できます。右上の3つのボタンは左から「スプライトシートをプレビューの真ん中に合わせる」「アニメーションを再生する」「プレビューを閉じる」です。特に2つ目はよく使うので覚えておきましょう。

閉じたプレビューは右下の1:1みたいなボタンf:id:stickBBB:20171205193036p:plainから再度開けます。

ツール

右側にいくつか並んでいるのがツールです。個人的には

  • f:id:stickBBB:20171205193440p:plain ペン(Pencil Tool、上から2番目左)

  • f:id:stickBBB:20171205193501p:plain バケツ(Paint Bucket Tool、下から5番目左)

  • f:id:stickBBB:20171205193544p:plain 直線(Line Tool、下から4番目左)

  • f:id:stickBBB:20171205193638p:plain 投げ縄(Contour Tool、下から2番目左)

の4つだけ覚えれば塗るツールは最低限問題ないと思います。それと一番上の段にある範囲選択も覚えておきましょう。特に

  • f:id:stickBBB:20171207223130p:plain 短形選択(Rectangular Marquee Tool、一番左)

  • f:id:stickBBB:20171207223837p:plain 投げ縄選択(Lasso Tool、真ん中)

  • f:id:stickBBB:20171207223340p:plain マジックワンド(Magic Wand Tool、一番右)

の三つが重要です。短形選択はそのまま四角い範囲が選択範囲になります。投げ縄選択はツールの投げ縄と同じ方法で範囲を選択できます。マジックワンドはスプライトシート上の色を左クリックするとそれとつながっている同じ色が選択されます。また範囲選択ツールのいずれかを使っていると上に表示されるf:id:stickBBB:20171207224807p:plainこの三つも覚えておくと便利です。これを一番左にすると新しく範囲を選択した際にそこが新しい選択範囲になり、真ん中だと新しく選択した範囲が古いほうの選択範囲に追加され、一番右だと今選択している範囲から選択した範囲が引かれていきます。選択した範囲はツールバーにあるSelectのDeselectで解除できます。

タイムライン

このタイムラインこそAsepriteがドット絵のアニメーション制作ツールにおいて最強たる所以です。

初めに上のツールバーにあるLayerからNew Layerを押してみましょう。タイムラインの上に増えた横一列、これが「レイヤー」です。上にあるレイヤーほどスプライトの上に表示されます。

次にまた上のツールバーにあるFlameのNew Empty Flameを押してみましょう。タイムラインの横に増えた縦一列、これが「フレーム」です。縦一列のレイヤーをまとめたものが一つのフレームとして表示されます。

ここには何かが描かれているときには白い丸f:id:stickBBB:20171206184241p:plainが表示されます。これは「セル」と言いこれをクリックして出てきた黄色い枠線をドラッグアンドドロップすることで移動させることができます。また黄色い枠線をCtrlを押しながらドラッグアンドドロップすることでコピーすることができます。これがなかなか便利なので覚えておきましょう。

タイムラインについてはさらに便利な機能があるのでそれは後程。

その他の機能

Q:やり直しがしたい

A:EditのUndoからやり直しができます。ショートカットキーはCtrl+Zです。同様にCtrl+Cでコピー、Ctrl+Xで切り取り、Ctrl+Vで張り付け、Ctrl+Sで保存などができます。

 

Q:ショートカットキーを設定したい

A:Editの下から2番目にあるKeyboard Shortcutsからできます。

 

Q:スプライトシートのサイズを変更したい

A:SpriteのCanvas Sizeから変更ができます。また似たような機能としてSprite SizeがありますがCanvas Sizeは画像の上下左右にスペースを追加するというイメージ、Sprite Sizeは画像の見た目そのままに縦横に引き延ばすイメージです。どちらも画像のサイズは同じですが意味合いが変わってきます。

f:id:stickBBB:20171208010503p:plain

f:id:stickBBB:20171208010446p:plain

 

Q:スプライトシートの色とパレットの色を連動させたい

A:まずパレットの上にあるEdit colorf:id:stickBBB:20171205191213p:plainのロックを解除してカラーサークルで作った色とパレットの色が連動するようにします。そしてツールバーにあるSpriteからColor ModeをIndexedにするとパレットの色と画面の色が連動するようになります。

 

アニメーションについての知識

アニメーションを作るための下準備です。

制作方法

ドット絵に限らずアニメーションの作り方には大きく「逐次描き」と「原画による設計」の2種類に分けられます。

逐次描き(straight Ahead Action)

一つ目のコマを描いてその次に二つ目のコマを描いて...というようにそのまま順番に作っていく描き方です。

f:id:stickBBB:20171205202806g:plain

メリット:順番に描いていくのでアイディアが取り入れやすい、流体や波などといった表現に強い

デメリット:完成形に違和感があった時に修正が困難、最悪の場合やり直し

原画による設計(Pose-to-Pose Action)

重要なコマを先に描いてから間を中割と呼ばれるコマで補完していく描き方です。3DCGに手を出したことがある人ならわかりやすいかも?

f:id:stickBBB:20171205201553g:plain

メリット:全体を先に決めるのでまず失敗しない

デメリット:タイミングを合わせるのがやや難しい、うまくやれないとぎこちない動きになる

 

どちらかがとくに優れているわけではないのでこれらの中から時と場合によって選択することになります。

動きの基本

速度と加速度

あるフレームから次のフレームにドット絵が移動したとき、人はその間にある何もない場所を頭の中で埋めることでドット絵が移動したと認識します。これがアニメーションの基本です。またその移動した距離が長いほど人はドット絵が速く移動したと認識します。

f:id:stickBBB:20171207151508g:plain

また移動する距離を段々と長くしたり段々と短くすることにより加減速を表現することができます

ドット絵特有の縦横の移動と斜め移動の差

下の点はツールを使って描いた円の上をピクセル単位でなぞりながら動いています。

f:id:stickBBB:20171207170408g:plain

斜めの移動になった瞬間に動きが速くなったと感じませんか?これが縦横移動と斜め移動の差です。ドット絵は正方形を最小の単位としているために斜めの移動が縦横の移動の約1.4倍の速度になります。このように縦横の移動と斜め移動が混じった動きで斜め移動の速度の差を意識せずにピクセル単位で動かそうとするとコレジャナイ感が出てしまうので注意が必要です。

より自然な動きに見せるために

規則性

規則に沿った動きがあるとアニメーションの見栄えは良くなります。逆に言うと規則から外れた動きはぎこちなさの原因にもなるので注意が必要です。放物線の例で言えば横向きに等速直線運動、縦向きに等加速度運動といった感じですね。規則性をピクセル単位で表現できるのはドット絵の大きな強みの一つです。ただし先ほどのように斜め移動が混じる場合ではピクセル単位で移動距離を考えると失敗するので気を付けましょう。

両端づめ

先ほど規則性が大事と言いましたが直線的にするとぎこちなくなる場面があります。それが生き物の動きです。生き物らしい動き方にするためには直線的な動きにするのではなく、だんだん加速して、だんだん減速するという動きをさせればよいのです。このような動きを「両端づめ」と言います。振り子のような動きと言えばわかりやすいでしょうか。逆に動きに無機物感を出すためにあえて直線的な動きをさせることもあります。

f:id:stickBBB:20171206010650g:plain

上の作品は手の動きが両端づめになっています。急激に手が下に落ちているのは肩を落としてその力で引っ張っているイメージです。直線的な動きにしないだけでもある程度の生き物らしさが与えられます。

予備動作・慣性

両端づめに加えて生き物の動きにさらにリアリティを与えるのが予備動作と慣性です。両端づめが動作を行うときの動きとするなら予備動作と慣性はその前後に入れられる動きのことになります。

予備動作の具体的な例として

  • 振りむく前に瞬きをする、軽くうつむく
  • バットを振る前に振りかぶ
  • くしゃみをする前に大きく息を吸う

などがあげられます。

f:id:stickBBB:20171206155802g:plain

この猫ジャンプの場合飛ぶ前の溜めと尻尾が予備動作になっています。尻尾が二本あるのは作画ミスではないです。→ お燐 - Google 検索

また慣性の例としては

  • 着地した時に軽く前のめりになってから戻る
  • 走って止まる際に滑って止まる

などですね。

予備動作と慣性と両端づめのどれにも言えるのは生き物は突然動作を行ったり突然止めたりはできないということです。この3つを意識すると生き物らしさがグンと増します。

伸縮

言葉そのまま伸び縮みさせることです。物がなにかとぶつかったときや抵抗を受けたときに形を変形させることでその物体の質感を表現することができます。また生き物に対して誇張表現として使うこともあります。

後追い

後追いは髪の毛やスカートなど何かにくっついた物体が付け根に対して遅れて動く動きのことです。このような物体は付け根から離れるほどに最初はその場にとどまろうとし、少し遅れてから付け根の影響を大きく受けます。

f:id:stickBBB:20171206163527g:plain

こういった動きは動きの最後にブワッと広げるのがミソです。男の目は揺れるものを追う習性があるらしいので男性向けのものなら特に意識したいところですね。

 

とここまで見てきましたが下の動画にもっとわかりやすくて詳しい説明が載っています。時間がある人はそっちを見てください。

www.nicovideo.jp

実際に作ってみる

Asepriteの便利機能を活用しよう

オニオンスキン

タイムラインのここf:id:stickBBB:20171206192820p:plainを押すとオニオンスキンが有効になります。オニオンスキンとは前後のフレームを薄く表示してくれて逐次描き、原画による設計どちらでも非常に頼りになる機能です。

逐次描きの場合まず1枚目を描きオニオンスキンを有効にして2枚目を描き、同様に3枚目、4枚目...と続けていきます。

f:id:stickBBB:20171206203513p:plain

原画による設計の場合重要なコマを先に描き間を補完していきます。間のフレームが多くなったときは逐次描きのように少ないフレームから進めるのではなく真ん中のフレームを埋めていくようにすると失敗しにくいです。また動く対象が生き物の場合速度が一定だと前述の生き物らしい動きが出なくなるので両端づめを意識した動きにしましょう。

f:id:stickBBB:20171206203933p:plain

またオニオンスキンの横にあるこのボタンf:id:stickBBB:20171206205557p:plainからオニオンスキンの設定をいじることができます。Red/Blue Tintにチェックを入れると選択しているフレームより前のフレームは赤色、選択しているフレームよりあとのフレームは青色で表示されるようになります。またOpacityで透過度も変更できます。

f:id:stickBBB:20171206211756p:plain

レイヤー分けで編集個所を減らす

背景や建物といった動かす予定のないものはレイヤーに分けることによって作業量を減らすことができます。

f:id:stickBBB:20171207230904g:plain

このやり方は非常に便利なのでよく使いますがたまに前後関係がややこしくなるときがあります(例:髪の毛の前髪、後ろ髪のレイヤー分け等)。そのようなときは一つのレイヤーで描き切ってしまったほうが速いです。

セルを繋げる

先ほどのレイヤー分けをした際、誰しもがほぼ間違いなく同じ絵を何フレームも表示するという場面に当たります。そのような場合にセルを一つ一つコピーするのではなくまとめてセルを繋げるという方法が二通りあります。一つ目はタイムラインにあるこれf:id:stickBBB:20171207234534p:plainを使うやり方。セルを繋げたいレイヤーのこれf:id:stickBBB:20171207234534p:plainを押してこの状態f:id:stickBBB:20171207235157p:plainにしてからセルをコピーするとなんとこんな風f:id:stickBBB:20171208002502p:plainにつながっています。もう一つのやり方として繋ぎたいセルをまとめって選択し右クリックでLink cellsを選ぶと同じようにつながります。たくさんのセルをまとめるときは後者のやり方で、繋げるフレームを追加したいときは前者の方法になると思います。

1枚のドット絵からアニメーションを作る

アニメーションを作るとはいっても何枚も正攻法でドット絵を打つ必要はありません。1枚だけドット絵を打てばそこからアニメーションを作ることができます。正直これを書くためだけにこの記事を書きました。

レイヤーでパーツごとに動かす(アンテ式)

その名の通りパーツをレイヤーに分けて個別に動かすやり方です。例として作ろうと思ったんですけどうまくいきませんでした。なのでみんなもアンダーテールを買ってどんなやり方なのかを確かめよう!Steamで税込み980円!評価は安心と信頼の圧倒的好評!未プレイ勢はストアへ急げ!プレイする前に絶対にネタバレを食らってはいけない(戒め

store.steampowered.com

切り貼りしながら描き足していく(継ぎ接ぎ式)

こっちが本編です。具体的にはツールの「範囲選択」を利用し一枚の絵をどんどん改造していくやり方になります。今回はこの継ぎ接ぎ式でこれを作成します。ちなみに継ぎ接ぎ式の命名は私です。

f:id:stickBBB:20171207233202g:plain

1.まずは一枚絵を描く

 正直ここが一番大変。今回はアニメーション関連重視なので一枚絵の描き方はそんなもん俺が知りたい割愛します。強いて言うなら好きなドッターの真似をすればいいと思います。でもやっぱりわかんねぇよって人は他のアドベントカレンダーの人をあたってください。

f:id:stickBBB:20171207233319p:plain

 

2.次のフレームに描いた絵をコピーする

 ここでは3つのコピーするやり方があります。一つ目はツールバーのFlameからNew Flameを押すやり方。現在のフレームと同じものが次のフレームにレイヤーごとコピーされます。二つ目はコピーするセルを押し黄色い縁をCtrlを押しながらドラッグアンドドロップするやり方。早くて楽なので使う機会は一番多いと思います。最後が範囲選択でコピーする範囲を選択しCtrl+Cでコピー、次のフレームでCtrl+Vで張り付けるやり方。今回のような場合ではあまり使いませんが何よりほかのファイルから画像を持ってこれるという大きな利点があります。この三つのやり方を覚えておけば問題はないはずです。

f:id:stickBBB:20171207233719p:plain

 

3.コピーした絵を範囲選択でゴリゴリ改造する

 最初に作った一枚絵を短径選択でぶった切ります。そしてぶった切った間を修復していきます。このような荒業ができるのはドット絵ならではですね。アニメーションについての知識でやったことを生かしプレビューで動きを確認しながら動かしていきますがぬるぬるな動きにするコツとしてはフレームが移るごとに極力変化がない場所を作らない、つまり必ずどこかしらを変えるということです。これをやるだけでも見た目が良くなります。

f:id:stickBBB:20171208000345p:plain

 

4.2と3を繰り返し最後のフレームが最初のフレームに戻るように調整する

 そして出来上がった全体のコマがこちら。

f:id:stickBBB:20171208000630p:plain

 

とまあこんな感じです。僕の作ってるアニメーションはもっぱらこのやり方になります。メリットとしては何枚も続けて絵を描けるほどの画力がないって人でも同じようなクオリティで何フレームもあるアニメーションを作ることができるところですね。

作った作品を保存する

作った作品はしっかり保存をしましょう。作品を保存するまでがアニメーション作りです。基本的にはツールバーにあるFileのSaveから保存先を指定し保存形式と名前を選択して保存することになります。保存形式がよく分からない人は画像ならPNG形式、アニメーションならGIF形式にしておきましょう。ちなみにドット絵をJPEGで保存することは丹精込めて作った料理をドブ沼に叩きつけるが如き行為なので絶対にやってはいけません。絶対に。JPEGで保存されたドット絵bot (@jpeghozondotbot) | Twitter

ゲーム作り等をしている人でフレームごとに画像として出力したい場合やアニメーションを一枚のスプライトシートとして出力したい人もいると思います。前者の場合アニメーションを作った状態でFileのSaveから画像系の保存形式を選んで保存すると質問が出てくるのでAgreeを選ぶとそれぞれのフレームを画像形式で出力してくれます。後者の場合はツールバーのファイルからExportを選んで画像形式を選択するとすべてのフレームが横につながった状態で一枚の画像として出力されています。

またツイッター等にあげる際には適切なサイズに拡大することで画質が向上するので積極的に拡大していきましょう。画像の拡大のやり方はAsepriteの基本部分のその他の機能で触れていますので確認してください。ツイッターは縦か横のサイズが256~512px前後に収まっているとタイムラインに綺麗に表示されます。これ以上大きかったり小さかったりすると引き延ばされたり、逆に縮小されたりで本来の見た目よりもだいぶ悪くなってしまうので注意です。

最後に

書きたいことを書きたくっていたらめちゃめちゃ長くなってましたどうしてこうなった。結果的に僕の脳内でうにゃうにゃしていたものが言語化されたのはよかったと思います。何かの間違いでこの記事を見てAsepriteを使い始めましたって人は僕に教えてください泣いて喜びます。

 

追記:なんと!今日12月8日は!Nejimaki Boy (@nejimaki_boy) | Twitter

さんのお誕生日!パチパチパチパチというわけでお祝いしましょう!ちなみに見返りはないそうですがラブアンドピース!愛だよ愛!