JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://examples.phaser.io/_site/phaser/phaser.2.6.2.min.js"></script>
<script src="https://examples.phaser.io/_site/phaser/phaser.2.6.2.min.js"></script>
<div id="game"></div>
JavaScript
// Camera shake bug? see line 37
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', {preload: preload, create: create});
function preload() {
game.load.crossOrigin = 'anonymous';
game.load.image('texture', 'https://examples.phaser.io/assets/pics/alex-bisleys_horsy_512x512.png');
}
var filter;
var sprite;
function create() {
var fragmentSrc = [
"precision mediump float;",
"uniform vec2 resolution;",
"uniform sampler2D iChannel0;",
"void main(void) {",
"vec2 uv = gl_FragCoord.xy / resolution.xy;",
"uv.x += sin(uv.y * 3.5);",
"gl_FragColor = texture2D(iChannel0, uv);",
"}"
];
sprite = game.add.sprite(0, 0, 'texture');
sprite.width = 800;
sprite.height = 600;
var customUniforms = {
iChannel0: { type: 'sampler2D', value: sprite.texture, textureData: { repeat: true } }
};
filter = new Phaser.Filter(game, customUniforms, fragmentSrc);
filter.setResolution(800, 600);
// Commenting out the line below causes shake to work
sprite.filters = [ filter ];
game.camera.shake(0.05, 5000);
}