# [Effect] Normal Map Extended 1.01 (Updated -13 Jul)

Share your Construct 2 effect files

### » Sun Mar 19, 2017 1:46 pm

@matriax
I was looking for an effect like this, but unfortunately when i tried to download it, it says 404.
B
2
Posts: 2
Reputation: 154

### » Sun Mar 19, 2017 1:57 pm

@Vabal Done!
B
30
S
12
G
3
Posts: 685
Reputation: 5,112

### » Sun Mar 19, 2017 9:10 pm

@matriax thank you so much!
B
2
Posts: 2
Reputation: 154

### » Sat Apr 01, 2017 5:12 am

Great effect, thank you for the work.

An example, first pass testing this (only stones and little statue are lit, light source location is the lantern):

I used Sprite Dlight Pro beta to generate the normal maps, which is a nice tool.

One question: any suggestion on how to handle a rotation of the stones at different rates (so the normal maps would also be rotating), with a fixed light source? I tried it out and realized quickly that the normal map orientation was of course baked into the maps and the shader / effect assumes particular orientation based on X/Y ordering. Right now looking at the parameters of the effect, I don't see a way to handle this. My possible very hacky solution would be to change the location of the source also to make up for the rotation of the stones / light map, but I would have to do it separately for each rotating stone and it probably still would look not quite right.
B
63
S
28
G
19
Posts: 190
Reputation: 14,592

### » Sat Apr 01, 2017 6:40 am

Sorry, no idea that how to do that :S
B
30
S
12
G
3
Posts: 685
Reputation: 5,112

### » Sat Apr 01, 2017 10:20 pm

I did a quick hack to make the object rotation with normal maps work well enough. Here is the result:

For each rotating object, I change the location of the light X,Y so, that the light location rotates around the object/normal map in the opposite direction with a fixed distance. Using some basic trig to figure out the formulas for the X,Y location of the light, I got this effect, which looks pretty good. Generally, the shadows are on the bottom of the stones and the lit portions are on the top. This models uniform moonlight (not the point light of the lantern) coming from above the stones. Using x=R*cos(angle), y=R*sin(angle) to define the circle trajectory (with adjustments for 90 being coming from above and 180 to make it on the correct side.) I think there is a good chance I can make it look better by adjusting and changing the normal maps themselves (in Sprite Dlight.)

Event snippet (must do adjustment separately for each stone since they are rotating differently, on creation, I capture the UID of each normal map associated with each stone diffuse texture.) I think I can actually simplify this by just using the X/Y of the SwirlNormals and can just loop through those instances.

A better way to do all this would be to change the shader itself, so it takes a rotation angle of the normal map/object and then modifies the normals based on that rotation angle, this would be much more flexible and is left as an exercise for the reader.

Last edited by Mikal on Sat Nov 18, 2017 9:32 pm, edited 1 time in total.
B
63
S
28
G
19
Posts: 190
Reputation: 14,592

### » Sun Apr 02, 2017 9:07 am

@Mikal I not have the skills to implement that inside the shader sorry :S , maybe @Gigatron knows how to apply that to the shader itself but is busy now, maybe he can take a look on this when he have some free time.

Also will be great to know if there can be a solution to use any amount of light source/colors instead that only 3 with a simply copy/paste code inside the .FX , i know is not the most optimized thing but with my skills is what i achieved XD.

Maybe split the Normal Map shader in two ones. One for the light source with their intensity, colors,etc... you can place anywhere in the layout to have 10, 20 or whatever, and other shader on the sprite the calculates how the light will affect. I don't know if this is possible or maybe there is other way but is the unique thing i can think now.
B
30
S
12
G
3
Posts: 685
Reputation: 5,112

### » Mon Apr 03, 2017 3:15 am

I got the rotating normal maps working including distance and angle to the light source (again only needed because I was rotating normal maps, if you are not rotating the normal map, none of this work is needed for the Normal Map Extended effect.)

I will take a look at the shader code at some point. For now, I'll work with what is available, changing the parameters of the effect as needed to do what I need externally (with some possible error due to the level of control, but overall I think it looks reasonable.) Here's an update with distance to light source and angle to light source also adjusted for. In the previous the distance and angle (90) was uniform (as if the moon was overhead.) In this example I moved the light source to the particle object in the lamp. To do this, I dynamically adjust the lightDistance and lightAngle on a per NormalMap basis. Distance was easy, the angle was again some basic trig, using atan (arc tangent) to get the angle.

Event snippet (again can be optimized to just a for each of the SwirlNormals):

Last edited by Mikal on Sat Nov 18, 2017 9:25 pm, edited 1 time in total.
B
63
S
28
G
19
Posts: 190
Reputation: 14,592

### » Sun Jul 02, 2017 9:04 pm

Hey, I think this effect is just fantastic. Thanks so much for making it. I'm having a bit of an annoying problem with it though. It seems to work differently on my Windows 10 laptop than it does on my Windows 7 desktop. The laptop version seems to not have the effect in the correct place, like it's not far enough along on the x or y axis unless it is at the very top left corner.
Any idea what I'm doing wrong? Is it a problem with my laptop? I've updated directX and the java if that makes a difference.

Here's my capx if anyone has any ideas, sorry for being a nuisance https://www.dropbox.com/s/q2s9v10we6dtq ... .capx?dl=0
B
12
S
2
Posts: 12
Reputation: 847

### » Sun Sep 10, 2017 4:57 pm

@Matriax Hello !!!

I have a little question is saw in ShaderLesson6 that there are some other effect for light like:

With this type of rending
http://mattdesl.github.io/kami-demos/release/normals-pixel.html

https://github.com/mattdesl/kami-demos/tree/master/src/normals-pixel

i saw this too:

http://prideout.net/blog/?p=22

I know you may not have the time to do it or if it's possible but if you can implement it i will be so happy because the render look so cool (i do a lot of pixel art and this give a new dimension )

Maybe not the best exemple but look a the difference:

.

And for finish what is the main différence between:

For X = (LayerToCanvasX(0, "YourObject".x, "YourObject".y))/WindowWidth
For Y = (LayerToCanvasY(0, "YourObject".x, "YourObject".y))/WindowHeight

and

(LayerToCanvasX(0, "YourObject".X, "YourObject".X))/WindowWidth
(LayerToCanvasY(0, "YourObject".Y, "YourObject".Y))/WindowHeight

@Mikal Can you post a capx of your solution ? Because i have a different solution but it's maybe ( for sure )not the best.

Have a nice day.. !
B
11
S
3
Posts: 40
Reputation: 815

PreviousNext