Aseprite の変更点
* Aseprite [#aca2d4b0]
#ref(logo.png);
** Asepriteとは [#r17c03a0]
Windows & Mac OS X & Linux(Ubuntu) で動作する、スプライトアニメーション・ドット絵のエディタ
** 公式サイト [#p39892fb]
- http://www.aseprite.org
** 特徴 [#m2231e18]
- Animation Tools: レイヤー、フレーム、オニオンスキン、連続したフレームの赤/青の色合い、ピンポン再生、リピート範囲を指定した再生、など
- Pixel-art Tools: ブラシプレビュー、ピクセル完璧なトレース、スプライトの回転、タイルリングモード、輪郭＆ポリゴンツール、ライブアニメーションプレビュー、パレットエディタ、など
- Gamedev Tools: スプライトシートやテクスチャアトラスにアニメーションを保存。コマンドラインインターフェイス（CLI）を使用してアセットパイプラインにAsepriteを統合可能
----
■目次
#contents
----
* Tips [#j996852b]
** Pixel-perfectについて [#tea828f3]
Pixel-perfectを有効にすると、線を引いたときにギザギザがなくなります。
#ref(pixel-perfect.png);
** シームレステクスチャの作り方 [#ue07e96f]
メインメニューから「View > Tiled Mode > Tiled in Both Axis」を選ぶとタイルモードになり、つなぎ目に違和感がないかどうかチェック・編集することができます。
#ref(tiledmode.png);
** テキストの挿入 [#l002afe2]
メインメニューから「Edit > Insert Text」でテキストを挿入できます。ただし環境によっては読み込めない・正しくレンダリングされないフォントがあるようです。なお日本語は入力できないので、クリップボード経由でコピペすると表示できます。
#ref(text.png);
** 左右対称の編集 [#z655adaa]
メインメニューから「View > Synmmetry Options」を選ぶと、シンメトリーの編集モードを選択できるようになります。
#ref(symmetry.png);
ここから真ん中のボタンを選ぶと左右対称編集、右のボタンを選ぶと上下対称編集となります。なお、対称編集のボーダーラインはドラッグして移動させることもできます。
** コマンド(シェル)から画像ファイルを変換したい [#ue2566f6]
実行ファイルの引数に「--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>http://www.aseprite.org/cli/]]を参照します。
*** Pythonから変換する例 [#x245f1ef]
以下はPythonでの実装例です
#geshi(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()
}}
* よく使いそうなショートカットキー [#afb1b9f5]
- Space + 左ドラッグ: スクロール
- Cmd + 左クリック: 全体を移動
- Alt + 左クリック: スポイト
- Cmd + Z: 元に戻す
- B: 鉛筆ツール
- E: 消しゴムツール
- G: 塗りつぶしツール
- M: 範囲選択
- Cmd + D: 範囲選択解除
,''キー'',''詳細''
,Space + 左ドラッグ,スクロール
,Cmd + 左クリック,全体を移動
,Alt + 左クリック,スポイト
,Cmd + Z,元に戻す
,B,鉛筆ツール
,E,消しゴムツール
,G,塗りつぶしツール
,M,範囲選択
,Cmd + D,範囲選択解除
* メインメニューの機能 [#h413e024]
メインメニューから選択可能な項目について記載しています。
** ツールバー [#l841b8c4]
右端にあるツールバーの説明です
#ref(toolbar.png);
*** 範囲選択(M) [#ta8d547d]
左クリック:領域選択 / 右クリック:選択範囲の減算
|''項目名''|''ショートカットキー''|''概要''|
|矩形範囲選択|M|矩形で範囲選択を行うツール|
|円範囲選択|Shift + M|円で範囲選択を行うツール|
|投げ縄ツール|Q|自由な形状で範囲選択を行うツール|
|ポリゴン選択ツール|Shift + Q|三角形の3点を指定して選択するツール|
|自動選択ツール|W|連続して存在する同じ色を自動で選択するツール|
*** 鉛筆(B) [#peddec66]
|''項目名''|''ショートカットキー''|''概要''|
|鉛筆|B||
|スプレー|Shift+B||
*** 消しゴム(E) [#q5bf8843]
|''項目名''|''ショートカットキー''|''概要''|
|消しゴム|E|クリックしたピクセルを透過色で消去|
|スポイト|I|クリックしたピクセルの色を取得|
*** ズーム(Z) [#o1f7281c]
|''項目名''|''ショートカットキー''|''概要''|
|ズーム|Z|左クリックで拡大 / 右クリックで縮小|
|ハンド|H|ドラッグ移動で画面をスクロール|
*** 移動(V) [#febb9cde]
*** バケツ(G) [#gfe69184]
*** 線(L) [#e9fd7a01]
*** 四角(U) [#s32e561b]
*** 塗りつぶし(D) [#mbc8e21d]
|''項目名''|''ショートカットキー''|''概要''|
|塗りつぶし|D|指定の範囲を塗りつぶす|
|塗りつぶし(ポリゴン)|Shift+D|三角形の3点指定して塗りつぶす|
*** ブラー(R) [#g5785f95]
** メニュー一覧 [#ebb543c0]
ショートカットキーは、Mac OS X 基準としています。
*** Fileカテゴリ [#sc6c7904]
ファイルの作成や読み込み、保存を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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カテゴリ [#cdc7429a]
画像の編集や色の変換を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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カテゴリ [#l7491577]
スプライトの設定や操作を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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の設定について [#g3e4020c]
- Pixels: Width / Height: 拡大縮小する幅と高さをピクセル数で指定
- Percentage: Width / Height: 拡大縮小する幅と高さをパーセンテージで設定
- Lock Ratio: チェックを入れると現在の画像サイズ比を固定する
- Interpolation: 補完設定
-- Nearest-neighbor → ピクセル等倍で拡大縮小する。元のドット絵の雰囲気を残して拡大する場合はこちらを選ぶ
-- Bilinear → 線形補間で拡大縮小する。色の設定をインデックスカラー（パレット）にすると、パレット内の色でぼやけた感じに拡大縮小してくれます
#ref(scale.png);
***Layerカテゴリ [#l6ae7830]
レイヤーに関する操作を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| Properties|-|レイヤー設定|Shift + P|
| Visible|-|レイヤー表示・非表示|Shift + X|
| New Layer|-|レイヤーを新規作成|Shift + N|
| Remove Layer|-|レイヤー削除|-|
| Background from Layer|-|レイヤーを背景にする|-|
| Layer from Background|-|背景をレイヤーにする|-|
| Duplicate|-|レイヤーを複製|-|
| Merge Down|-|下のレイヤーと結合|-|
| Flatten|-|レイヤーを統合|-|
***Frameカテゴリ [#k6c73e06]
フレームに関する操作を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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カテゴリ [#c5b14a3a]
選択領域の操作を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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カテゴリ [#tb2a5c88]
ビューの表示や設定をします。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| 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カテゴリ [#o97082a3]
ヘルプやバージョン情報の表示を行います。
| ''項目名'' | ''サブ項目'' | ''概要'' | ''ショートカットキー'' |
| Readme|-|リードミー表示|-|
| Quick Reference|-|簡易リファレンス表示|-|
| Documentation|-|ドキュメント表示|-|
| Tutorial|-|チュートリアル表示|-|
| Release Notes|-|リリースノート表示|-|
| Twitter|-|公式Twitterアカウント表示|-|
| Donate|-|寄付する|-|
| About|-|バージョン情報表示|-|