Pixel Art Normal Map Generator
This pixel art normal map generator turns sprite silhouettes and optional painted detail into tangent-space normals. Keep your pixel grid, inspect moving light, and export a transparent PNG without sending artwork to a server.
How to Get Started
Try the lantern sample first: its transparent handle, metal frame, and uneven painted highlights make the effect easy to inspect. Then choose or drop your own PNG or WebP sprite. Start with Sprite Detail at zero and a small bevel radius. Move the light horizontally and vertically, increase detail only where useful, choose your engine's Y convention, and download the normal PNG. Reset restores the controls and default light while keeping your selected source.
What Is a Pixel Art Normal Map?
A sprite normal map stores a lighting direction for each pixel. Red and green encode tangent X and Y, while blue represents the outward Z direction. A flat region is approximately RGB 128, 128, 255. The sprite remains a flat image: normal mapping changes its response to lights, not its outline, collision shape, cast-shadow geometry, or actual depth. Generated relief is an editable artistic interpretation rather than a reconstruction of a three-dimensional character.
Why Sprite Normals Need a Pixel-Preserving Workflow
Small assets depend on individual pixels. Resizing a 16×16 character with smooth interpolation introduces colors and slopes the artist never drew. Pixel Preserve uses nearest-neighbor display, and 1× through 16× zoom changes presentation only. The generator works at the original dimensions and exports the same pixel count. Fit keeps large images inside the preview; explicit zoom lets you inspect individual texels by scrolling within a card. No denoising is applied to the sprite automatically.
Silhouette Bevel vs. Painted Shading
The silhouette contribution measures an approximate distance inward from the alpha boundary, including transparent holes and image borders. Bevel Radius sets how far that profile extends in source pixels. Linear produces a ramp, Rounded produces a curved edge, Soft creates an eased pillow profile, and Sharp emphasizes a narrow edge. Radius zero removes the bevel contribution. Sprite Detail separately introduces luminance variation, so you can add small interior ridges without changing the edge setting.
Paint Is Not Physical Depth
A pale shirt can be bright because of its pigment; a dark belt can be painted over a flat torso. Increasing Sprite Detail treats these differences as height cues and may produce unwanted bumps. Compare silhouette-only output against the detailed version under the same light. If painted highlights create ridges that move incorrectly, lower detail or prepare a dedicated height image with the generic height converter. Normal Strength amplifies slopes; Level restores a stronger forward-facing Z contribution.
Transparent Pixels and Alpha
Fully transparent RGB values are excluded from ordinary luminance detail. Nearby visible detail is extended across the boundary for sampling so hidden black pixels do not create a false dark rim. Partially transparent pixels retain their original alpha and contribute a deterministic fractional boundary profile. The lighting preview always respects the source alpha. Preserve Transparency keeps that mask in the download; Flat Normal Background explicitly replaces the outside with opaque neutral vectors. Your color sprite can remain transparent independently.
Using the Pixel Art Normal Map Generator for Dynamic Lighting
The lit preview shades your original colors using the generated directions and a movable illustrative light. Drag or touch the preview, or use the horizontal and vertical light sliders with a keyboard. An asymmetric source feature helps reveal reversed channels. This is useful for prototyping torches, lamps, or moving character lights in a 2D game, but the preview is not physically calibrated and does not model occlusion, material roughness, or a complete engine lighting pipeline.
OpenGL vs. DirectX Y Direction
The Y convention selector changes the sign of the stored green component. OpenGL-style G Y+ and DirectX-style G Y− represent the same authored surface when decoded with their matching convention. The preview compensates for that choice, so changing the export convention should not reverse the intended lighting here. Flip X is an independent red-channel operation. Engine names are useful shorthand; verify your renderer and import settings with a known raised edge and vertical light movement.
Godot, Unity 2D, and Custom Engines
In Godot, consult the current 2D lighting documentation for assigning a normal texture through CanvasTexture and enabling the appropriate lights. In Unity, the normal-map workflow depends on the 2D renderer, sprite material, and package version; check the secondary texture and normal-lighting setup in the current documentation. Custom web engines need to decode vector channels without sRGB conversion and keep UV orientation consistent. Begin with nearest filtering for pixel art, then test your chosen camera scale and texture import path.
Common Problems and Practical Fixes
An overly inflated sprite usually needs a smaller bevel radius or less silhouette contribution. A noisy interior usually needs less painted detail, not a stronger normal. Dark fringes after import can come from alpha handling, atlas padding, filtering, or premultiplication. If only vertical lighting is wrong, inspect the green convention before editing the artwork. Sobel and Scharr offer different local gradients; compare them at the final display size. Preserve an uncompressed PNG and avoid JPEG for normal vectors.
Who This Tool Is For
Indie developers, pixel artists, technical artists, and sprite or tileset authors can use this workflow to prototype dynamic lighting for characters, props, and UI illustrations. It is particularly useful when no high-resolution mesh exists to bake from. A sprite sheet is treated as one image in this release: neighboring frames are not isolated automatically. Export separate frames when bevel neighborhoods could reach another frame, and keep their normal textures aligned with the same color atlas layout.
A Repeatable Asset Handoff
Save the settings JSON alongside the source sprite and lossless normal PNG. Settings files store parameters only, never source pixels, and loading one does not replace your artwork. Include the Y convention and dimensions in the filename and check the result in the destination game under several lights. The browser accepts the site's usual PNG, WebP, JPEG, and BMP inputs within its size limits. Use artwork you have permission to process, and retain the original when experimenting with lighting interpretations.
Frequently asked questions
Can I generate normals from the silhouette alone?
Yes. Set Sprite Detail to zero, leave Silhouette Contribution above zero, and choose a nonzero bevel radius. Radius zero and zero detail produce a neutral normal.
Will a 32×32 sprite stay 32×32?
Yes. Preview zoom does not resample the exported data. The normal PNG keeps the source width and height.
Why does my painted highlight become a bump?
Sprite Detail interprets brightness as a height cue. Lower it or set it to zero when the color describes paint or baked lighting rather than surface relief.
Does the download preserve transparent holes?
Preserve Transparency keeps source alpha, including holes and partial transparency. Flat Normal Background makes the output opaque and uses neutral normals outside the sprite.