【Aseprite】カラーモードの解説

この記事の目標と概要

この記事では、Asepriteのカラーモードについて、その概要と活用方法を解説します。

・Asepriteのカラーモードの概要について知りたい
・カラーモードの性質をどう活用していけばいいのか例を見たい

といった方向けの記事になります。

カラーモードは、新規スプライトを作成する際に真ん中のあたりにある三種類のボタンでカラーモードを選択できます。

スプライトの編集中でも、上部メニューから
[Sprite]->[Color Mode]->[RGB Color/Grayscale/Indexed]
の手順で選択することで現在開いているスプライトのカラーモードを変更することができます。

RGB(RGBA)カラーモードは、もっとも標準的な多色情報＋透明度でピクセルを表現するモードです。
アルファベットはそれぞれ赤(Red)/緑(Green)/青(Blue)の三色と透明度(Alpha)を意味します。

RGBAについてより詳しく知りたい方はこちらのサイトの説明が完結でわかりやすかったです。↓

もっとも標準的かつ特殊な挙動のないカラーモードであるため、後述のカラーモードを使いたい状況以外ではこちらを選択しておけば基本的に困ることはありません。

また、次に説明するIndexedカラーモードからこちらのRGBAカラーモードに変更することで、ピクセルとパレットの対応関係を断ち切った形にも変換可能です。(詳細は後述の説明を参照してください)

Grayscaleはピクセルを白と黒の2値のみで表現するカラーモードです。

白黒のみでドット絵を仕上げたい場合などはこちらを選択するのもいいかもしれません。

一言コメント

後述しますがカラーで書いたピクセルアートを二値化することは簡単にできるので筆者は白黒以外で使わないことが確定していない限りカラーで書き始めてしまうことが多いです。

ほかのモードで記述したスプライトでも、Grayscaleカラーモードに変更を行うことで、以下のように白黒のみでの表現に簡単に変換することができます。

変更前：

変更後：

Indexedカラーオプションは、パレットに存在する色と描画されているピクセルの位置関係を対応付けて管理するカラーモードです。

イメージとしては、「キャンバスに対して位置情報を塗っていく」ものになります。

したがって、キャンバスに対して塗られた部分と対応するパレットの色が変更されると、その部分の色も自動的に変更される形となります。(以下の図参照)

描画情報とパレットカラーの対応付けは「パレットの何番目」といった認識で行われています。
そのため、パレットカラー掛けされればその部分は描画されない透明な状態なりますが、再び色を追加・編集するとその位置情報はまだ残っているため適用される形になります。（以下図参照）

Indexedカラーモードはその性質上*、ソート機能の活用による様々な色の編集が実現できます。

一言コメント

ソート機能についてはこちらの記事で解説しています。

Indexedカラーモードでは、単純にソートを行うだけでキャンバスに描画された色が影響を受けることになります。
これを利用してパレットカラーをソートすることで以下のように描画内容を反転させるような応用が可能です↓

ソートメニューの[Reverse Colors]を行うとパレットの色が反転する＝キャンバスに描画されているイラストの色も反転することができます。(仕組みはソートと同じ)

Indexモードは色との対応関係で様々な処理を実現できる一方で、その性質上予期しない挙動を生んでしまうこともあります。
本項ではそれらの注意点と対処方法について説明していきます。

このようなソートによる影響を出したくないときはカラーモードをRGBなどに変更することで対応することができます。
カラーモード変更方法： [Sprite]->[Color Mode]->[RGB Color/Grayscale/Indexed]

「New palette from Sprite（使用されている色でパレットを整理）」によって色を整理するとパレットに設定された部分の位置が変わり、結果としてキャンバスの描画ピクセルが透明になってしまうことがあります。

このような時は、パレット下に「Remap Palette」というボタンが表示されているため、クリックすることで“色情報から”インデックスを修正してくれます。(＝見た目を変えずにパレットとの対応関係を整理できる)