Reflections with Simplex Noise
Create dynamic animated reflections using Simplex noise as a normal map with the Image Light filter.
1280 × 720
class Example extends Phaser.Scene
{
noise;
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bg', 'assets/skies/spookysky.jpg');
}
create()
{
const { width, height } = this.scale;
this.noise = this.add.noisesimplex2d({
noiseCells: [ 4, 32 ],
noiseNormalMap: true,
noiseNormalScale: 0.3,
noiseWarpAmount: 1
}, 0, 0, width, height).setRenderToTexture('noise-normal');
// Create a blank texture.
this.textures.addFlatColor('blank', width, height, 0xffffff, 1);
const bg = this.add.image(width / 2, height / 2, 'blank').setFlipY(true);
bg.enableFilters().filters.internal.addImageLight({
environmentMap: 'bg',
normalMap: 'noise-normal',
bulge: 1
});
}
update (time)
{
const t = time / 800;
this.noise.noiseFlow = t % (Math.PI * 2);
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.WEBGL,
parent: 'game-container',
width: 1280,
height: 720,
scene: Example
};
const game = new Phaser.Game(config);