ピクセルアート用ノーマルマップ生成
ピクセルアート用ノーマルマップ生成ツールは、スプライトのシルエットと任意の描画ディテールからタンジェント空間の法線を作ります。ピクセルの格子を保ち、光を動かして確認したら、画像をサーバーに送らず透明PNGを書き出せます。
使い始める手順
まずランタンのサンプルを試してください。持ち手の透明な穴、金属の枠、左右非対称のハイライトで光の方向を見分けられます。次にPNGやWebPを選択またはドロップします。細部を0、ベベル半径を小さめにして始め、光を上下左右に動かします。必要な場所だけ細部を増やし、エンジンに合うY規格でPNGを保存してください。リセットは元画像を保持したまま設定とライトを初期値へ戻します。
ピクセルアートのノーマルマップとは
スプライトの各ピクセルに照明用の方向を保存する画像です。赤と緑はタンジェントXとY、青は表面から外へ向かうZを表し、平坦な領域はおよそRGB 128, 128, 255になります。スプライト自体は平面のままで、変化するのはライトへの反応です。輪郭、当たり判定、影の形状、本当の奥行きは変わりません。生成される凹凸は調整可能な表現上の解釈であり、キャラクターの3D形状を復元した結果ではありません。
ピクセルの構造を守る理由
小さな素材では1ピクセルごとの配置に意味があります。16×16のキャラクターを滑らかに拡大すると、作者が描かなかった色や傾斜が加わります。ピクセル保持では最近傍で表示し、1×から16×の倍率は表示だけに作用します。処理とPNG出力は元の寸法を使います。全体表示なら大きな画像もカード内に収まり、倍率指定時はカード内をスクロールしてテクセルを確認できます。スプライトへ自動的なノイズ除去は行いません。
シルエットのベベルと描かれた陰影
シルエットの寄与はアルファ境界から内部への距離を近似し、透明な穴と画像端も境界として扱います。ベベル半径は元ピクセル単位でプロファイルの幅を決めます。直線は傾斜、丸みは曲面、柔らかい膨らみは緩やかな補間、シャープは狭い輪郭を強調します。半径0ならベベルの寄与を除きます。細部は別の輝度成分なので、輪郭設定を変えずに内部の小さな凹凸を追加できます。
塗られた色は物理的な高さではない
明るい服は明るい顔料かもしれず、暗いベルトも平らな胴体に描かれた色かもしれません。細部の設定はその差を高さの手掛かりにするため、不要な突起を生むことがあります。同じ光の下でシルエットのみの結果と比較してください。描かれたハイライトが不自然な稜線になる場合は細部を下げるか、汎用ハイト変換用に専用画像を用意します。強度は傾斜を増幅し、レベルは外向きZ成分を強めます。
透明ピクセルとアルファの扱い
完全に透明なRGBは通常の輝度ディテールから除外します。境界サンプリングでは近くの可視ディテールを延長するため、隠れた黒い画素が偽の縁を作るのを避けられます。半透明は元のアルファを保ち、再現可能な小数の境界プロファイルへ寄与します。照明プレビューは常に元のアルファを使います。透明度保持では穴や半透明も保存し、平坦背景では外側を不透明な中立法線へ明示的に置換します。カラースプライトの透明度は独立して保持できます。
2Dの動的ライティングを確認する
元の色を生成された法線で照らし、簡易ライトを動かして見え方を確認します。ドラッグやタッチのほか、キーボードでは水平・垂直位置のスライダーを使えます。非対称な特徴があるとチャンネル反転を見つけやすくなります。たいまつ、ランプ、キャラクターに追従する光の試作に役立ちますが、物理的に校正した表示ではありません。遮蔽、材質の粗さ、エンジン全体の照明処理までは再現しません。
OpenGLとDirectXのY方向
Y規格の選択は格納する緑成分の符号を変えます。OpenGL形式のG Y+とDirectX形式のG Y−は、それぞれ対応するデコードを行えば同じ表面を表します。このプレビューは選んだ規格を補正するため、書き出し形式の変更だけで意図した照明は反転しません。X反転は赤への独立した操作です。エンジン名は目安にすぎません。既知の突起と上下に動く光で、レンダラーと読み込み設定を確認してください。
Godot・Unity 2D・独自エンジンで使う
Godotでは現行の2Dライト資料を参照し、CanvasTexture経由の法線指定とライトの設定を確認します。Unityでは2Dレンダラー、スプライトマテリアル、パッケージの版により手順が変わるため、セカンダリテクスチャと法線照明の現在の仕様を確認してください。独自のWebエンジンではsRGB変換をせずベクトルを読み、UV方向を揃えます。ピクセルアートは最近傍フィルターから始め、実際のカメラ倍率と読み込み経路で評価します。
よくある問題と修正
膨らみすぎる場合はベベル半径やシルエットの寄与を減らします。内部のざらつきには強度を増やすより描画ディテールを減らす方が適しています。読み込み後の黒い縁はアルファ、アトラスの余白、フィルター、乗算済みアルファが原因の場合があります。上下の光だけが違うなら絵を修正する前に緑規格を確認します。SobelとScharrは局所勾配が異なるため最終サイズで比較し、ベクトル用画像はJPEGを避けロスレスPNGを残してください。
想定する利用者とスプライトシート
個人ゲーム開発者、ドット絵作家、テクニカルアーティスト、スプライトやタイルセットの制作者が、キャラクター、小物、UIイラストの動的照明を試作できます。ベイクに使える高解像度メッシュがない場合にも有用です。この版ではスプライトシートを1枚の画像として処理し、フレームを自動分離しません。ベベルの近傍が隣のフレームに届く場合はフレーム別に出力し、カラーアトラスと同じ配置へ揃えてください。
再現可能な素材の受け渡し
設定JSONを元スプライトとロスレスPNGの横に保存します。設定にはパラメーターだけが含まれ、画像ピクセルは入りません。設定の読み込みでも元画像は置き換わりません。ファイル名にY規格と寸法を含め、ゲーム内の複数の光で検査してください。PNG、WebP、JPEG、BMPを扱い、サイトの上限は50 MB、各辺8192ピクセル、合計16.8メガピクセルです。処理する権利のある素材を使い、試行中も原本を保管します。
よくある質問
シルエットだけから法線を作れますか？
はい。細部を0にし、シルエットの寄与とベベル半径を0より大きくします。半径と細部が両方0なら中立法線になります。
32×32の画像は32×32のままですか？
はい。表示倍率は書き出しデータを再サンプリングしません。PNGは元の幅と高さを保持します。
描いたハイライトが突起になるのはなぜですか？
細部は明るさを高さの手掛かりとして使います。色が顔料や描画済みの光を示す場合は細部を減らすか0にしてください。
透明な穴も保存できますか？
透明度保持なら穴や半透明を含む元アルファを保存します。平坦背景を選ぶと出力は不透明になり、外側は中立法線になります。