[EFFECT] - GS #11 Normal Mapping

We have released shader effect #11 - Normal Mapping. Please head over to our website to see the demo in action.

Thanks!

GamesWarp Studio

Made some changes to the demo program. You can now toggle the background between black and white. This is to illustrate that even with transparency, the normal mapping works. Please refresh browsers if you have already visited the site.

Thanks.

How does it work with Tiled Backgrounds or Tilemaps?

As advertised I hope... let me try it out now and get back to you.

Yes it does... Looks really cool too! Will paste an image shortly.

[EDIT] Below is the image I spoke about... the sprites in the foreground have been deleted... while the tiled background uses the spaceship, and the tilemap uses the default tilemap that ships with Construct 2. You can see that the upper left hand corner of the tilemap is lighted up, and so is the tiled background. I have also modified the code so that the position of the light is responsive to the position of my mouse arrow.[/EDIT]

In case any one does ask, the shader zip file is still absolutely free for the Scirra 2 community. If you want the zip file, just head over to our Patreon page, select to become a patron and choose "No Reward". You pay nothing - $0. Zip. Nada. And you get access to all our stuff put up on Patreon for free. But, really it's entirely up to you.

Again, thanks for your interest in this shader effect, and most importantly... have fun with it. We know we are using it in our next game - an action shooter.

I'm asking because there's an issue with official bumpmapping effect and was wondering if your effect fixed that

Here's the bug post with example file to see what issue I'm talking about https://www.scirra.com/forum/r161-bumpmapping_t95603

I am aware of an inversion in the Y-axis... if you look carefully at the snapshot of code above, you will notice a "640 - Mouse.Y" instead of a "Mouse.Y" being used. I have always wanted to implement shaders that follow wherever your mouse goes regardless of whatever layerscale you are currently on. But there are some... issues with Construct 2 code.

Trust me, I have tried explaining before but to no avail. Hopefully, Ashley can see what we mean soon, or at least give us shader effect developer guidelines. I don't want to have to live through another "Adele Dazeem" type of reply. Guess, he's rather busy atm with multiplayer. So let him be. (- I need multiplayer too)

Take a look my existing code. It's seems to be working fine in the version that I released.

Been playing with this for last almost an hour and it's a nice effect, but can't see how it could be used in a game.

• your effect does not respect X and Y coordinates properly

Center of the "light" is on mouse cursor only in the middle of window (att1)

Move cursor somewhere near the edge of screen and it's clearly visible (att2)

• transparency of objects are not taken into account (att3) - this point itselfs eliminate use of this effect in any game, unless you are using solid-filled sprites.
• area (range...radius) of effect is to big (att4) which produces weird artifacts in all examples I've been playing with.
• very hard to control - you can only get very bumpy (and specular at same time) effect or no specular with unnoticeable bumpiness.

Take a look at the official Bumpmapping effect: Light XYZ and intensity - and that's all you need to control everything you need.

It's not a bad effect at all, it's just not ready to be used in a game.

att continued...

Please change what you like in the fx code and share with us something that is "ready to be used in a game". What new features would you consider adding in to make it reach that state?

There is no need for this negativity. I'm only trying to help to improve this effect.

Official bumpmapping can be only used with sprites, making it impossible to use in basically any project (you can always add hundreds of objects for every tile in background, but this is obviously stupid/crazy idea)

That's why I was so excited to see someone adding different implementation of this effect, and I still am! This is lovely effect and you don't even need to add another object with normal map textures.

But like I said in previous post, to make it fully working you need to fix basically three things:

1. XY coordinates

2. Transparency in objects

3. Area/range of effect

Unfortunately I know nothing about writing fx, tried few times but it's not working with my brain.

Maybe I wasn't clear in my previous post but I pointed out these issues more like suggestions to fix not complains about "this is nice but useless".

It's always good to hear another person's suggestion though... no negativity intended. And yes, there's no requirement for a normal map, like say as a second frame in an animation. That would have been a big headache to implement.

Anyway, for sharing - here's a way of making things even brighter, just replace the last line of code in the fx file with this:

gl_FragColor = texture2D(samplerFront, vTex) + lightintensity * vec4(c, gl_FragColor.a);[/code:r1slkjev]

Also add in this as line 16 in the fx file:

[code:r1slkjev]uniform float lightintensity;[/code:r1slkjev]

Next, insert the xml file with this entry near the end:

[code:r1slkjev]<param>
	<name>Light Intensity</name>
	<description>Use values from 1.0 to 50.0... Default value of 1.0</description>
	<type>float</type>
	<initial>1.0</initial>
	<uniform>lightintensity</uniform>
</param>[/code:r1slkjev]

This inserts a new effect parameter known as lightintensity.

Another modification you can do is to make the 3D effect more pronounced. Just change these lines from this:

#define OFFSET_X 1
#define OFFSET_Y 1[/code:bsi7fvzi]

to this:

[code:bsi7fvzi]#define OFFSET_X 2
#define OFFSET_Y 2[/code:bsi7fvzi]

One more modification I can suggest is to make a searchlight effect emanating from the center of the screen, change the second line of code for main():

vec3 ep = vec3(iResolution.x * .5, (iResolution.y) * .5, 500.);[/code:22rflasc]

to this new version:

[code:22rflasc]vec3 ep = vec3(iResolution.x * .5, (iResolution.y) * .5, 100.);[/code:22rflasc]