Normal Map Generator: Free 2D Sprite Normal Maps

Upload a sprite or texture and get a normal map that makes 2D lights shade it as if it had depth. Tune strength and smoothing, move a light over the live preview, and download the PNG. Everything runs in your browser, so your image is never uploaded.

Step 1 of 3: Image

How to use it

  1. Press Choose an image, or drop a sprite or texture on the box, and press Next.
  2. Choose Brightness or Alpha edges as the height source, set Smoothing and press Next.
  3. Set Strength, leave Invert X and Invert Y off for Godot, and press Generate normal map.
  4. Move the pointer over the lighting preview to check the shading from every side.
  5. Press Download normal map PNG.

How a 2D normal map is generated

A normal map stores which way each pixel faces. Red is how much it faces right, green how much it faces up and blue how much it faces you, so a flat pixel is the pale blue color (128, 128, 255).

This generator first builds a height map. Brightness treats light pixels as raised, which suits textures such as stone, bark and fabric. Alpha edges raises the opaque shape of the sprite so its outline bevels, which suits flat-colored sprites and pixel art. Smoothing blurs the height map so the slopes are wider and softer; keep it at 0 or 1 for pixel art.

It then measures the slope at every pixel with a Sobel filter and turns the slope into a direction. Strength multiplies the slope, so higher values make the shading deeper.

OpenGL or DirectX: which green channel Godot uses

Normal maps come in two styles that differ only in the green channel. Godot requires OpenGL-style normal maps, where green points up (X+, Y+, Z+). DirectX-style maps have green pointing down, which makes light seem to come from the wrong side vertically.

Leave Invert Y off for Godot. Turn it on only for a tool or engine that expects DirectX style. If you already have a DirectX-style map, Godot can fix it on import with the Normal Map Invert Y option.

Use the normal map for 2D lighting in Godot 4

Select your Sprite2D, set its Texture to a new CanvasTexture, then put the original sprite in Diffuse > Texture and the downloaded normal map in Normal Map > Texture. Both PointLight2D and DirectionalLight2D use normal maps.

If the shading looks weak, raise the Height property on the light: Godot's docs note that lighting on normal-mapped surfaces is faint at the default height. A CanvasModulate node that darkens the scene makes the lights stand out.

Frequently asked questions

Is the normal map generator free?
Yes. It runs in your browser with no account, and your image never leaves your computer.
Does Godot support normal maps for 2D sprites?
Yes. Give the sprite a CanvasTexture with the sprite as the diffuse texture and the normal map as the normal map texture, and PointLight2D and DirectionalLight2D light it per pixel.
Why is the lighting upside down?
The green channel is in the other style. Godot expects OpenGL style with green up, so generate the map with Invert Y off, or enable Normal Map Invert Y when importing a DirectX-style map.
Should I use Brightness or Alpha edges?
Use Brightness for textures with detail in the light and dark areas. Use Alpha edges for sprites with a transparent background and flat colors, where brightness would only pick up the color changes.
How large can the image be?
Images up to 1024 px on the longest side are used as they are; larger images are scaled down to 1024 px before the normal map is made.
  • Sprite Sheet Generator: Pack animation frames into one sprite sheet PNG with JSON and a Godot SpriteFrames file.
  • Pixel Art Converter: Turn any image into pixel art with a set width and a reduced or retro palette.
  • Game Icon Generator: Resize artwork into every game icon size, or generate a new icon with AI.

See all tools