本文へスキップ

スプライトのパレットスワップ · ランプの色替えとチームカラー

ここでの色替えはすべてパレット変換です。ピクセルはパレット番号を保つので、同じ色を使っていた2フレームは同じ色のまま、最も暗い色は最も暗いままです。

パレットスワップは、陰影のランプの各色を別のランプの同じ位置の段へ置き換えてスプライトの色を変えます。マントの最も暗い赤は最も暗い青に、ハイライトはハイライトになり、ほかは変わりません。ピクセルラボの色替えの工程で元の色を選び、基準色1つから目標ランプを作るか自分で選んで、全フレームに適用します。チームの色違い(赤・青・緑・黄、または任意の#RRGGBB)は、色違いごとのフォルダーと.gplが入ったZIP1つで書き出します。

スプライトのフレーム(PNG)をドロップ。複数フレームでひとつのパレットを共有します
ピクセルラボを開く
ブラウザ内で処理し、ファイルはアップロードされません。
ピクセルラボ:抽出した1つのパレットに固定したCC0スプライトのフレームと色ごとのピクセルの割合
CC0アセット(OpenGameArt)を開いた実際のピクセルラボ画面です。
出力
  • PNG frames測定確認· Pillow
  • Palette測定確認· re-import
  • pixel-lab.json未検証

最も近い色ではなく、ランプ内の位置で置き換える

色ごとに新しいパレットで最も近い色へ置き換えると、陰影が崩れます。隣り合う赤の2段が同じ青になったり、明るい赤が影よりも暗い青になったりします。ラボは選んだ元の色をOklabの明度で並べ、位置で目標ランプに対応づけます。最初の色は目標の最も暗い色、最後の色は最も明るい色になり、順番が逆転することはありません。

目標ランプは基準色1つから作れます。元のランプの明度の段差はそのまま、基準色の色相と彩度だけを使い(基準色そのものの明度は使わない)、中間調の彩度を上げ、ランプに沿って色相を最大12°、暗い端と明るい端で逆向きに回します。結果は調整のための出発点で、完成したアートの判断ではありません。

色替えはすべてパレットの変換です。ピクセルはパレット番号を保ち、番号の裏の色だけが変わります。同じ陰影を使っていた2フレームは同じ陰影のままなので、スワップによってフレーム間にちらつきや飛んだ色が生じることはありません。

ランプの置き換え
選んだ元の色を、暗い順から明るい順の位置で目標ランプに対応づけること。
チームの色違い
チームやプレイヤーごとに基準色を変えて、同じスプライトを色替えしたもの。
色相範囲
中心 ± 角度で決める色相の区間。範囲内の色は自分の明度を保って置き換わる。
状態の色味
すべての色を1つの色相へ寄せるレシピ(凍結、毒、炎上、ゴースト、被弾フラッシュ)。

例:赤いマントのランプをチームの青に

ラボの関数で計算した値です(L = Oklabの明度、h = 色相)。

元(赤いマント)     #5a1e28 L0.33 h13 | #a02c3a L0.48 h18 | #dc5a50 L0.63 h27 | #f5a08c L0.79 h34
基準:チームの青     #3467d6(L0.54は無視、色相263°と彩度0.18を使用)
作られたランプ       #002d8c L0.35 | #004ed5 L0.48 | #4f7bff L0.62 | #99acff L0.76
ランプに沿った色相   262° → 262° → 267° → 273°
位置で対応           最も暗い→最も暗い … 最も明るい→最も明るい、黒と白はそのまま
3色を5段のランプへ:位置0、0.5、1 → 段0、2、4
テスト:色違い4つ × 8フレーム = PNG 32枚、選んだ3枠だけが変わり13枠はバイト一致

作られた明度は元と0.03以内で一致します。最も明るい青が少し低いのは、sRGBがその青を最大の彩度で表せないためです。ハイライトがくすんで見えるなら手で少し上げてください。

できること

  • ランプ置き換え:選んだ元の色を、最も近い色ではなく明度順の位置で目標ランプに対応。
  • 基準色1つから自動でランプを作成し、元のランプの明度段階を保持。
  • チームカラー一括:N個の色違い(赤・青・緑…任意の#RRGGBB)を、色違いごとのフォルダーと.gpl入りのZIP1つで書き出し。
  • 色相範囲の置き換えと状態プリセット(凍結・毒・炎上・ゴースト・被弾フラッシュ)。プリセットはレシピとして表示。

使い方

  1. フレームをドロップ。
  2. パレットで変えたいランプの色を選ぶ。
  3. ランプ・基準色・色相範囲・状態プリセットを選んでプレビュー。
  4. 適用するか、チームの色違いを書き出し。

スワップを確認する

  • 適用する前に、元と目標の見本を並べて見ます。どちらの列も暗い色から明るい色へ続くはずです。
  • フレームを送ります。どのフレームでも選んだ色だけが変わり、縁取り・肌・目はそのままのはずです。
  • 色違い1つの.gplを開きます。触れていない枠は元の色が元の順で並ぶはずです。
  • 色違いを等倍で並べます。拡大時だけでなく、ゲームの大きさでチームを見分けられるはずです。

トラブルシューティング

症状考えられる原因確認方法対処
陰影が逆転した・平板になったランプ以外の色(縁取り、肌)も一緒に選んでいる選んだ見本が暗い順から明るい順の1列になっていないランプの色だけを選ぶ。クリックの順は関係なく、明度が順番を決める
ほかの部分の色まで変わったマントがスプライトの別の部分とパレットの枠を共有しているその見本を選び、ピクセル数をマントだけの面積と比べると、ほかの部分でも使われている先にその部分へ別の色を割り当ててから(例:Studioのピクセル作業画面)スワップ
チームの色が選んだ基準色よりずっと暗い・明るい作られたランプは元の明度の段差を保ち、基準色からは色相と彩度だけを使う基準の見本と作られたランプの中央を比べる目標ランプを手で選ぶか、欲しい色相の基準を選んで段を調整
色相範囲が拾いすぎる・何も拾わない範囲(± 角度)が広すぎるか狭すぎ、灰色に近い色は無視されるプレビューで該当する色にチェックが付く範囲を狭める・広げる。灰色はランプの置き換えで

ほかの方法

方法こんなときに向いています
Studioのピクセル作業画面のチームカラーレイヤーとタグのあるスプライトなら。色違いは全フレーム・全レイヤーに適用され、それぞれ新しいスプライトになり、インデックスのスプライトならパレットを1回直すだけで全フレームが変わります。パレットエディタを参照。
許容範囲つきの単色スワップ1色だけを陰影オフセット付きで置き換えれば済むなら:パレットスワップ。
Aseprite:Edit › Replace ColorAsepriteで作業していて、色を1つずつ許容範囲付きで、選択範囲か全セルで置き換えるとき。

出力ファイルと検証方法

「測定確認」は、ダウンロードしたファイルをページ外(Pillow・numpy・独立したパーサー)で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。

書き出し先ファイル検証
PNG framesanim_N.png · 1×–8× nearest測定確認 Pillow書き出したPNGを読み直し、すべての色が固定パレット内にあることを確認。
Palette.gpl · .hex (Lospec) · .json測定確認 re-import各形式を書き出してUIで読み戻し、16 → 16色を確認。
pixel-lab.jsongeneric frames + palette未検証汎用JSONで、どのエンジンでも読み込んでいません。

検証の根拠

アンチエイリアスのかかった8フレーム → 16色パレット1つ、パレット外の色0。ディザーなしとBayer 4×4の両方で変化のない領域が全8フレームで同一。アンチエイリアス除去で271色 → 16色、シルエットの移動0ピクセル。整数倍率・オフセット・2.5倍の非整数倍率を正確に検出。

制限

  • 色違いはPNGフレームと.gplで書き出し、.asepriteではありません。
  • 読み込んだ全フレームに1つのパレットを使います。無関係なキャラ2体が入ったシートは先に分けてください。
  • 状態のプリセットはレシピで、描き起こしたアートではありません。
  • 4096 × 4096より大きいフレームは受け付けません。すべての処理がメインスレッドで動き、まだキャンセルボタンがありません。
  • スプライトシートは1枚の画像として扱います。先にフレームに分割してください(スプライトシート分割)。
  • ディザーを有効にすると、クリーンアップの件数にディザーのピクセルが含まれます。先にディザーを「なし」にしてください。
  • 書き出すJSONは汎用形式で、Godot・Unityへの読み込みは試していません。

バージョンと出典

Nerulio:docs/PIXEL-LAB.md(Chromium。チームの色違い4つ × 8フレームを4フォルダーのPNG 32枚で書き出し、それぞれ選んだパレット3枠だけが変わり残り13枠はバイト一致)。上のランプはsrc/game/palette.jsで計算しました。AsepriteのReplace Colorの説明は公式ドキュメントに基づきます。

参照した公式ドキュメント

よくある質問

フレーム間の陰影は一貫しますか?

はい。ピクセルではなくパレットを変えるので、全フレームで同じ陰影に同じ番号が使われます。テストでは4つの色違いが選んだ3枠だけを変え、残り13枠はバイト一致でした。

許容範囲つきの単色置き換えもありますか?

はい。別のパレットスワップツールが、許容範囲と陰影オフセットで単色を置き換えます。

無料ですか?アカウントは必要ですか?

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか?

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか?

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。