Aseprite
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 |
| Rotate | 180 | 180°回転 | - |
| 90 CW | 90°右回転 | - | |
| 90 CCW | 90°左回転 | - | |
| Flip Horizontal | - | 水平方向に反転 | Shift + H |
| Flip Vertical | - | 垂直方向に反転 | Shift + V |
| Transform | - | 変形 | Cmd + T |
| New Brush | - | 新規ブラシ | Cmd + B |
| Replace Color | - | 色の置き換え | Shift + R |
| Invert | - | 色の反転 | - |
| FX | Convolution 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 Mode | RGB Color | RBGカラーモード | - |
| Grayscale | グレースケールモード | - | |
| Indexed (No Dithering) | パレットカラー | - | |
| Indexed (Ordered Dither) | パレットカラー(???) | - | |
| Duplicate | - | スプライトを複製して別のビューで開く | - |
| Sprite Size | - | スプライトサイズ変更 | - |
| Canvas Size | - | キャンバスサイズ変更 | - |
| Rotate Canvas | 180 | キャンバスを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 |
| Tags | Tag Properties | タグの設定 | - |
| New Tag | タグの新規作成 | - | |
| Remove Tag | タグの削除 | - | |
| Jump to | First Frame | 最初のフレームに移動 | Home |
| Previous Frame | 1つ前のフレームに移動 | , | |
| 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 Mode | Node | タイルモード無効 | - |
| 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 |
| Home | - | Homeビューの表示 | - |
| Refresh & Reload Skin | - | リフレッシュ＆スキンのリロード | F5 |
Helpカテゴリ
ヘルプやバージョン情報の表示を行います。
| 項目名 | サブ項目 | 概要 | ショートカットキー |
| Readme | - | リードミー表示 | - |
| Quick Reference | - | 簡易リファレンス表示 | - |
| Documentation | - | ドキュメント表示 | - |
| Tutorial | - | チュートリアル表示 | - |
| Release Notes | - | リリースノート表示 | - |
| - | 公式Twitterアカウント表示 | - | |
| Donate | - | 寄付する | - |
| About | - | バージョン情報表示 | - |