ノーマルマップの働き
スプライトは平らなので、2D ゲームのライトはシールのように全体を均一に明るくします。ノーマルマップは同じサイズのもう 1 枚の画像で、その色が各ピクセルの向きを表します。これがあると、エンジンはスプライトの光源側を明るくし、反対側を暗くします。
絵そのものにその情報はないので、推測する必要があります。このツールは各ピクセルの高さを推測し、その高さの傾きをマップに変換します。
2D スプライト用ノーマルマップを生成
平らなスプライトに、2D ライトの下での奥行きを与えます。スプライトをドロップし、プレビューで光を動かして、Godot と Unity がそのまま読めるノーマルマップをダウンロードします。何もデバイスの外に出ません。
お使いのデバイス上で作成します。画像がアップロードされることはありません。
- アップロードなし
- ライトのライブプレビュー
- 複数の画像を一度に
仕組み
スプライトからノーマルマップを作る方法
ステップ 1: スプライトを追加
スプライト、タイル、テクスチャを選択、ドロップ、または貼り付けます。フォルダーごとでも大丈夫です。
ステップ 2: レリーフを整える
奥行きの元と強さを選び、プレビューの上でポインターを動かして光の当たり方を確かめます。
ステップ 3: PNG をダウンロード
マップは、エンジンがスプライトと対にする名前である 名前_n.png として、スプライトと同じサイズで保存されます。
ノーマルマップを生成
光に反応する 2D スプライト
作業しながらライティング
プレビューではスプライトをそのノーマルマップで照らすので、紫色の画像ではなく仕上がりそのものを確認できます。
シェイプまたは明るさから奥行きを
ベタ塗りのスプライトを輪郭から丸めるか、テクスチャの明暗から凹凸を読み取るか、その両方を混ぜます。
エンジンに合わせて
Godot と Unity には緑が上向き、Unreal には反転したものを。スプライトの透明部分は保たれます。
アップロードなし
すべてブラウザー内で処理されるため、画像はお使いのデバイスに残ります。
詳しく見る
2D ゲームのためのノーマルマップ
奥行きの元を選ぶ
- 「シェイプ」は、スプライトを輪郭から中央に向かって丸くします。明るさが奥行きをほとんど表さない、ベタ塗りのキャラクターやオブジェクトに向いています。
- 「明るさ」は、明るいピクセルを高く、暗いピクセルを低く扱います。石、レンガ、樹皮、地面のタイルなどのテクスチャに向いています。
- 「両方」は 2 つを混ぜたもので、ほとんどのスプライトに最適な出発点です。
- 強さと滑らかさ：強さを上げると影が深くなり、滑らかさを上げると光がやわらかく丸くなります。「丸み」は、輪郭から内側へどこまで面が盛り上がり続けるかを決めます。
エンジンでマップを使う
Godot では CanvasTexture を作成し、Diffuse にスプライトを、Normal Map にマップを設定して、シーンに PointLight2D または DirectionalLight2D を追加します。Unity では Sprite Editor でマップを _NormalMap という名前のセカンダリテクスチャとして追加し、Universal Render Pipeline の 2D ライトでシーンを照らします。
どちらも緑を上向きとして読み、マップもその形で保存されます。Unreal のように緑を下向きとして読むエンジンでは、「緑チャンネルを反転」をオンにしてください。
ノーマルマップを生成
よくある質問
画像はどこかにアップロードされますか？
いいえ。すべてお使いのデバイス上のブラウザーで実行されます。画像が Moriqa やほかの誰かに送信されることはなく、ページを閉じたあとは何も残りません。
スプライトからノーマルマップを作るには？
スプライトを追加し、奥行きの元を選び、ライティングされたプレビューを確認して、PNG をダウンロードします。サイズはスプライトと同じです。
ノーマルマップはなぜ紫と青なのですか？
その色は色ではなく方向を表します。赤は左右、緑は上下、青は見る人の方向です。平らな面は、おなじみの薄い紫になります。
ドット絵でも使えますか？
はい。マップはスプライトの正確なサイズとくっきりした縁を保ちます。くっきりしたブロック感を出すなら滑らかさを低く、やわらかい光にするなら高くしてください。
生成したマップは手描きのものと同じくらい良いですか？
いいえ。良い出発点であり、小物やタイルなら十分なことも多いです。主人公のキャラクターでは、アーティストがマップを手で直すのが普通です。
緑チャンネルは反転すべきですか？
Godot と Unity では不要です。光が上にあるのに下から当たっているように見える場合だけ反転してください。エンジンが緑を逆向きに読んでいるということです。
まずスプライトが必要ですか？
Moriqa のドット絵エディターを開いて、スプライトを描いてアニメーションにできます。ブラウザーで無料です。