[Tutorial] A real dynamic light system

[12/01/2017] : Once my finals are over, I'll add a new page to explain how to custom the Matriax's effect so you can add as many light sources as you want, using Javascript.

[23/12/2016] : You can find the tutorial here : https://www.scirra.com/tutorials/9401/enlighten-your-games-with-a-dynamic-lighting/page-1

French version here : https://www.scirra.com/tutorials/9401/i ... namique/fr

##############################################################################################################

[30/12/2015] : Hey everyone, I see a lot of people talking about Construct 3 and some of them suggest several (often great) ideas, so here's mine. As explained in another topic, my recent obsession was the implementation of dynamic light effect in my game project. If you don't really know what is it (I doubt you don't), it's basically using a Normal Map (which overlaps your sprite) to simulate "real" light :

I tried several things to figure out what is the better way to deal with that, and my final answer is : nothing.

https://www.scirra.com/forum/viewtopic.php?f=146&t=166131&p=1002813#p1002813

Yes, we have some possibilities. We can use a tool called Sprite Lamp, or we can use Sprite DLight. Yes, we can. How to use them in Construct 2 ? With a really hacked way and the impossibility to use more than one light source. It's just amazing how difficult it can be to deal with our Normal Maps and our sprites and the events and the background...I mean, just read that :

http://www.snakehillgames.com/tag/construct2/

You'll have an idea of the thing. The better result I got was based on the work of this person :

http://gamepopper.co.uk/2013/12/23/first-hands-on-preview-spritelamp/

Even if it's better, it's still really tough. Now, we have some solutions already "included" in our current Construct 2. Evoked in the topic above, we can try the Pode's dynamic light effect. It's a really good work, but it's not in development anymore (Pode himself is mostly absent these days...) and we can't really ask anything or wait some improvements for it. The Bumpmapping Effect (alreay included) was my last subject of studies, and the answers on my topic say it all. For example :

[quote:2nmlf9ph]If I recall I didn't 1.) like the way the bump mapping worked, 2.) I didn't like the work flow in construct for adding the effect, 3.) the results weren't good compared to a 3d engine, 4.) You could only have 1 light source I think.

All in all construct 2 is a great tool, but bump mapping sort of is beyond what it was made for currently. Maybe in the future we can get a good lighting system going on. I think it would be awesome to have a more sophisticated rendering system and what not

In brief : Until now, we just have some beginnings of solutions to use Dynamic lights, but nothing really finished. I think, and maybe others will too, that an improvement of the Bumpmapping effect or a better way to use Normal Maps could be great in Construct 3. It's currently really odd, hacked and complicated, I suppose it's possible to make the work easier. Or, at least, stable.

Also, how about the compatibility between Sprite Dlight and Spriter Pro ? It's an old idea :

https://www.scirra.com/forum/sprite-dlight-support_t118649

And we don't have any news about that <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

I'm sure Construct 3 will be great anyway, and I suppose that Scirra has some greater priorities than playing with some light. But well, I've nothing to lose if by proposing it. The dynamic light effect is common in 3D game engines, and Construct 2 is a 2D game engine, I know. So yep, it's certainly not a priority for anyone, I suppose ! It's not abnormal.

Perhaps it's about time for a complete rework of the shadow caster behavior to support multiple light sources so it would be useful in a real game by not creating weird shadow artifacts...? Something like illuminated.js... There's an illuminated.js editor demo here to show how simple and effective it is.

LeuNoeleeste

'Even if it's better, it's still really tough. Now, we have some solutions already "included" in our current Construct 2. Evoked in the topic above, we can try the Pode's dynamic light effect. It's a really good work, but it's not in development anymore (Pode himself is mostly absent these days...) and we can't really ask anything or wait some improvements for it. The Bumpmapping Effect (alreay included) was my last subject of studies, and the answers on my topic say it all'

Playing around with Pode's dynamic light effect and a bit of tweaking, I managed to come up with a

way to create a basic Height map directly from player's sprite.

Its not on a par with Sprite Lamp or Sprite DLight, but I will post something when I improve it.

Here's some screen grabs-

Colludium : It's not exactly what I expect, but your proposion could be really useful indeed !

chrisbrobs : Wow, it seems to be a great work. You probably have a better skill than me on C2 !

Here's what I used to test the combo Sprite lamps / Construct 2 by using Pode's work :

http://www.mediafire.com/download/cwqlq ... ample.capx

(original capx in the second link of my first post)

And another test based on Pode's example (this time, I used SpriteIlluminator to generate a Normal map)

http://www.mediafire.com/download/i8u0d ... tNorm.capx

I'm curious to see what you have done. Maybe, if it's really "stable" and useful, you should envisage to make a tutorial about it on Scirra. As I said, almost nobody uses Pode's effect and because Pode himself is not there anymore, it's pretty hard to progress without any documentation anywhere. Someone like you could maybe fix this problem while we're waiting for a futur feature made by Scirra.

LeuNoeleeste

chrisbrobs

This is better, more accurate, running in C2

In fact it's not using Pode's dynamic light

Joannesalfa

Coolbeans! Nice effect, have you used a plugin or some sort of magic custom code?

first of all - bumpmapping ain't used for lighting, especially not lighting a sprite. bump mapping / normal mapping are techniques used to create bumpiness on objects. (for example - you have ground with stones on it, lots of little rocks. if you look at that picture directly - it's just a flat 2D picture. if you create a normal map for the little rocks and terrain, use bump + normal + diffusal - you get a nice effect that makes you see rocks like they're sticking out of ground instead of flat surface like they were on initial image.

and that's mostly bumpmapping / normal mapping. nothing else, nothing less, it isn't used for lighting, hell no.

second of all - i'd suggest coming up with your own shader for lighting or custom code for it, but bumpmapping ain't it.

third of all - if you've already used some custom code - why not create a behaviour / plugin for c2 and keep it updated so everyone can have. also did you know that tough things are quite rewarding when done? so you could take that turn.. but everything that lasts / is good is tough, just don't get depressed by the magnitude of work ot be done, devs usually lose motivation and give up..

Joannesalfa What kind or sorcery is that ? You didn't even use Pode's work and you can use several light source ? Impressive. As I said to Chrisbrobs, people like you could fix the lack of documentation or methods to allow the users to really use a dynamic system in their projects. Please consider it, I'm sure it will be useful for a lot of Constructors until Scirra does a move about this subject.

saiyadjin You absolutely right, every great results come with difficulty. But, you're supposed to have some skills at the beginning at least, which will allow you to progress in spite of this difficulty. In my case, I have some knowledge in HTML5 but it's really weak to achieve something like lighting/shadow gestion, that's why I spent last week testing several softwares and possibilites with C2. I found that nothing was really convenient and stable, and even for that, there is almost no any documentations/explanation anywhere. So I made this suggestion, because I'm not competent enough to make it by myself and then share it. Scirra's team is, and as we can see there, some peoples have already the skills I need to get in the future. So, at least, if this topic will not finish with a new feature from Scirra, it could bring a real documentation on this subject if a member writes a tutorial or something. A real informations source for those who want to deal with this kind of effect in the future

Also, I did know that Normal Map and BumpMap are - initially - there to simulate reliefs. But it's a perfect way to simulate light and shadows, the results we can see on this topic talk by themself (not the Bumpamapping effect maybe, but the Normal Map for sure). A lot, if not all, system of dynamic lighting in 3D (public) game engine like Unity work with that, for example. All the work already available based on this system (like Pode's effect) work with that too. In brief, it's certainly our better way to make it and that's how everyone else makes it anyway. I don't know how we could proceed without that.

well if you are weak in html 5 it doesn't matter, the game engine is in javascript, not html5

you can always start learning from w3schools.com about javascript and export your game without minimizing - then you get the full code in c2runtime.js which you can try to understand. other then that you can buy/borrow/etc wrox webGL book to learn some javascript webGL things. and other then that you need nothing

whatever you do though, remember this - you have to learn more widely then your current view because only like that you will become better in it all together. example:

i'm a c# developer, and i've want to make games in c2. i've used c2 and i've noticed that for making a good looking game you need time to invest into learning inkscape/gimp/paint.net/photoshop, or if you want a 2.5D or isometric games, most likely 3D modeling and exporting as pngs. then you need to know how to do animations which you can do with spriter for 2d and maya/blender/3ds for 3d. then you have to learn about AI and how it works to be able to understand how functions in pathfinding work for example. (yes every option is described in manual, but that's not what i meant, you really need to go into A* algorithm to understand it, and there's loads of articles about it online). Anyway - then you have to work with audacity (for example) to learn about audio. Then you have to learn how to optimize your game. Then you have to learn SQL if you want to work with databases and understand how they work, and so on... Finally if you learn / know javascript +webGL - you can do anything in c2 through sdk. So that's a good starting point. Currently i've noticed that people have to find plugins online on forum and check each to see what it does and so on.. that's why i'm using my c# knowledge to create a program that will ease this up for both plugins developers / c2 users in terms of checking what is available, update versions and so on.. it's a pretty big project and nowhere near finished, but i'm working on it and soon it will be done. you don't see me complaining about things, just sit and work. or as one guy said when he compared GIT vs Mercurial: tools do not matter, just sit down and write some code.

LeuNoeleeste

The map in your 'SpriteIlluminator' example is upside down!

Have a play about with this example, you can produce a 'height map' effect for testing.

Contains-

heightmap shader.

Demo capx.

https://dl.dropboxusercontent.com/u/221 ... ghtmap.rar

saiyadjin

Very impressed with your C.V and credentials but a bit off topic and a bit negative. Cheer up !

Joannesalfa

Looks good. how does it work.

Later Addition-

Here's an example combining the effect with 'Podes lighting demo'

https://dl.dropboxusercontent.com/u/221 ... fx%20.capx

(No imported Heightmap needed)

hey i'm not trying to be negative, i'm trying to be motivational. if this is what you really want to do for the rest of your life - focus on it and expand your views... it's the same in every job from programming to selling mops

p.s. yeah, a bit offtopic, sorry

Please stay on topic and be nice everyone.

Nice work as usual, chrisbrobs

saiyadjin

Your forgiven

zenox98

Thanks.

PLease note . I actually PM'd Pode with regards to 'using / modding' his work.

He responded ''Of course, you can use it and modify it as you wish'

saiyadjin haha Indeed, I thought Construct 2 was based on HTML5, my mistake !

Anyway, yes, you're right. I maintain that I (definitely because it's Javascript) don't have the required skills to take care of that by myself for the moment and it will take months to acquire the concerned knowledge, so my request stays justified. But you're right, if I want to touch the sky with Construct 2, I better learn what will allow me to develop some plugins or effects. So javascript, here I come.

chrisbrobs Yep, it's upside down, I recently realized it, sorry, let's say it's...original by this way >.>

Your work, however, is still really good. I tested your effect combined with Pode's effect with several sprites, even if it's not as sweet as the results I saw by using Sprite Lamp or Sprite DLight, it's as convenient (No imported Heightmap needed) as well rendered. It's easier than use Sprite Lamp, too. Congrats ! But the better part is there :

[quote:3fb55v1u]PLease note . I actually PM'd Pode with regards to 'using / modding' his work. He responded ''Of course, you can use it and modify it as you wish'

So the guy was not as absent as I thought he was ! I suppose he just doesn't care about his old topic anymore. It's human. But remember what I said at the beginning ?

[quote:3fb55v1u]We can try the Pode's dynamic light effect. It's a really good work, but it's not in development anymore (Pode himself is mostly absent these days...) and we can't really ask anything or wait some improvements for it.

If you decide to take care of this great effect and improve it, then this problem will be solved. If this whole topic has allowed someone to be interested in this effect, then take care of it to finally create something better for the whole community, what can I say. In brief, if you want to play with that and make something interesting, I doubt anyone will complain, for sure !

From my part, if finally nobody tries to improve Pode's work and if Scirra doesn't make anything about that, I'm sure it will be a good base to start working on my own effect latter, when I'll have the necessary skills. Thanks for this information

LeuNoeleeste

chrisbrobs

There is no magic, but basically go to download this effect:

effect-normal-map-extended-1-01-updated-13-jul_t149650

And I used to generate normal map from default sprite, I've imported 2 sprites in c2:

http://spritelamp.com/

One sprite is diffuse texture and another sprite is normal map, you need to bring normal map as front over diffuse texture.

Then apply normal map effect for normal map sprite.

Adjust the parameters whatever you like and bring the best results.

You can use Z position for this light, it would be 3D light in 2D.

It's just a simple explanation

Demo:

http://powerupware.com/lightmap/

Capx: [r219]

https://www.dropbox.com/s/6v2ikwuck5slg ... ?dl=0&s=sl