Heat Haze with Simplex Noise
Apply a displacement filter to an image using a procedural Simplex Noise texture to create an animated heat haze or liquid distortion effect.
1280 × 720
class Example extends Phaser.Scene
{
noise;
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bg', 'assets/pics/space-wreck.jpg');
this.load.image('chillno', 'assets/pics/touhou1.png');
}
create()
{
const { width, height } = this.scale;
this.noise = this.add.noisesimplex2d({
noiseCells: [ 9, 9 ],
noiseIterations: 2,
noiseNormalMap: true,
}, 0, 0, width / 8, height / 8).setRenderToTexture('noise');
const bg = this.add.image(width / 2, height / 2 + 128, 'bg').setScale(1.7);
bg.enableFilters().filters.internal.addDisplacement('noise', 0.1);
this.add.image(400, height, 'chillno').setOrigin(0, 1);
}
update (time)
{
const t = time / 1000;
this.noise.noiseFlow = t % (Math.PI * 2);
this.noise.noiseOffset = [ -t, -t ];
}
}
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);