BioErrorLog Tech Blog

試行錯誤の記録

Asepriteで減色する

Asepriteで減色する方法を整理します。

はじめに

Asepriteで、↓のように滑らかな画像を、

減色前の元画像 (Blenderで作ってインポートしたもの)

↓のように減色する方法をまとめます。

減色処理した後の画像

The English translation of this post is here.

Asepriteで減色する

次の手順で減色します。

  1. "Color Mode"を"Indexed"に変更する
  2. 新規パレットを作成し、使用する色数を指定する

1. "Color Mode"を"Indexed"に変更する

Aseprite上タブから、

"Sprite" > "Color Mode" > "Indexed"

を選択し、Indexed Color Modeに変更します。

"Color Mode"を"Indexed"に変更する

Color ModeをIndexedに変更した時点でまず、使われる色の数が256色に減色されます。

Indexed Color Modeに変更し、使われる色の数が256色に変更された

Indexed Color Modeとは、パレットの各色が番号(Index)で管理されるモードです。 そのため後からパレットの色を変えると、元々そのパレットで塗っていた部分も同様に色が変わります。

Indexedモードでは、パレットの色を変えると元々塗っていた部分も変わる | 画像はAseprite公式ドキュメントより引用

このIndexedモードで管理できるパレットの数の上限が256個であるため、Indexedモードに切り替えた時点でまず自動的に色数が256色に変更される、というわけです。

もしこの挙動が不本意な場合は、減色作業が全て終わった後に再び元のRGB Colorモードに戻すと良いでしょう。

"Sprite" > "Color Mode" > "RGB Color"

からRGB Colorモードに設定できます。

2. 新規パレットを作成し、使用する色数を指定する

Indexed Color Modeに変更したら、新規パレットを作成して色数を指定します。

新規パレットを作成するには、パレット上のハンバーガーメニューをクリックし、"New Palette from Sprite"を選択します。

"New Palette from Sprite"から新規パレットを作成

ポップアップ表示されるウィンドウで、使用したい色数を指定します。

色数を指定する

"OK"をクリックすると、一旦下記のような不思議な状態になります。 ここでパレット下にある"Remap Palette"ボタンを押すと、色数の変更が反映されます

パレット下にある"Remap Palette"ボタンを押す

色数の変更が反映された

以上、ここまでの減色過程をまとめます:

減色の過程ふりかえり

おわりに

今回はAsepriteで減色する方法をまとめました。

写真などの高解像画像をただ減色したものと、いわゆるドット絵とは全く異なるものだと思っていますが、参考資料などで使えるタイミングはあるのではないでしょうか。

この記事がどなたかの参考になれば幸いです。

[関連記事]

www.bioerrorlog.work

参考