Is it possible to pass a frame of a spritesheet to a filter instead of the whole sheet?

[Tilde]

I modified the sine wave filter from the examples ( http://phaser.io/examples/v2/filters/sinewave ) to create the background for this battle:

http://www.hardmodeorders.com/vandal/vandal.php

It works great, but that 256x256 texture originally comes from a sprite sheet, which I wanted to animate as it was being warped by that. Obviously, when you add more frames to the image, it's no longer a power of two, and it breaks the filter. Is there a way to reconcile this?

What you see:

What I want to use:

[symof]

http://phaser.io/examples/v2/animation/change-texture-on-click

http://phaser.io/examples/v2/animation/change-frame

http://phaser.io/examples/v2/bitmapdata/atlas

That example uses  a sprite and on click draws it into the bitmapdata. That's what you need to do also. You draw the spritefame onto a bmd and then use the bmd as a sprite.

 

[Tilde]

Thanks for the info! I'm trying and getting some weird results, no luck yet with a direct transfer. My backgrounds have blank backgroundImage, backgroundTileSprite, and backgroundBmdImage objects that I load textures onto depending on the encounter. Here is what the battle background object looks like:

create: function(gamestate) {
			//  Shader by Kali (https://www.shadertoy.com/view/4dfGDM) // I slightly modified it! ~Tilde
			
			var fragmentSrc = [

		        "precision mediump float;",

		        "uniform float     time;",
		        "uniform vec2      resolution;",
		        "uniform sampler2D iChannel0;",

		        "void main( void ) {",

		            "vec2 uv = gl_FragCoord.xy / resolution.xy;",
		            "uv.y *= -1.0;",
		            "uv.x += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);",
		            "vec4 texColor = texture2D(iChannel0, uv);",
		            "gl_FragColor = texColor;",

		        "}"
		    ];
			
		    gamestate.backgroundImage.loadTexture('mother3BG', 0);
			gamestate.backgroundImage.x = gamestate.world.centerX;
			gamestate.backgroundImage.y = gamestate.world.centerY;
			gamestate.backgroundImage.anchor.setTo(0.5);
			gamestate.backgroundImage.scale.setTo(3.6);
			gamestate.backgroundImage.fixedToCamera = true;
			gamestate.backgroundImage.visible = false;
			gamestate.backgroundImage.animations.add('natural');
			gamestate.backgroundImage.animations.play('natural', 7, true);
			var gray = game.add.filter('Gray');
			
		    var customUniforms = {
		        iChannel0: { type: 'sampler2D', value: gamestate.backgroundBmdImage.texture, textureData: { repeat: true } }
		    };

		    var filter = new Phaser.Filter(game, customUniforms, fragmentSrc);
		    filter.setResolution(900, 600);
			
		    gamestate.backgroundBmdImage.filters = [filter, gray];
		},
		getFilters: function() {
			return null;
		},
		update: function(gamestate) {
			gamestate.backgroundBmdImage.filters[0].update();
			gamestate.backgroundBmd.draw(gamestate.backgroundImage);
		},

 

[symof]

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

function preload() {

	game.load.spritesheet('sheet', './img/64x64.png', 64, 64);

}

var filter;
var sprite;
var counter = 0;
var sheet;
var fragmentSrc = [

        "precision mediump float;",

        "uniform float     time;",
        "uniform vec2      resolution;",
        "uniform sampler2D iChannel0;",

        "void main( void ) {",

            "vec2 uv = gl_FragCoord.xy / resolution.xy;",
            "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(iChannel0, uv);",
            "gl_FragColor = texColor;",

        "}"
    ];
    
function create() {
	
	
	sheet = game.add.sprite(0, 0, 'sheet');
	sheet.frame = 0; //Character idle imagecharacter.frame = 1; //Character jump image
	
	sprite_bmd = game.make.bitmapData(64, 64);
	game.add.image(0, 0, sprite_bmd);
	sprite_bmd.draw(sheet, 0, 0);
	
	
	//  Shader by Kali (https://www.shadertoy.com/view/4dfGDM)
	//  Texture must be power-of-two sized or the filter will break
	sprite = game.add.sprite(0, 0, sprite_bmd);
	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);

	sprite.filters = [ filter ];
    
	game.input.onDown.add(changeFrame, this);

}

function update() {

	filter.update();

}

function changeFrame() {
	
	if (counter <4){
		counter ++;
	}else{
		counter = 0;
	}
	
	sheet.frame = counter;
	sprite_bmd.draw(sheet, 0, 0);
	
    //  Texture must be power-of-two sized or the filter will break
	sprite = game.add.sprite(0, 0, sprite_bmd);
	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);

	sprite.filters = [ filter ];
}

The code works... sometimes... 

 

game.load.spritesheet('sheet', './img/64x64.png', 64, 64); this file is a sprite sheet with 64 by 64 sprites, on click the change frame changes the sprite frame.

Edited June 21, 2016 by symof
Cleaned up the code.

[Tilde]

I cannot for the life of me figure out why it turns into a giant, thinly-stretched column upon exiting frame 1. Even if I set its initial frame to 4 or something and I tell it not to update frames and then apply the filter, it works fine.

I also can't figure out how to get the texture to cleanly connect to its edges in the same way before I used a bmd...but at least this is closer.

[symof]

Maybe it's linked to this topic:

Or there could be a problem with the way the whole program is set up. It seems to work more reliably when I changed the update function to render instead. So it might be some issues with how filters does the update?

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, render: render });

[...]

function render() {

	filter.update();

}

[...]