【Aseprite】データの取り扱い(インポート/エクスポート)

この記事の目標

この記事では、Asepriteでの各種データのインポート/エクスポート(＝保存/読み込み)の方法について解説していきます。

この記事でわかること：

• アニメーション情報を含むAsepriteデータの保存：スプライト形式
• スプライト形式ファイルの読み込み方法、セル分割
• ガイド用背景画像の読み込み、透過表示方法

データのエクスポート(保存)

まずは作成したスプライトデータの保存の仕方について解説していきます。

エクスポート時のポイント(共通)

はじめに、出力時に共通するポイントをまとめておきます。

ポイント	説明
エクスポート時の表示レイヤー	出力時のレイヤー表示状況は出力結果に反映されます。 （＝不要なレイヤーは非表示にすることで除外して出力可能）
解像度(サイズ)の調整	1. Sprite->Seprite Size  2. Percentageタブで比率を変更して調整(PixelsでもOK) (ドット絵をWebアップロード用に拡大する場合などに使います)

スプライトシートの出力(ゲーム用)

手順	イメージ
1. File->Export Sprite Sheetを選択 【ショートカット：Ctrl+E】
2. 展開した出力ウィンドウで各項目を設定 　＜設定のポイント＞ 　　・Sheet Type：スプライトの並び方の設定。 　　　→基本ByRowsでOK 　　・Widthの「Best fit for texture」にチェック 　　　→2のべき乗で幅調整してくれる（必要であれば) 　　・[Open generated sprite sheet]： 　　　出力完了時に、スプライト画像を表示する（確認できる）
3. [Output File]にチェックを入れ、保存場所/ファイル名を指定	〃
4. ［Export］ボタンを押下して完了 ＊[Open generated sprite sheet]が有効な場合、 　生成されたスプライトを確認できます(右画像)

Gifファイルでのエクスポート

手順	イメージ
1. メニューバー：File->Save As.. をクリック【Ctrl+Shift+S】
2. 画面下のFile typeから「gif files」を選択してOKボタンを押下
3. gifではレイヤー情報が保持されない旨の警告は無視でOK
4. オプションを設定してOKを押下 〈項目説明〉 　・Interlaced: 　　インターレースGIFの設定。基本無しでOK  　・Animation Loop: 　　ループアニメーションさせたい場合はチェック
5. 完了すると、右画像のようなgifアニメが出力されます

データのインポート(読み込み)

本項ではAsepriteで作成したデータ、あるいはほかソフトなどで用意したデータをAsepriteに取り込む際のやり方について説明していきます。

スプライトシートの読み込み(インポート)

手順	イメージ
1. エディタにドラッグアンドドロップでスプライトシートを開く 　(以下のようにAsepriteエディタに表示されていればOK)
2. File->Import Sprite Sheet 【Ctrl+I】
3. シートに合った縦横幅、タイプの設定を行い、 　 Importボタンをクリック
4. 区切りによっては空白フレームが発生するため、適宜削除して完了 　＊この場合レイヤ構造は含まれないため注意

参考資料(写真など)の読み込み:リファレンスレイヤー

手順	イメージ
1. Layer -> Add Reference Layer 2. 取り込みたい見本画像を選択
補足：リファレンスレイヤーの透過 1. 対象のレイヤ名をダブルクリックで[Layer Properties]を開く 2. パラメータ[Opacity]の値を変更で透過度を調整

参考情報