Loading Images with Normal Maps
Learn how to load an image with an associated normal map and use dynamic lighting to create depth and shadow effects that react to a moving light source.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image({
key: 'robot',
url: 'assets/pics/equality-by-ragnarok.png',
normalMap: 'assets/normal-maps/equality-by-ragnarok_n.png'
});
}
create ()
{
this.add.image(-300, 0, 'robot').setOrigin(0).setLighting(true);
const light = this.lights.addLight(0, 0, 200);
this.lights.enable().setAmbientColor(0x555555);
this.input.on('pointermove', pointer =>
{
light.x = pointer.x;
light.y = pointer.y;
});
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.WEBGL,
width: 800,
height: 600,
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);