loading...
Cover image for Laigter: normal map generator!

Laigter: normal map generator!

azagaya profile image azagaya ・4 min read

Hi! This is my first post in this community, and I want to present you my free and open source tool for normal map (and others) generator, called Laigter. In this post I will show just the basic of Laigter, and the basic usage on Godot and Unity. We will only focus in normal maps for now. If you want more info, don't hesitate to ask me!

The tool

Laigter is a tool with a simple interface, that allows the user to generate a normal map for sprites (mainly 2d) easily. Or that's the intention at least. The first thing you see when opening Laigter is the main window with the sample texture:
Main Window
At the top right of the window, for the default configuration, you can see a dropbox which contains view modes. There we can change to, for example, normal and preview modes:
Normal Map View
In the normal view, you just preview the generated normal maps. Remember that RGB in this maps refers to the components x,y,z of a normal vector to the sprite surface. This way we can emulate more realistic lighting effects.
Preview
In the preview mode, you can watch the lighting effect in real time, as it will look in your game! You can move arround the light, and play with the controls to configure it.

Working your sprites

For loading your own sprites, just drag and drop an image file to Laigter window, or use the "Import" toolbar button. Laigter will open the image, and generate the maps with the current settings. So how do you tweak the normal map? Easy, just move the sliders!

Enhance Controls

As shown in the above image, the sliders in the "Enhance" group will affect normals for the "details" of the sprite. Height slider would affect how abrupt is the normal change on each pixel, and Soft just applies a blur to the normal map. Then we have the Bump controls:

Alt Text

This controls affect the normals from the edge of the sprite, to simulate it has volume. The height and soft controls have the same purpose in "Enhance" controls, and the "Distance" slider is to set how much inside the sprite you want the normals to reach.

You can preview the result changing view mode to Preview in the combobox at the top right of the window:

Alt Text

Exporting the maps

The easiest way to export the maps, is clicking on the "Export" button in the export Dock at bottom right. You can first select which maps to export. In this case, we will just choose Normals:

Alt Text

The normal map will be exported in the same directory where you have the original file. This is intentional, so you can import the files directly from your game's project directory, and the maps will be generated right there. Now you just need to import them on your engine.

Using normal map in Godot

Note: for using with godot, check the "Invert Y" checkbox in the axis group of the Normal dock BEFORE export. This is because godot uses negative y as up direction

So, now lets create a godot project, called whatever you want, and import both textures (sprite and normal map) into it. Also add some texture for the light (a white circle should be enough for this example). Generate a simple Node2D scene with a Sprite and a Light node as children. Asign the light Texture to the "Texture" property of the "Light2D" node in the editor. Then assign your sprite to the "Texture" property of the "Sprite" node, and the generated normal map to its "Normal Map" property. Aslo, play a bit with the light settings (specially the height) to be able to notice the effect.

Alt Text

And that's it! the most basic usage of Laigter + Godot.

Using normal map in Unity

Create a project, and import to it the normal map and the sprite. Then create a Material. Change the mode to "cutout" or "fade" and assign the normal map to the "Normal" attribute of the material. Then drag and drop the sprite to the scene. Assign the recently created material to it. Add a point light and test the result! Thats all!

Alt Text

Ending notes

Obviously, there are much more complex use cases. This is just the basic usage to get started. If there is enough interest, i can make more specific use case tutorials. If you have any further questions, you can join me at discord.

Also, making and maintaining a free and open source tool involves a lot of effort. I making this to help indie dev to make their games with minimal cost! But if you like what I'm doing, consider supporting me!
Patreon
Kofi

Last, i want to show you Laigter being used in my personal projects:

Alt Text

Alt Text

Posted on May 30 by:

azagaya profile

azagaya

@azagaya

Developer of Laigter! and not much more

Discussion

markdown guide
 

This is so cool! I would love to know more about how you were inspired to create this tool, or the process for creating it. Also you should totally put that you were a mega grant recipient for this work!!

 

When i first dived into gamedev arround an year and a half ago, I saw a godot video of dynamic lighting for an isometric game. So I started searching how to make this, and I found out about normal maps. Sadly there were no free tools for Linux with this same target, and I found the existing ones were a bit expensive. So I thought about making my own. At first i thought it was going to be only for personal use.. then i thought about making it freemium. But i always liked open source, so I finally decided to release free and open for everyone! And that's the story!

 

this is pretty cool. Ever thought about making this app web based?

 

I'm not really a good web developer.. Also i'm using quite a lot image processing libraries in C++ for it. What do you think would be the benefits to port it to web?

 

Think the big benefit is getting more people to use the app. There is one normal map generator I know that is web based. So if someone needs a quick normal map from time to time, its super easy to just visit a page, drag your image in and let it do its magic.

Another Benefit is that it'll be cross platform ( Mac, Windows, Linux, Chrome OS, Android, etc ). If you program it as a Progressive Web App, people can use chrome to install it as a "Chrome App" and use it offline without an internet connection.

About the C++ Libs, well depending on what your using them for, like Reading or Saving an image, thats really easy on the web. Html Canvas has lots of features that lets you do things at the pixel level and instantly see the results. Can even take it bit further and use WebGL to do 3D rendering on the fly using the texture and the normal map for real time results.

If you need help on making a web based version of it, Might be fun to land a hand. Can use github or bitbucket pages to host it too, so no worries about hosting costs.

Existing App
cpetry.github.io/NormalMap-Online/

Yeah, i know that tool. Its a bit different focus. I'll have this in mind, but honestly idk if i will be able to do such work in web. And it would require a start from scrath. Also, the C++ libs i use are not for reading or saving files, are for image processing. Distance transform for example (surely there are libs for this things on javascript anyways).
Also, laigter already has a real time results preview, you can even add multiple lights and change it settings, move them arround, etc. Im using opengl for that.
If you want to start such a project, i would gladly help you with the generation part. But i dont think ill start from scratch on web right now. May be in the future.
BTW, im using github to host the project. You can see the code here: github.com/azagaya/laigter

Alright, lets give it a go then. I'll try to put together a simple prototype generating a normal map and try rendering it in 3d. So if you point me at the places in your app that does that, I'll give it a try. If it works out, I'll try to flesh it out further.

Cool! looking forward to hear from you. BTW laigter is more focused for 2D. But rendering the textures on a cube or sphere is just a small step away. I just focused laigter more on the 2D side.
The normal map generation is done here. That function needs an image as input (an some other params).

 

So I come from a 3d background and I just started learning 2d sprite animation this past week. I never even considered you could give a 2d sprite depth using lighting!!! I will definitely be trying out this tool once my sprites are finished <3 thanks for sharing this!

 

Thanks for the interest! I hope you find it useful!

 

This effect is very subtle, but it really helps the game feels like it has that much more depth.

You mentioned this mainly used for 2D. How do you apply this effect in 3D?

Also thank you for introducing me to the idea of what a Normal map is. 😁

 

For 3D, suppose you have this brick texture:
alt
And you apply it to a cube (i'm showing with godot)
alt
That looks pretty plain. You could generate the maps with Laigter, and apply it to the material to get this:
alt
You could use it for walls, wooden objects, everything that needs textures. Of course, nowadays you can download 4k textures with all the maps handcrafted for pros for free.. but maybe you want to use your own.

 

Thanks for walking me through how to use this in a 3D space.

Sure I could probably use already created textures... but I have a problem that I want to know how everything is done. 😛