asepriteについて〜第１回「線画から始めてドット絵を作画する！」

大変お世話になった先輩がお仕事でasepriteを使用するとのことで、何かの参考に出来ればと思い、わたくし、ぴこぴこ２５６が普段行ってる制作フローを軸に、asepriteの使い方や便利機能、ゲームリソースとしての扱い方などをご紹介いたします。
なにぶん、我流なので「もっと良い使い方あるぜ！」みたいなご意見などありましたらお教え頂ければそれはそれで有り難いです。

予定
１・線画から始めてドット絵を作画する！
２・着彩済みの元画像をベースにドット絵を作画する！
３・アニメーションについて
４・ちょっとした便利テクニック・データ形式について
の全４回でお送りいたします。

１・線画から始めてドット絵を作画する！

さて、初回は「１・線画から始めてドット絵を作画する！」です。最近はasepriteで直接描くことも多いのですが、クリスタなどで線画を起こす方法は、ぴこぴこ的には最もポピュラーなものです。以前「低解像度で顔を描く」の記事でこのあたりについてざっくり描いておりますので、興味のある方はどうぞ。
https://note.com/picopico68000/n/nd765b9d0bee2

まず、どうにかして線画を描いていきます。それをお望みの解像度に縮小して、主線を取っていきます。

この絵は解像度が高いので、黒一色ですが、デザイン的に入り組んでいる部分は、この時点で色分けしておくのがよいでしょう。

この絵をasepriteで開くと上図のようになります。この時点では「フルカラー」なので、使用されている色のみがカラーパレットに表示されています。今回の絵は透明色と黒の２色しか使っていないので、このふたつの色がカラーパレットに表示されています。
この「フルカラー」と「インデックスカラー」モードの行き来は自分は結構しますが、よくやるミスとして、せっかくカラーパレット(後述）を作ったのに「フルカラー」モードのまま保存してしまうと、絵に使用している色以外は保存されないので、次に作業しようとファイルを開いたときに、カラーパレットがメチャクチャになってしまうので、自分が今、どのモードで作業しているかは意識しておいた方がよいですね。

カラーパレットを作る！！

次にインデックスカラーによる「カラーパレット」を作ります。ドット絵やってる人ならお馴染みのやつで、wikipediaによると「インデックスカラーとは、画像の色を表現する手法の一つで、あらかじめ決めた色のパレット（カラーマップ）に番号を割り当て、その番号で画像を表現する方法です。これにより、ファイルサイズを小さく保ちつつ、画像を表現することができます。」とあります。
まあ、難しいことはよう解らないので、そういうものがあるんだな！と思ってもらえれば結構です。最近はインデックスカラーを使用しないで、フルカラーでドット絵描く人も多いみたいなので、そんなに重要ではないのかもしれません。

ぴこぴこの場合、このタイミングで背景レイヤーを作ります。画面下部のレイヤーフィールドで右クリック、プルダウンメニューからNew Layerを選ぶと、新たにレイヤーが追加されます。ちなみに
Properties　乗算とかオーバーレイなどの描画モードとか透明度とかの設定
Duplicate　選択しているレイヤーを複製
Merge Down　下のレイヤーと結合
あたりは良く使います。
それ以外のメニューは使ったことないのでようわかりません。

で、レイヤーを追加したら、背景レイヤーを作っておきましょう。その絵に於いて、まず使わない色（ぴこぴこの場合、彩度＆明度の低い緑）を作成して、塗りつぶしツールで塗ってしまいましょう。

パレットフィールドで選択している色が、画面左下部のカラーフィールド（photoshopのカラーウィンドウ）に表示されるので、ここで色相、彩度、明度などを調整して色を作っていきます。

ちなみに、色を調整してもカラーパレットに反映されないなーってことがよくあります。これは、パレットに「ロック」が掛かっているからで、上図のように鍵がかかった状態だと、いくら色を調整してもパレットには何の変化もありません。
デフォルトで「ロック」状態になっているので、このボタンをクリックして「ロック解除」状態にする必要があります。

これで、カラーパレットを作っていくわけですが、ぴこぴこはこの作業が大嫌いで、いつも面倒なので標準のパレットを作っておいて、それを読み込むことにしています。が、ここでは真面目にカラーパレットを作る方法をご紹介します。

上図のように、色を作りながらチマチマと塗っては作り、塗っては作り、と繰り返していくのですが、いつも途中で「こんなんやってられるか！！」となるので、便利ツールを使っていきましょう。

グラデーション機能です。明るい色と、暗い色を任意のコマ数離しておき、この２色を選んだ状態でこの機能を使うと、間に開けたコマ数のグラデーションを作ってくれる！！という機能です。
パレットフィールドの上部にある↓ボタンからプルダウンメニューを押して、Gradientを選ぶとなんと！！

明るい色と暗い色の間で、自動でグラデーションを作ってくれます。とはいえ、単純なグラデーションでは絵に「深み」が出ないので、ちょこちょこと色相を乱れさせて、いい感じに整えるのが良いでしょう。

で、一生懸命作ったカラーパレットが上図となります。肌色とか服の色とかは要素毎にまとめておいた方が作業しやすいでしょう。

ひとしきりカラー設定ができましたら、忘れずにインデックスカラー化しておきましょう。メインメニューの「Sprite」→「Color Mode」から選べます。これを「Indexed」にすることでインデックスカラー化され、カラー自体と、それに対応する番号が登録されます。この作業を行わないでファイルを保存すると…。

次回ファイルを開いたときにカラーパレットがグチャグチャになってしまい、軽く絶望してしまうので是非是非注意！！

知ってるとお得情報

カラーを作成していると、色を増やしたりして、グラデーションに追加したりすることはよくあると思います。そんなとき、カラーをつまんで、ドラッグ＆ドロップすれば、新しいカラーを割り込ませたりできます。これは割とよくやります。

しかしですね。すでに番号が割り振られているカラーに対して他の色を割り込むわけですから、カラーの順番が狂ってしまい、それによって描いていた絵が破壊されてしまうわけです。
しかし心配ご無用。画面左下にある「Remap Palette」ボタンを押すと、ずれてしまったカラー番号を自動で修正してくれるのです！

と、こんな感じで修正されました。あ。今回は特にドット絵の描き方そのものについては言及しない予定です。以前書いた「ドット絵の作画について」の記事をご覧頂ければと思います。

余談になりますが、パレットについては、photoshopでパッと作って、それをasepriteで読み込んでソートする、みたいな手法も使っていましたが、asepriteに慣れてくるとやらなくなりました。

とはいえ、photoshopは超有能なアドオン「coolorus2」というのもあるので、ほとんどの作業をphotoshopでやるぜ！って人もいるかもですね。

つうわけで、わたくしにとって、最もスタンダードな手法を紹介させていただきました。次回は！「着彩済みの元画像をベースにドット絵を作画する！」をお届けいたします。ではまた！！