ピクセルキャラクターのアニメーションをGIFとして書き出す際の色ずれを防ぐ方法

GIFは、最大256色を格納できるカラーテーブルを使ってピクセルの色を保存します。グローバルテーブルと、個々の画像に関連付けられたローカルテーブルをサポートしているため、アニメーション全体で必ずしも256色に制限されるわけではありません。ただし、エンコードされた各画像で使用できるアクティブなテーブルの色数には上限があります。これらの規則は、元のGIF89a仕様に定められています。

選択した書き出しパレットで元データの色を表現できない場合、書き出し側はその色を利用可能なエントリーに割り当てる必要があります。Asepriteは、色数が多すぎるRGBスプライト、レイヤーのブレンド、ぼかし領域、グローを、GIFの色が変化する原因になり得るものとして具体的に挙げています。実用的な推奨事項として、RGBスプライトでは色数を256未満にするか、Indexedモードで直接作業することを示しています。AsepriteによるGIF書き出し時の色変化の説明を参照してください。

カラーパネルに表示されるパレットの色数が少なくても、アートワークで使われている色がその範囲内だとは限りません。AsepriteのRGBモードでは、表示中のパレットにない色をピクセルに使うことができます。Indexedモードでは、描画に使う色がパレットのエントリーに制限されます。この違いについてはカラーバーとパレットで説明されています。

書き出し設定を変更する前に、アニメーションの書き出し用コピーを別に保存します。基準にする色をいくつか選びましょう。メインの塗り色、最も暗い輪郭線、ハイライト、後半のフレームにだけ現れるアクセント色などです。

次の手順で原因を調べます。これは、文書化された挙動をもとにしたトラブルシューティングの出発点であり、見た目だけで原因を断定するものではありません。

観察された現象	最初に確認する項目	有効な比較方法
ベタ塗りのRGB値が書き出し後に変わる	パレットの選択と色数の削減	書き出し前後で不透明な内側のピクセルをサンプリングする
ポーズごとに色が変わる	全フレームの色がパレットに含まれているか	複数のポーズで、同じ塗り色として意図した色を比較する
輪郭だけに薄い、または暗い縁取りが出る	半透明とマットの設定	明るい背景と暗い背景の両方でプレビューする
アプリによってGIFの見た目が異なる	カラープロファイルの解釈と表示設定	GIFを元のエディターで開き直し、値を比較する
ベタ塗りの領域に新しい点が現れる	書き出し時のディザリング	ディザリングを無効にして別のコピーを書き出す

キャラクターが動いた後の同じキャンバス座標にある無関係なピクセル同士ではなく、同等に描画されたフレーム同士を比較してください。見た目を判断するときは、背景とズームを一定に保ちます。RGB値が変わったのか、見た目が変わったのか、またはその両方なのかを記録しましょう。この違いによって次の手順が決まります。

一貫した色を基調とするキャラクターには、すべてのポーズを網羅する、意図的に作った1つのパレットを使います。表情の変化、アクセサリーのハイライト、裏側の色の違いなど、動きによって初めて現れる色も含めましょう。冒頭のフレームだけをもとに作ったパレットでは、それらが漏れることがあります。

これはワークフロー上の推奨であり、すべてのGIFにグローバルパレットが必要というわけではありません。フォーマット上、ローカルパレットも有効です。共有パレットを使う利点は、定義された色の集合を1つ確認するだけで、すべてのフレームがそのパレットに収まるかを確かめられることです。

Asepriteでは、書き出し用コピーをIndexedに変換する前に、RGBモードでアートワークを確認してください。Indexedのピクセルはパレットのエントリーを参照するため、エントリーを編集すると、それを参照するすべてのピクセルの色が変わります。透明なレイヤーには、指定された透明インデックスも必要です。一般的にはインデックス0を使います。Asepriteのカラーモードのドキュメントを参照してください。

1つの共有テーブルを使う透過GIFでは、不透明色を255色以下に抑え、さらに透明用のエントリーを1つ確保します。これは、テーブルに格納できるエントリーが256個であることと、GIFが透明度にパレットインデックスを使うことによる制約です。不透明なアニメーションなら、目に見える色に256個すべてのエントリーを使えます。GIF89aのカラーテーブルと透明度の定義を参照してください。

例として、アニメーション全体で不透明色を24色使うとします。透明用のエントリーを加えると25個なので、パレットの容量は足ります。ただし、書き出し時に正確にその24色が選ばれたことを意味するわけではありません。できあがったテーブルを確認し、基準にしたピクセルをサンプリングしてください。ハイライトが抜けていたら、再度変換する前にパレットを修正します。

カラープロファイルは、RGB値の解釈方法を定めます。Asepriteのドキュメントでは、インターネット画像で一般的に使われる色空間としてsRGBを挙げ、色管理の設定を「編集」>「環境設定」>「カラー」に示しています。一般的なウェブ表示向けのアニメーションなら、書き出し用コピーをsRGBで準備するのが実用的な出発点です。Asepriteのカラープロファイルのドキュメントを参照してください。

元データが別の既知のプロファイルを使っている場合は、「変換」と「割り当て」を区別しましょう。Asepriteの「スプライト」>「プロパティ」ダイアログで「割り当て」を使うと、ピクセル値はそのままで解釈方法が変わります。「変換」では、変換で可能な限り見た目を保つように、色空間間でピクセル値が調整されます。この2つの操作についてはスプライトのプロパティで説明されています。

必要なプロファイル変換は、書き出し用パレットを確定する前に行い、その後で基準色を改めてサンプリングします。そうしないと、RGB値の意図的な変換を、後続のGIF書き出しエラーと誤認する可能性があります。元のプロファイルが不明な場合は、異なるプロファイルを何度も割り当てる前に、元のアートワークがどのように解釈される想定だったのかを確認してください。

GIFの透明度は、該当するピクセルで表示画面を変化させないパレットインデックスを指定する仕組みです。ピクセルごとの独立したアルファ値の範囲を保存するものではありません。そのため、半透明のキャラクターの縁は、書き出し時に明確な方針を決める必要があります。基本的な挙動はGIF89a仕様で定義されています。

輪郭がくっきりしたピクセルアートでは、書き出し用コピーで輪郭を確認し、意図しない半透明を取り除きます。意図した輪郭のピクセルは完全に不透明にし、空白のピクセルは完全に透明にします。そうすることで、輪郭を変換時の判断に委ねず、描画の一部として意図的に定められます。

キャラクターに意図的なソフトエッジを使う場合は、書き出し前に背景の扱いを決めましょう。Adobeの説明によると、マット設定は半透明ピクセルを指定した色とブレンドします。マットの色を既知の単色背景に合わせると、その背景に対して縁をなじませられます。ある背景に合わせて作ったマットは、別の背景では見えることがあります。Adobe Animateの透明度とマットに関するガイダンスを参照してください。

書き出した輪郭を明るい背景と暗い背景の両方でプレビューします。内側の色は一致しているのに縁取りが目立って変わる場合は、ボディのパレットを作り直す前に不透明度とマットの設定を見直してください。

ベタ塗りのピクセルアートでは、まず書き出し時のディザリングを無効にします。Adobeによると、ディザリングは利用できない色を擬似的に表現するもので、主に単色で構成された画像は、無効にしたほうがうまくいく場合があります。グラデーションには別の妥協点が必要なことがあります。また、Web Snapの設定があれば無効にします。この機能は、色をウェブセーフパレットの近似色へ意図的にずらします。Adobe AnimateのGIF最適化オプションを参照してください。

これは出発点となる設定として扱い、結果を確認してください。ディザリングを無効にした結果、大きな色置換のパッチが現れた場合は、ずれを覆うパターンをすぐに追加するのではなく、パレットで必要な色が網羅されているかを修正します。自分で描いたピクセルのテクスチャと、変換時に追加されるディザリングは分けて考えましょう。

書き出し側に正確な色を保護する機能がある場合は、適用条件を確認します。Photoshopの説明にあるpreserveExactColorsオプションは、カラーテーブルにすでに含まれる色を誤差拡散ディザリングから保護します。テーブルにない色を追加する機能ではありません。AdobeのGIF保存オプションのリファレンスを参照してください。

書き出した後、GIFを新しいドキュメントとして開きます。書き出しダイアログのプレビューだけに頼らないでください。Asepriteのドキュメントでは、GIFを開いて各フレームをPNGシーケンスとして保存する方法が紹介されており、個々のフレームを確認する別の手段になります。Aseprite FAQを参照してください。

最終確認には、次の手順を使います。

1. 準備した書き出し用コピーと、開き直したGIFの基準色を比較する。
2. 冒頭のポーズにない色を含むフレームをすべて確認する。
3. 不透明な内側のピクセルと透明な輪郭を分けて確認する。
4. ループ全体を再生し、塗り色やハイライトに意図しない変化がないかを見る。
5. GIFを実際に表示するサイズと、想定する背景でプレビューする。

不透明な塗りのRGB値が違う場合は、パレットへの割り当てかプロファイル変換を見直します。値は一致しているのにアプリによって見た目が異なる場合は、塗り直す前に表示時の解釈を調べてください。どの調整が効果をもたらしたかを特定できるよう、テスト書き出しごとに変更する設定は1つにします。

編集可能なマスター、準備した書き出し用コピー、最終GIFは別々に保管します。再現可能な書き出し工程は、元データの色を把握し、パレットと透明度の扱いを明確に決め、最後にファイルを開き直して比較するところから始まります。そうすることで、キャラクターの意図した見た目を保ち、残った妥協点を特定する具体的な方法が得られます。

• GIF89a仕様 — CompuServe（W3Cホスト）
• よくある質問 — Aseprite
• カラーバーとパレット — Aseprite
• カラーモード — Aseprite
• カラープロファイル — Aseprite
• スプライトのプロパティ — Aseprite
• 画像とアニメーションGIFの書き出しオプション — Adobe Animate
• GIF保存オプション — Adobe Photoshop開発者向けドキュメント