Enlighten your games with a dynamic lighting !

7

Index

Tagged

Stats

23,217 visits, 64,427 views

Tools

Share

Translations

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 23 Dec, 2016. Last updated 19 Feb, 2019

Normal map ? Captain ?

In digital imaging, three things affect the final rendering of your object :

Lighting - Colors - Depth

Our own perception of the latter comes from the interaction between the objects around us and the light which shines on them. So, to make images/objects generated by computers more realistic, we have the obligation to play on this interaction. Several methods exist to fake depth on the objects. These methods are designated as “mapping methods”. The advantage of this process is to save memory resources and earn fluidity (shadows are far less heavy than actual depth).

In both cases, 2D and 3D, we must start with a smooth and flat object, without any depth. The question is : how to fake depth on this flat object ?

We can use a normal map. Briefly, in geometry, the normal line to a surface is the orthogonal line to the tangent plane in one point. The direction vectors of this straight line are called normal vectors to the surface.

Well, ok, but what is the point, huh ? The point is : In computer imaging, knowing the normal vector orientation toward a point allow us to :

• Determine if this point is visible or hidden

• Determine the illumination of this point, thanks to Snell's law

Now I’m sure you understand how useful normal maps will be for us.

In brief, a normal map is a cartography of normal vectors. this cartography being colored according to the Lambert’s coefficient of these vectors.

It’s really interesting, but you don’t need to master the subject for this tutorial. We are not going to create the normal maps ourself anyway. As game makers, you must understand what you are doing, which is why I was forced to explain what normal maps are, knowing that we will be constantly using them.

Here’s the diffuse (the usual, in other words) image of Cloud Strife (FFVII) :

And here's the corresponding normal map :

Now that you know what a normal map is, let's see how to get one.

  • 8 Comments

  • Order by
Want to leave a comment? Login or Register an account!

  • LeuNoeleeste I ask because with a tutorial like this it is difficult to follow along without video. Also, I think it said somewhere in this tutorial that there is a limitation on lights? So using Matriarxs extension you can only have 3 lights in a scene?

    • Hello Borixsticks, sorry for replying this late, I hope you managed to keep going since then. Now to properly answer you, this tutorial is getting old, I plan to rewrite it with waaaay less fluff. There is no need to read the whole thing, just focus on Matriax's effect and you're good to go as far as Construct 2 goes, it remains the best option so far, even to these days, as it seems.

      However, it does have a limit : It can only handle 3 light sources. I had plan to write my own version of this extension, allowing the user to add more sources. It's still somewhere in the back of my mind, but I never got the required time to do it. In the meantime, you'll have to work around the 3-sources limit to add this kind of lightning in your current project or study the extension itself to make it versatile.

      Finally, I don't think a video would be useful. I'll simply rewrite the damn thing this summer so it takes less than 3 pages. It's a painful read in its current state.

  • Link is dead!

  • Awesome tutorial.

    I love it, ill may use it for my future games made in C2

  • Another nice normal map generation tool: boundingboxsoftware.com/materialize This was a great tutorial (which I read a while back.) I have used the Matriax effect and I also ported a procedural normalmap effect to C3 (specular and normalmap generated automatically.)

  • Absolutely a gem is that what I find here! Thanks for your effort in explaining the effect in detail and what I did not knew: There are three lights! At least something to start with! Almost fell of my stool. ;-p

    By the way may I humbly add two more ways to create bumps. ImBatch allows to create normal maps from multiple files at once - producing so la la quality. But it runs fast and is something like my Swiss Army Knife with all the file manipulation functions. Then there is ssBumpGenerator which you can get for free at Sourceforge. Like imBatch ssBump Generator is able to process more than one file and produces nice results.

    Hope that helps. Cheers!

  • Load more comments (2 replies)