Normal Shading for Aseprite

If you're a game developer or if you've ever experimented with Normal Maps,  you might've noticed that there isn't a really good way to test them directly from within Aseprite. This extension aims to solve exactly this issue!

Normal Shading allows you to create realistic lighting for your textures in  Aseprite using the Blinn-Phong Reflection Model.

The menu can be found under Edit > FX > Shading

By using a diffuse texture, a normal texture & a light direction, a new image is created on the Output Layer. Your original textures are unaffected.

Features:

• Directional Lighting using a diffuse texture & a normal texture
• Ambient Lighting
• Support for seamless textures and custom sprites
• Specular Highlighting (with & without a specular Map)
• Works with multiple frames/cells

*All calculations are done per pixel on the CPU. Thus, performance will get a lot worse the larger your texture gets. For the future, I'd like to get Aseprite to utilize the GPU in the future, but as of now I couldn't find a way to do it

How It Works:

0. Installation

Aseprite Extensions are installed by either double-clicking the *.aseprite-extension file or via Edit > Preferences > Extensions > Add Extension

1. Creating Normal Maps

A Normal Map is a special texture that tells which direction each pixel of the regular texture is facing. In Aseprite, you can select the Normal Color Wheel in the Options Menu directly above the Color Palette. Using this Color Wheel, the further you pick a color on there in 1 direction, the more the pixel is pointing in that direction. 

Now what you need to do is paint the normal map on a new layer.

Check out my Normal Toolkit Extension for auto-generating normal maps and other helpful features!

2. Using the Extension

Navigate to Edit > FX > Normal Mapping (Shading) to open the extension menu. Then enter the name of the Diffuse Layer (your texture) and your Normal Layer. The output will be generated on the Output Layer. If you don't have one yet, it will be automatically generated.  

Then, set your Light Direction to the direction you want the light to be coming from. You can enable 'Color Wheel Controls', this way you can pick the Light Direction via the Normal Map Color Wheel.

(Optional) If you want, you can add an ambient color to your texture.

Now press 'Calculate' and you should see a new version of your texture with lighting and shadows generated by using the normal map you created.

3. Specular Highlighting (Optional)

Specular Highlights are light reflected by the surface texture. The reflection is determined by the angle of the Light and the angle of the camera. Thus, the angle from which we see the texture stays the same because we can't change the angle of the Camera in Aseprite. Changing the slider values does affect the view vector of an imaginary camera the algorithm uses for specular calculation.

Enabling Specular Highlighting will make the material appear more reflective. 

A Specular Map is a grayscale texture that allows you to control the reflectiveness of your diffuse texture. The brighter the pixel is, the more light it will reflect e.g. if your texture has a mixture of wood and metal, you could pick brighter grays for the metal parts to make it shinier.

You can also use a random noise texture to create a simple wetness effect.

*Enabling Specular Highlighting will impact performance, especially when increasing the specular hardness

If you have any questions, feel free to leave a comment or send me a message on Twitter