Introducing Beam — Play & Create Interactive Video Shorts. Explore Beam →
var CustomPipeline2 = new Phaser.Class({ Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline, initialize: function CustomPipeline2 (game) { Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, { game: game, renderer: game.renderer, fragShader: [ "precision mediump float;", "uniform float time;", "uniform vec2 resolution;", "uniform sampler2D uMainSampler;", "varying vec2 outTexCoord;", "void main( void ) {", "vec2 uv = outTexCoord;", "//uv.y *= -1.0;", "uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);", "vec4 texColor = texture2D(uMainSampler, uv);", "gl_FragColor = texColor;", "}" ].join('\n') }); } }); var config = { type: Phaser.AUTO, parent: 'phaser-example', width: 800, height: 600, backgroundColor: '#000000', scene: { preload: preload, create: create, update: update } }; var time = 0; var game = new Phaser.Game(config); function preload () { this.load.image('volcano', 'assets/pics/rick-and-morty-by-sawuinhaff-da64e7y.png'); this.load.image('hotdog', 'assets/sprites/hotdog.png'); customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline2(game)); customPipeline.setFloat2('resolution', game.config.width, game.config.height); } function create () { this.add.image(400, 300, 'volcano'); this.add.image(400, 300, 'hotdog').setScrollFactor(0); this.cameras.main.setRenderToTexture(customPipeline); var cursors = this.input.keyboard.createCursorKeys(); var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, acceleration: 0.06, drag: 0.0005, maxSpeed: 1.0 }; controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig); } function update (t, delta) { controls.update(delta); customPipeline.setFloat1('time', time); time += 0.005; }
var CustomPipeline2 = new Phaser.Class({
Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
initialize:
function CustomPipeline2 (game)
{
Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
game: game,
renderer: game.renderer,
fragShader: [
"precision mediump float;",
"uniform float time;",
"uniform vec2 resolution;",
"uniform sampler2D uMainSampler;",
"varying vec2 outTexCoord;",
"void main( void ) {",
"vec2 uv = outTexCoord;",
"//uv.y *= -1.0;",
"uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);",
"vec4 texColor = texture2D(uMainSampler, uv);",
"gl_FragColor = texColor;",
"}"
].join('\n')
});
}
});
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#000000',
scene: {
preload: preload,
create: create,
update: update
}
};
var time = 0;
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('volcano', 'assets/pics/rick-and-morty-by-sawuinhaff-da64e7y.png');
this.load.image('hotdog', 'assets/sprites/hotdog.png');
customPipeline = game.renderer.addPipeline('Custom', new CustomPipeline2(game));
customPipeline.setFloat2('resolution', game.config.width, game.config.height);
}
function create ()
{
this.add.image(400, 300, 'volcano');
this.add.image(400, 300, 'hotdog').setScrollFactor(0);
this.cameras.main.setRenderToTexture(customPipeline);
var cursors = this.input.keyboard.createCursorKeys();
var controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}
function update (t, delta)
{
controls.update(delta);
customPipeline.setFloat1('time', time);
time += 0.005;
}