[Tutorial] A real dynamic light system

Discussion and feedback on Construct 2

Post » Wed Dec 30, 2015 10:42 am

[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 :

Image

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 :

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 :)

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.
Last edited by LeuNoeleeste on Thu Jan 12, 2017 4:01 pm, edited 21 times in total.
B
16
S
4
Posts: 86
Reputation: 1,535

Post » Wed Dec 30, 2015 2:00 pm

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.
A big fan of JavaScript.
B
76
S
20
G
76
Posts: 2,285
Reputation: 47,554

Post » Wed Dec 30, 2015 9:00 pm

@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-

Image
B
21
S
5
G
8
Posts: 1,215
Reputation: 7,834

Post » Wed Dec 30, 2015 11:25 pm

@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.
B
16
S
4
Posts: 86
Reputation: 1,535

Post » Thu Dec 31, 2015 1:16 am

@LeuNoeleeste
@Chrisbrobs

This is better, more accurate, running in C2

Image

In fact it's not using Pode's dynamic light
B
99
S
35
G
29
Posts: 3,139
Reputation: 28,421

Post » Thu Dec 31, 2015 1:20 am

@Joannesalfa

Coolbeans! Nice effect, have you used a plugin or some sort of magic custom code?
Brick by brick, stone by stone.
B
56
S
25
G
18
Posts: 273
Reputation: 13,363

Post » Thu Dec 31, 2015 8:05 am

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..
Sea Monsters template - Isometric
Also includes 40 pages PDF of optimizations and "how-to" for your games, and how the "sea monsters" template was built. Follow link for details :)

sea-monsters-templates-and-assets_t162705
B
43
S
14
G
12
Posts: 626
Reputation: 9,455

Post » Thu Dec 31, 2015 9:55 am

@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.
B
16
S
4
Posts: 86
Reputation: 1,535

Post » Thu Dec 31, 2015 11:34 am

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.
Sea Monsters template - Isometric
Also includes 40 pages PDF of optimizations and "how-to" for your games, and how the "sea monsters" template was built. Follow link for details :)

sea-monsters-templates-and-assets_t162705
B
43
S
14
G
12
Posts: 626
Reputation: 9,455

Post » Thu Dec 31, 2015 4:55 pm

@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.

Image

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)
Last edited by chrisbrobs on Thu Dec 31, 2015 6:15 pm, edited 1 time in total.
B
21
S
5
G
8
Posts: 1,215
Reputation: 7,834

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 3 guests