FIRST CH TOOLS / Images / 87 DOT LIGHT
Pixel Art Normal Map Generator (live 2D lighting and a rotating-light video)
Drop in a transparent PNG sprite and this page builds a normal map from its shape, then lights it in real time with a point light that follows your mouse. Pick the green channel for Godot or Unity, save the PNG, and export a 3-second video of the light circling your sprite. Your image never leaves your device.
You can also drop or paste itUp to 256×256. Use the sprite at its original pixel size.
Original slime
Normal map OpenGL · Godot
Lit preview 16×16
Move the light with your mouse or finger
Normal map
Shading (preview and video)
Your video is ready Post it as is or use it to show off your game.
The normal map is the same size as your sprite. Transparent pixels keep a flat normal (128,128,255) and the same alpha as the original. Your image never leaves your device.
How to Use
- Load a transparent PNGPress “Choose a transparent PNG”, or drop (or paste) your sprite here. Up to 256×256, at its original, un-scaled pixel size. You can start with the slime, coin or stone brick samples.
- Shape it and move the lightMove your mouse (or finger) over the preview on the right to place the light there. “Bevel width” sets how far in from the edge the rounding goes; “Brightness” sets how much lighter colours are raised. Light strength, ambient and light colour only affect the preview and the video.
- Save and shareChoose the green channel for your engine (OpenGL for Godot, DirectX for Unity) and press “Save normal map” for the PNG. “Make the rotating-light video” records a 3-second, 1080×1080 clip of the light circling your sprite, ready to save or share.
About This Tool
To light 2D pixel art dynamically, a game engine needs a normal map alongside the colour sprite: an image whose colours encode which way each pixel’s surface faces. Painting one by hand takes time for every sprite, and dedicated apps take time to install and learn. This page builds the normal map from a transparent PNG, lets you move a light to check the result, and saves it straight away.
It works in three steps. 1) From the alpha channel (50% opacity or more counts as the sprite), it measures how far each pixel is from the nearest transparent pixel and raises a rounded bevel over the “bevel width” (1–6 px) from the edge; the inside stays flat. 2) “Brightness” (0–100%) raises light-coloured pixels and lowers dark ones such as outlines. 3) The slope of that height is taken with a Sobel filter, turned into a normal, and stored as RGB = normal × 0.5 + 0.5: red points right, green up (OpenGL) or down (DirectX), blue towards you.
Match the green channel to your engine: Godot expects OpenGL-style normal maps (green up) and Unity expects DirectX-style ones (green down). Using the wrong one flips the shading top to bottom, so a light from above brightens the underside. The preview uses Lambert shading (brightness from the angle between the light and the surface) plus ambient light, fading as the light moves away.
The video is recorded in your browser with MediaRecorder while the light makes one full circle in 3 seconds. Browsers that can record MP4 (Chrome, Edge, Safari and others) produce MP4; others (such as Firefox) produce WebM. The sprite is scaled by a whole number so the pixels stay crisp and fitted into 1080×1080. Specular or ambient occlusion maps, sprite sheet slicing, 3D views and engine export settings are not included. Loading, generating and recording all happen in your browser, and your image never leaves your device.
Other Tools
Tools to use with pixel art and game assets