Asepriteの勉強

1 カスタマイズ
2 あるある
3 Unityとの連携
- 3.1 プラグインの導入
- 3.2 Asepriteでの作業
4 成果物おきば

カスタマイズ

初めにしておくと便利な設定を紹介します。自分の今まで使っていたツール（例えばFireAlpaca）風の操作に設定しておくと、ストレス無く新しいツールに慣れることができます。

マウスホイールでZoomが出来るようにしたい

Macのみなのかもしれないけど、下記で解決
→ [Edit] → [Preference]
→ [Editor] → [Zoom sliding two fingers up or down] にチェック

右クリックでスポイトにしたい

右クリックが背景色で描画で使いづらいので、下記で解決
→ [Edit] → [Preference]
→ [Editor] →[Right-click] を [Pick foreground color] に変更（[Erase] も有りか！？）

シンメトリーオプションが表示されていない。

→ [View] → [Symmetry Options] にチェック

あるある

使っていると出てくる、困り事や、こんな事できないかな？をまとめておきます。

パレットの色が変わらない

パレットの上にある南京錠のアイコン [Edit Color] がロック状態なっている。クリックするか [A] キーを押して解除する。（南京錠が外れたアイコン）

色を簡単に交換したい①

[Sprite] → [Color Mode] → [Indexed] にする。パレットから新しい色を選んでコピー、古い色（置き換えたい色）にペーストで交換できる。

モード	方向性	特典
RGB Color	自由に色を作りながら描きたい。下絵の色をスポイトで取りながら描きたい。
Indexed	パレットを決めて、色数を制限して描きたい。	色の交換が可能

色を簡単に交換したい②

RGB Color モードでも塗りつぶしツールの [Contiguous] のチェックを外して塗ると、隣接していなくても塗られた色と同じ色の部分は全て塗られる。下の図でいうと、オレンジ色の部分は全て空色になる。

拡大縮小

Asepriteの拡大縮小には３種類ある

Nearest-neighbor…最近傍補間（ニアレストネイバー）
Bilinear…バイリニア補間
RotSprite…ロットスプライト

減色

色がばらついている場合。不完全だがありがたい

減色したいイラスト開く
↓
スプライト、カラーモードからRGBカラーにする
↓
左のパレットの色を全部消して空っぽにする
↓
スポイトツールで使いたい色を抽出し、左下の！マークからパレットに色を追加する
↓
使いたい色を抽出できたらスプライト、カラーモードからインデックスカラーにする

アウトラインを描きたい

[Edit] → [FX] → [Outline] でアウトラインツールを呼び出す。（[Shift] + [O] でもOK）

１枚の画像をグリッドで分割したい

配布素材などは複数のドット絵が１枚の画像にまとまっていることがある。

このような画像をグリッド間隔で分割したい場合の方法を紹介する。作業は大きく分けて２つ

グリッドで分割してフレームに変換する
エクスポートでフレームごとファイルになるようにする

グリッドで分割してフレームに変換する

[File] → [Import Sprite Sheet]

[Type] は横方向なら [By Rows] 縦方向なら [By Colums] を指定する
[Width] と [Height] にグリッドと同じ数値を入れる

エクスポートでフレームごとファイルになるようにする

[File] → [Export]

[Resize] で好きな倍率を選ぶ。16×16で描いた場合1000%にすると160×160で出力できる。

出力画像は連番付きで出力される。equipment-export1.png〜equipment-export25.png

連番を0スタートしたい場合はファイル名変換ツールなどを利用しましょう。MacならName Mangler 3などがおすすめ。

スライサーで区切った画像をまとめて保存したい

Mac用

[Aseprite.appまでのパス]aseprite -b --scale 4 --split-slices "[ファイルパス]" --trim --save-as [ファイルパス][ファイル名]-{slice}.png
/Applications/Aseprite.app/Contents/MacOS/aseprite -b --scale 4 --split-slices "/Users/kasaiyuuichi/Library/Mobile Documents/com~apple~CloudDocs/aseprite/genshin.ase" --trim --save-as /Users/kasaiyuuichi/Desktop/genshin-{slice}.png

Windows Power Shell用

本来はこれなんだけど
& 'C:\Program Files (x86)\Steam\steamapps\common\Aseprite\Aseprite.exe' -b --scale 4 --split-slices 'C:\Users\kasai\iCloudDrive\aseprite\genshin.ase' --trim --save-as 'C:\Users\kasai\Desktop\export\{slice}.png'
バッチだとスケールで４倍出力できないのでGUI起動版
& 'C:\Program Files (x86)\Steam\steamapps\common\Aseprite\Aseprite.exe' --scale 4 --split-slices 'C:\Users\kasai\iCloudDrive\aseprite\genshin.ase' --trim --save-as 'C:\Users\kasai\Desktop\export\{slice}.png'

Unityとの連携

プラグインの導入

2D Aseprite Importer という公式でも紹介されているプラグインを導入することによって、Asepriteで保存した.aseファイルや.aseprite ファイルをそのままUnityで取り扱うことができるようになる。単純に画像ファイルとして扱えるようになるのではなく、分割も自動で行われ、アニメーション設定が行われていればAnimationClipとして認識される。至れつくせりである。

https://docs.unity3d.com/ja/2023.2/Manual/com.unity.2d.aseprite.html