Enlighten your games with a dynamic lighting !

Index

Stats

10,326 visits, 31,611 views

Tools

Normal Maps and Construct 2

Congratulations, you have your normal map and you know why you absolutely need to have one, but then ? What are you supposed to do with this strangely colored thing ? How do we use it in Construct 2, concretely ?

Don’t worry, you've already passed the harder part : you got the normal map.

Indeed, C2’s community is what it is, and some members have already designed their own effect to provide the possibility of using dynamic lighting in our games. This tutorial is nothing than a catalog of the available effects including the way you’re supposed to use them. In fact, we can deal with this kind of lighting since 2012 at least. In every case, normal maps are required.

By using one of these effects on our precious normal map, we can create a movable light source which will generate shadows depending its position. In other words, as soon as you apply the effect on the map's sprite, it becomes dynamic pure shadows as you can see on the previous screenshot. Great.

Now you can have dancing shadows. But they need to dance on something, otherwise, everything will be invisible because you can’t see shadows in the void (you know, the shadows are black, the void is black…things are complicated.) Guess what you must use ? Your sprite itself, of course ! The diffuse image !

The sprite is supposed to have the exact same size than its normal map, so you just have to place it at the same position and the job will be done. This is the whole concept right there. You still have your dancing shadows, but they are dancing on the sprite now, and because your sprite has the same size, shape and position as them, you have the certitude than it’s dynamically enlightened. Yes, everything is a lie, a beautiful one.

Your job : make sure that the normal map is always at the same position and the same angle as your sprite in the event sheets. In brief, a piece of cake.

The theoretical part of this tutorial is officialy over. Let me introduce you to the different available effects created by various users of Construct 2 and how to correctly implement them in your game project. Once again, I highly recommend you to read everything before choosing any of them. Let’s begin !

  • 4 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.

  • Just putting this out there in case someone is struggling to get Matriax's plugin to work properly and is reading the comments..

    Setting light to mouse coordinates wasn't working for me at first, so here's what I did to get it working as intended.

    Project Settings:

    -> Use High-DPI Display: NO

    In the events - Set X and Y resolution to WindowWidth and WindowHeight.

    Like this:

    Every Tick -> Maps_Obj_Family -> Set Effect Parameter:

    Parameter Number 44, Value: WindowWidth

    Parameter Number 55, Value: WindowHeight

    Now you can toggle fullscreen and use different scales without a problem.

  • LeuNoeleeste Is there a version of this tutorial in the form of a video?