Using Photoshop to Make Normal Maps

Phaser 3
1

I am using Photoshop (2020 version) to make normal maps for the Light2D pipeline. Everything looks good, but when rendering using the Light2D pipeline the sprite does not show up at all. I have tried regular sprites, static tilemap layers, and dynamic tilemap layers. Custom shaders work fine.

I can run the Phaser 3 examples that demonstrate Light2D, so it seems like either Phaser or WebGL does not like the normal maps made by Photoshop. I have tried using power of two textures, but that did not make a difference.

Does anyone have any ideas on why Phaser or WebGL would not like the normal maps generated by Photoshop?

2

Try generating a normal map using Photoshop based on one of the textures in the Examples repo (that has a normal map) and compare the output against one of the known working maps, i.e.:

https://github.com/photonstorm/phaser3-examples/blob/master/public/assets/textures/alien-metal.jpg

and

https://github.com/photonstorm/phaser3-examples/blob/master/public/assets/textures/alien-metal-n.jpg

What does the Photoshop normal map look like? Is it like the alien-metal-n.jpg ?

3

Thanks for the suggestion. No, the Photoshop-generated normal map does not look the same. The Photoshop-general image definitely looks like a normal map, but it is nearly 3 times larger:

flip@dunwich Downloads % ls -l alien-metal*
-rw-r--r--@ 1 flip  staff   308188 Jan 22 12:23 alien-metal-n.jpg
-rw-r--r--@ 1 flip  staff  1083078 Jan 22 12:25 alien-metal-ps.png
-rw-r--r--@ 1 flip  staff   163543 Jan 22 12:23 alien-metal.jpg

I am linking a comparison screenshot and a copy of the Photoshop-generated file.

alien-metal-ps
alien-metal-ps1024×1024 309 KB
normalmapps
normalmapps1148×605 1.02 MB

4

Experimenting some – Using a jpeg instead of png makes no difference. Applying the normal map to a dynamic tile layer results in no rendering and no console messages. Applying the normal map to a static tile layer results in the following console message:

[.WebGL-0x7fc9528f8a00]RENDER WARNING: there is no texture bound to the unit 1

Edit:
Same problem when I apply a normal map to a sprite. The image does not render at all.

Edit: again:
I have tried both of these load syntaxes:

this.load.image({
            key: 'tiles',
            url: 'image.png',
            normalMap: 'image_n.png'
        });

and

this.load.image('tiles', [ 'image.png', 'image_n.png' ]);

Edit:
This demo works for me:

However, if I change this line:
layer = map.createDynamicLayer(0, tileset, 0, 0).setPipeline(‘Light2D’);
to
layer = map.createStaticLayer(0, tileset, 0, 0).setPipeline(‘Light2D’);

then I get the same WebGL error as above:
[.WebGL-0x7fe9b2315e00]RENDER WARNING: there is no texture bound to the unit 1

Also, if I create a normal map with Photoshop (for this example), then it still works. (Although the static layer throws the error, regardless.)

Here is the Photoshop normal map for the car tile example:
drawtiles1_ps

Edit:
(Last edit for this post – I promise! :slight_smile: )

If I intentionally omit the normal map from the image load, then the console displays this message (as expected):

Normal map missing or invalid

5

Success! :partying_face:

The following directive, if placed in the game configuration, will silently make anything with the Light2D pipeline fail to render. I do not know why, but removing the width and height attributes makes the Light2D pipeline work again.

scale: {
    width: '100%',
    height: '100%'
},