最も近い色ではなく、ランプ内の位置で置き換える
色ごとに新しいパレットで最も近い色へ置き換えると、陰影が崩れます。隣り合う赤の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 Color | Asepriteで作業していて、色を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の説明は公式ドキュメントに基づきます。
参照した公式ドキュメント
ランプ色替え
明度順にランプを対応させ、チームカラーを一度に作成。
使い方
- 画像を追加
- 設定を調整して結果を確認
- 新しいファイルを保存
対応形式
PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。
このツールでできること
陰影ランプを明度順に対応させ、チームカラーのバリエーションを一度に作成。
処理方式と検証状況
advanced · OkLCh ramp position mapping / hue-window replace / index-preserving variants. 品質検証中です。Pro・Flagship水準はまだ実証されていません。
書き出す前に
明度順で対応させるだけで、どの色が肌や金属かは判断しません。
よくある質問
このツールにはどのような制限がありますか?
明度順で対応させるだけで、どの色が肌や金属かは判断しません。
ファイルはアップロードされますか?
このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか?
いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。