本文へスキップ

ノーマルマップ作成サイト · 2Dスプライト用の法線マップ

スプライトを開くと、ノーマルマップはもうできています。透明な縁から内側へ面取りを立ち上げ、明るさや手持ちの高さマップで細部を加え、ドラッグで動かせる点光源で照らします。ライティングはGodot 4の2Dの計算式そのままなので、プレビューがそのままエンジンの見た目です。

スプライト、スプライトシート、繰り返しテクスチャ(PNG)をドロップ
空のStudioを開く
ブラウザ内で処理し、ファイルはアップロードされません。
Studio のテクスチャ作業画面:6フレームに切ったドット絵のたいまつを、生成したノーマルマップと点光源で照らした画面
CC0アセット(OpenGameArt)を開いた実際のStudio画面です。
書き出し先
  • Godot 4 2D lights検証済み· Godot 4.7.2
  • Unity 6 URP 2D検証済み· Unity 6000.5.3f1 (URP 17.5)
  • PNG set + JSON通常ファイル

できること

  • シルエットからの面取り:幅と高さ(px)、丸・直線・なめらか・くぼみ・段の形状。推奨幅は128px以下のドット絵で1.5px、大きなスプライトは全体がふくらむクッション形。
  • 明るさからの細部(近似と明記。暗いマントを穴と読まないよう、広い陰影を無視する設定あり)、または同じサイズの高さマップ(16ビットPNGも可)。
  • テクスチャ作業画面の高さブラシ(B):推定が外れた所を上げる・下げる・なめらかにする・平らにする・消す。1ストロークが1回の取り消し単位で、フレームの外へははみ出しません。
  • 点光源は最大8個(色・強さ・高さ・半径・減衰)、アンビエント、スペキュラー。WebGL2のプレビューはCPUの基準と1/255以内で一致し、Godot 4.7.2も同じでした。
  • ドット絵向けの法線は、全ピクセルを4・8・16・32方向×1〜4段階の傾きにそろえ、絵柄を崩しません。

使い方

  1. 透過付きのスプライトPNGをドロップ(シートは先にスプライト作業画面でフレームに切ります)。
  2. ノーマルマップパネルで推奨の面取りをそのまま使うか、幅と形状を変える。
  3. Lit表示で光をドラッグし、Cでフラットとライティングを比較。不自然な所は高さブラシで描く。
  4. Godot 4のシーン、Unity 6 URP 2Dのバンドル、またはOpenGL・DirectXのPNGで書き出し(Ctrl+E)。

絵の種類ごとの出発点

Studioは透過の有無からスプライトか繰り返しテクスチャかを提案します。以下はよく使う出発点です。

絵の種類最初の設定確認すること
ドット絵のスプライト(フレーム128px以下)面取り1.5px、丸形、縁はClamp、Pixelカーネル、必要ならドット絵向けの法線Lit表示で光を回し、明るい縁が光についてくるか
大きい・塗りのスプライト面取り ≈ 代表的な内接半径×0.9(クッション形)、広い陰影を無視した明るさの細部暗い部分が穴に見えないか。高さブラシで修正
繰り返しテクスチャ(透過なし)縁はWrap、明るさの細部か高さマップWrapテスト0=継ぎ目なし、3×3タイル表示(T)
既存のノーマルマップ生成せずに元データとして使用チェックパネルの判定→「It is OpenGL / It is DirectX」。スプライトで赤の反転が出たらFlip red(X−)

エンジン別の書き出しと検証方法

「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。

書き出し先ファイル検証
Godot 4 2D lights_lit.tscn · CanvasTexture .tres · normal / specular PNG検証済み Godot 4.7.2実在のCC0ケース6件をGodot(gl_compatibility)で描画し、確認した全フレームがStudioのライティングプレビューと1/255以内で一致。緑を反転した同じ描画は3.8〜37段階ずれるため、規約の誤りを検出できます。
Unity 6 URP 2DPNG · nerulio-texture.json · Editor/NerulioNormalMapImporter.cs検証済み Unity 6000.5.3f1 (URP 17.5)12回中12回合格(6ケース×ガンマ・リニア色空間):URPが適用したライティングが書き出したノーマルマップと一致(平均誤差0.0037〜0.0085)。光の減衰はURP独自なので、明るさはプレビューではなくUnityの基準です。
PNG set + JSONalbedo · _n (OpenGL) · _n_dx (DirectX) · 16-bit height · AO · specular · manifest通常ファイルどのエンジン・ツールでも使える通常ファイルで、エンジンでの実行検証はうたっていません。

検証の根拠

Godot 4.7.2で実在のCC0ケース6件(ドット絵、HDスプライト、繰り返しテクスチャ、読み込んだDirectXマップ)を描画し、確認した全フレームがStudioのプレビューと1/255以内。Unity 6000.5 URP 2D:12回中12回合格(6ケース×ガンマ・リニア)。規約が分かっている実在のマップでOpenGL/DirectX判定:1Kのマップ128枚で100%正解、1,562サンプル中で誤った「高」判定は0件(「緑が明るければOpenGL」という単純な規則は46%)。

制限

  • 透明な縁がない絵(繰り返しテクスチャ)では、赤の反転とDirectXの緑を区別できません。チェックパネルがそれを伝え、「赤を反転」を用意しています。
  • シートはスプライト作業画面でフレームを切るまで1枚の絵としてライティングされます。テクスチャ作業画面ではフレームを切りません。
  • リムライトはプレビュー専用で、Unityにはスペキュラーマップを書き出しません(Godotには書き出し)。
  • Unityは独自の光の減衰を使います。書き出したノーマルマップはUnityで検証済みですが、明るさの曲線はUnityのものです。

よくある質問

ドット絵にも使えますか?

はい。128px以下のフレームは既定で1.5pxの縁、Pixelカーネルはなめらかにせず、ドット絵向けの法線で方向をそろえられます。ただし手描きのドットの陰影はどの生成ツールでも難しく、CC0のたいまつではNerulio・Laigter・PBR Forgeのいずれも作者のマップと37〜42°ずれました。

OpenGLとDirectX、どちらが必要?

GodotとUnityはOpenGL式の緑(Y+)を読み、これが既定です。PNGセットには_n(OpenGL)と_n_dx(DirectX)の両方が入ります。既存のマップを読み込むとチェックパネルが規約を判定しますが、「It is OpenGL / It is DirectX」を押すまで何も変えません。

エンジン向けの書き出しには何が入っていますか?

Godot 4はSprite2D、CanvasTexture、アンビエント用のCanvasModulate、光ごとのPointLight2D、フレーム用のAnimationPlayerを含む_lit.tscn。Unity 6はPNG、JSON、そしてノーマルマップを_NormalMapのセカンダリテクスチャとして設定し、確認用ライトも作れるエディタースクリプトです。

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

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

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

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

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

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