Aseprite ver1.2 betaのスキンの作り方と変更方法 (仮)

この記事では、Aseprite ver1.2 beta10から追加されたExtensionという機能を利用してTheme(Asepriteのスキン)を変更する方法を紹介します。



1.素材の用意

まずAsepriteのインストールフォルダを開いてください。
その中のdataというフォルダの中にあるextensionsというフォルダを開いてください。
extensionsの中にaseprite-themeというフォルダが入っているはずです。これを任意の場所にコピーしてください。
コピーしたaseprite-themeの中のsheet.png、theme.xml、package.jsonを編集してThemeを作っていきます。

2.sheet.pngを編集する

sheet.pngを編集することでAsepriteのツールのアイコン、タブやメニューの外枠などを変更することができます。
画像のどこをいじればエディタのどこの見た目が変わるかは、Asepriteを使っている人なら大体わかると思います。余裕があれば、後日詳しい説明を載せたいと思います。


3.theme.xmlを編集する

Theme の大部分の配色はtheme.xmlから指定されています。詳しい説明は後で追加します。


4.package.jsonを編集する

packege.jsonには Theme や製作者の情報が入っています。これを書き換えてAsepriteにExtensionとしてThemeを追加できるようにしましょう。

package.jsonの中身はこんな感じです。

{
  "name": "Extension の名前",
  "displayName": "Extensionの表示名",
  "description": "Extensionの説明",
  "version": "Extension のバージョン",
  "author": { "name": "name": "Extensionの製作者", "email": "xxx@xxx.xx", "url": "http://xxx.xx/" },
  "contributors": [
    { "name": "支援者", "url": "http://xxx.xx/" }
  ],
  "publisher": "発行者",
  "license": "権利表記",
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      { "id": "Themeの名前", "path": "." }
    ]
  }
}

とりあえず作ったThemeを公開しないなら、2行目のExtensionの名前、3行目のExtensionの表示名、17行目のThemeの名前だけを変更すれば大丈夫です。
配布したい人は既に誰かが公開しているThemeを参考にしたりして上手いことやってください。


5.AsepriteにThemeをExtensionとして追加する

各種ファイルを編集し終えたらそれらを1つのフォルダにまとめて、zipに圧縮してください。フォルダと zip ファイルの名前はなんでもいいです。
Asepriteを起動して、メニューから Edit → Preferences → Extensions を開いて、Add Extensionから先ほど作った zip ファイルを開いて下さい。
Edit → Preferences → Theme を開いてください。
AsepriteにインストールされているThemeの一覧が表示されます。変更したいThemeを選択してから Select をクリックしてください。
Asepriteを再起動すると選択したThemeが適用されます。