Asepriteの使い方メモ

Asepriteとは  

Windows & Mac OS X & Linux(Ubuntu) で動作する、スプライトアニメーション・ドット絵のエディタ

特徴  

  • Animation Tools: レイヤー、フレーム、オニオンスキン、連続したフレームの赤/青の色合い、ピンポン再生、リピート範囲を指定した再生、など
  • Pixel-art Tools: ブラシプレビュー、ピクセル完璧なトレース、スプライトの回転、タイルリングモード、輪郭&ポリゴンツール、ライブアニメーションプレビュー、パレットエディタ、など
  • Gamedev Tools: スプライトシートやテクスチャアトラスにアニメーションを保存。コマンドラインインターフェイス(CLI)を使用してアセットパイプラインにAsepriteを統合可能

Tips

Pixel-perfectについて  

Pixel-perfectを有効にすると、線を引いたときにギザギザがなくなります。

シームレステクスチャの作り方  

メインメニューから「View > Tiled Mode > Tiled in Both Axis」を選ぶとタイルモードになり、つなぎ目に違和感がないかどうかチェック・編集することができます。

テキストの挿入  

メインメニューから「Edit > Insert Text」でテキストを挿入できます。ただし環境によっては読み込めない・正しくレンダリングされないフォントがあるようです。なお日本語は入力できないので、クリップボード経由でコピペすると表示できます。

左右対称の編集  

メインメニューから「View > Synmmetry Options」を選ぶと、シンメトリーの編集モードを選択できるようになります。

ここから真ん中のボタンを選ぶと左右対称編集、右のボタンを選ぶと上下対称編集となります。なお、対称編集のボーダーラインはドラッグして移動させることもできます。

コマンド(シェル)から画像ファイルを変換したい  

実行ファイルの引数に「–batch」オプションをつけると、コマンド(シェル)から実行できます。

aseprite.exe --batch item.ase --save-as item.png

これは「item.ase」を「item.png」に出力するコマンドです。

MacOSX環境であれば以下のコマンドとなります。

/Applications/Aseprite.app/Contents/MacOS/aseprite --batch item.ase --save-as item.png

なお詳細は公式ドキュメントのCLIを参照します。

Pythonから変換する例  

以下はPythonでの実装例です

#! /usr/bin/env python
# -*- coding: utf-8 -*-

import os

def main():
	TOOL = "/Applications/Aseprite.app/Contents/MacOS/aseprite"

	cmd = TOOL + " --batch item.ase --save-as item.png"
	os.system(cmd)

if __name__ == '__main__':
	main()

よく使いそうなショートカットキー 

キー詳細
Space + 左ドラッグスクロール
Cmd + 左クリック全体を移動
Alt + 左クリックスポイト
Cmd + Z元に戻す
B鉛筆ツール
E消しゴムツール
G塗りつぶしツール
M範囲選択
Cmd + D範囲選択解除

メインメニューの機能  

メインメニューから選択可能な項目について記載しています。

ツールバー  

右端にあるツールバーの説明です

範囲選択(M)  

左クリック:領域選択 / 右クリック:選択範囲の減算

項目名ショートカットキー概要
矩形範囲選択M矩形で範囲選択を行うツール
円範囲選択Shift + M円で範囲選択を行うツール
投げ縄ツールQ自由な形状で範囲選択を行うツール
ポリゴン選択ツールShift + Q三角形の3点を指定して選択するツール
自動選択ツールW連続して存在する同じ色を自動で選択するツール

鉛筆(B)  

項目名ショートカットキー概要
鉛筆B
スプレーShift+B

消しゴム(E)  

項目名ショートカットキー概要
消しゴムEクリックしたピクセルを透過色で消去
スポイトIクリックしたピクセルの色を取得

ズーム(Z)  

項目名ショートカットキー概要
ズームZ左クリックで拡大 / 右クリックで縮小
ハンドHドラッグ移動で画面をスクロール

移動(V)  

バケツ(G)  

線(L)  

四角(U)  

塗りつぶし(D)  

項目名ショートカットキー概要
塗りつぶしD指定の範囲を塗りつぶす
塗りつぶし(ポリゴン)Shift+D三角形の3点指定して塗りつぶす

ブラー(R)  

メニュー一覧  

ショートカットキーは、Mac OS X 基準としています。

Fileカテゴリ  

ファイルの作成や読み込み、保存を行います。

項目名サブ項目概要ショートカットキー
Newファイルの新規作成Cmd + N
Openファイルを開くCmd + O
Open Recent履歴ファイル履歴からファイルを開く
Save上書き保存Cmd + S
Save As名前をつけて保存Cmd + Shift + S
Save Copy As名前をつけてコピー保存Cmd + Shift + C
Closeファイルを閉じるCmd + W
Close Allファイルをすべて閉じるCmd + Shift + W
Import Sprite SheetスプライトシートをインポートするCmd + I
Export Sprite SheetスプライトシートをエクスポートするCmd + E
Repeat Last Exportスプライトシートを再エクスポートするCmd + Shift + X
Exit終了Cmd + Q

Editカテゴリ  

画像の編集や色の変換を行います。

項目名サブ項目概要ショートカットキー
Undo取り消しCmd + Z
Redoやり直しCmd + Y
Cut切り取りCmd + X
CopyコピーCmd + C
Paste貼り付けCmd + V
Clear???Del
Rotate180180°回転
90 CW90°右回転
90 CCW90°左回転
Flip Horizontal水平方向に反転Shift + H
Flip Vertical垂直方向に反転Shift + V
Transform変形Cmd + T
New Brush新規ブラシCmd + B
Replace Color色の置き換えShift + R
Invert色の反転
FXConvolution Matrix様々な特殊効果F9
Color Curve色調補正Cmd + M
Despeckle (median filter)ノイズ除去
Insert Textテキストの挿入T
Toolsツール設定(タイルやグリッドの設定)C
Keyboard Shortcutsキーボードショートカットの設定Cmd + Alt + Shift + K
Preferences環境設定Cmd + ,

Spriteカテゴリ  

スプライトの設定や操作を行います。

項目名サブ項目概要ショートカットキー
Propertiesスプライト設定Cmd + P
Color ModeRGB ColorRBGカラーモード
Grayscaleグレースケールモード
Indexed (No Dithering)パレットカラー
Indexed (Ordered Dither)パレットカラー(???)
Duplicateスプライトを複製して別のビューで開く
Sprite Sizeスプライトサイズ変更
Canvas Sizeキャンバスサイズ変更
Rotate Canvas180キャンバスを180°回転
90 CWキャンバスを90°右回転
90 CCWキャンバスを90°左回転
Flip Canvas Horizontalキャンバスを水平方向に反転
Flip Canvas Verticalキャンバスを垂直方向に反転
Cropクロップ(選択範囲でリサイズ)
Trimトリム(余白を除去してリサイズ)

Sprite Sizeの設定について  

  • Pixels: Width / Height: 拡大縮小する幅と高さをピクセル数で指定
  • Percentage: Width / Height: 拡大縮小する幅と高さをパーセンテージで設定
  • Lock Ratio: チェックを入れると現在の画像サイズ比を固定する
  • Interpolation: 補完設定
    • Nearest-neighbor → ピクセル等倍で拡大縮小する。元のドット絵の雰囲気を残して拡大する場合はこちらを選ぶ
    • Bilinear → 線形補間で拡大縮小する。色の設定をインデックスカラー(パレット)にすると、パレット内の色でぼやけた感じに拡大縮小してくれます

Layerカテゴリ  

レイヤーに関する操作を行います。

項目名サブ項目概要ショートカットキー
Propertiesレイヤー設定Shift + P
Visibleレイヤー表示・非表示Shift + X
New Layerレイヤーを新規作成Shift + N
Remove Layerレイヤー削除
Background from Layerレイヤーを背景にする
Layer from Background背景をレイヤーにする
Duplicateレイヤーを複製
Merge Down下のレイヤーと結合
Flattenレイヤーを統合

Frameカテゴリ  

フレームに関する操作を行います。

項目名サブ項目概要ショートカットキー
Frame Propertiesフレーム設定P
Cel Propertiesセル設定
New Frameフレームの新規作成Alt + N
New Empty Frame空のフレームを新規作成Alt + B
Copy Cel in Next Frame次のフレームにセルをコピーAlt + M
Remove Frameフレームの削除Alt + C
TagsTag Propertiesタグの設定
New Tagタグの新規作成
Remove Tagタグの削除
Jump toFirst Frame最初のフレームに移動Home
Previous Frame1つ前のフレームに移動, (カンマ)
Next Frame次のフレームに移動. (ピリオド)
Last Frame最後のフレームに移動End
Go to Frame指定のフレームに移動Alt + G
Play Animationアニメーションの再生Enter
Constant Frame Rateアニメーション再生速度の設定
Reverse Framesフレームの逆転Alt + I

Selectカテゴリ  

選択領域の操作を行います。

項目名サブ項目概要ショートカットキー
All全選択Cmd + A
Deselect選択解除Cmd + D
Reselect再選択Cmd + Shift + D
Inverse選択範囲を反転Cmd + Shift + I
Color Rangeマスクカラーの設定
Load from MSK fileマスクファイルの読み込み
Save to MSK fileマスクファイルの保存

Viewカテゴリ  

ビューの表示や設定をします。

項目名サブ項目概要ショートカットキー
Duplicate Viewビューの複製
Show Pixel Gridピクセルのグリッド表示Alt + Shift + G
Show Gridグリッドの表示Shift + G
Snap to Gridスナップ有効・無効Shoft + S
Grid Settingsグリッド設定
Selection as Grid選択範囲からグリッドを設定
Tiled ModeNodeタイルモード無効
Tiled in Both Axisタイルモード(上下左右)
Tiled in X Axisタイルモード(左右)
Tiled in Y Axisタイルモード(上下)
Set Loop Sectionループ区間の設定F2
Show Onion Skinオニオンスキンを表示F3
Timelineタイムラインの表示Tab
Previewプレビューの表示F7
Fullscreen PreviewフルスクリーンでプレビューF8
HomeHomeビューの表示
Refresh & Reload Skinリフレッシュ&スキンのリロードF5

Helpカテゴリ  

ヘルプやバージョン情報の表示を行います。

項目名サブ項目概要ショートカットキー
Readmeリードミー表示
Quick Reference簡易リファレンス表示
Documentationドキュメント表示
Tutorialチュートリアル表示
Release Notesリリースノート表示
Twitter公式Twitterアカウント表示
Donate寄付する
Aboutバージョン情報表示