FIRST CH TOOLS / 画像 / 87 DOT LIGHT
ドット絵に光を当てる（ノーマルマップ生成と光が回る動画）
透過PNGのドット絵を入れると、絵の形からノーマルマップ（法線マップ）を作り、マウスの位置に置いた光でその場で陰影を付けます。Godot・Unity向けの緑の向きを選んでPNGで保存でき、光が1周する3秒の動画も書き出せます。画像は端末の外へ送信されません。
ドロップ・貼り付けでも読み込めます最大256×256。元のドットの大きさのまま入れてください。
元の絵 slime
ノーマルマップ OpenGL · Godot
光を当てたプレビュー 16×16
マウス・指で光を動かす
ノーマルマップ
陰影（プレビューと動画）
動画ができました SNS やゲームの紹介にそのまま使えます。
ノーマルマップは元の絵と同じ大きさです。透明な部分は平らな法線（128,128,255）のまま、アルファも元の絵と同じにしています。画像は端末の外へ送信されません。
How to Use
- 透過PNGを入れる「透過PNGを選ぶ」を押すか、ドット絵をここへドロップ（貼り付けでも可）します。最大256×256で、拡大していない元の大きさの絵を使います。まずは見本のスライム・金貨・石のブロックでも試せます。
- 形と光を整える右のプレビューでマウス（スマートフォンは指）を動かすと、その位置に光が置かれます。「面取りの幅」で縁の丸みの幅を、「輝度の寄与」で明るい色をどれだけ盛り上げるかを決めます。光の強さ・環境光・光の色はプレビューと動画の見た目だけに効きます。
- 保存・共有する使うゲームエンジンに合わせて緑の向き（Godot は OpenGL、Unity は DirectX）を選び、「ノーマルマップを保存」でPNGを保存します。「光が回る動画を作る」で光が1周する3秒の動画（1080×1080）ができ、保存・共有できます。
About This Tool
2Dゲームのドット絵に動的な光を当てるには、色の絵とは別に、各画素の面の向きを色で表したノーマルマップが要ります。手で描くと1枚ごとに時間がかかり、専用のアプリは入れて覚えるまでが手間です。このページは、透過PNGを入れるだけでノーマルマップを作り、光を動かして仕上がりを確かめ、そのまま保存できます。
作り方は3段です。①アルファ（不透明度50%以上を絵とみなします）から、各画素が透明な部分までどれだけ離れているかを測り、縁から「面取りの幅」（1〜6px）の間だけ丸く持ち上がる高さを作ります。内側は平らです。②「輝度の寄与」（0〜100%）の分だけ、明るい色の画素を高く、暗い色（輪郭線など）を低くします。③高さの傾きをSobel フィルターで求めて法線にし、RGB = 法線 × 0.5 + 0.5 で色にします。赤が右、緑が上（OpenGL）または下（DirectX）、青が手前の向きです。
緑の向きは使う環境に合わせます。Godot は OpenGL 形式（緑が上向き）、Unity は DirectX 形式（緑が下向き）のノーマルマップを前提にしています。逆を使うと、上から当てた光で下側が明るくなるなど、上下の陰影が反対になります。プレビューの陰影は、光の方向と面の向きの内積で明るさを決める Lambert 反射に環境光を足したもので、光が遠いほど弱くなります。
動画は、光が絵のまわりを1周する3秒の映像を、ブラウザの MediaRecorder で録画します。MP4 で録画できるブラウザ（Chrome・Edge・Safari など）では MP4、そうでないブラウザ（Firefox など）では WebM になります。絵はドットが崩れないよう整数倍に拡大し、1080×1080 に収めます。スペキュラー（光沢）やアンビエントオクルージョンの画像、スプライトシートの自動分割、3D表示、ゲームエンジンへの書き出し設定には対応していません。読み込み・生成・録画はすべてお使いのブラウザの中で行い、画像は端末の外へ送信されません。