ランプ色替え

明度順にランプを対応させ、チームカラーを一度に作成。

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

画像をここにドロップ複数のファイルをまとめて処理できます
アップロードなし · この端末で処理

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

色ごとに新しいパレットで最も近い色へ置き換えると、陰影が崩れます。隣り合う赤の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つの.gplを開きます。触れていない枠は元の色が元の順で並ぶはずです。
  • 色違いを等倍で並べます。拡大時だけでなく、ゲームの大きさでチームを見分けられるはずです。

トラブルシューティング

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

ほかの方法

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

この方法の限界

  • 色違いはPNGフレームと.gplで書き出し、.asepriteではありません。
  • 読み込んだ全フレームに1つのパレットを使います。無関係なキャラ2体が入ったシートは先に分けてください。
  • 状態のプリセットはレシピで、描き起こしたアートではありません。

バージョンと出典

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

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

ランプ色替え

明度順にランプを対応させ、チームカラーを一度に作成。

使い方

  1. 画像を追加
  2. 設定を調整して結果を確認
  3. 新しいファイルを保存

対応形式

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。

このツールでできること

陰影ランプを明度順に対応させ、チームカラーのバリエーションを一度に作成。

処理方式と検証状況

advanced · OkLCh ramp position mapping / hue-window replace / index-preserving variants. 品質検証中です。Pro・Flagship水準はまだ実証されていません。

書き出す前に

明度順で対応させるだけで、どの色が肌や金属かは判断しません。

よくある質問

このツールにはどのような制限がありますか?

明度順で対応させるだけで、どの色が肌や金属かは判断しません。

ファイルはアップロードされますか?

このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。

作業は自動保存されますか?

いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。