Sign in to follow this  
Tilde

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

Recommended Posts

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:

mother3.png

What I want to use:

mother3anim.png

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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);
		},

 

Share this post


Link to post
Share on other sites
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 by symof
Cleaned up the code.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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();

}

[...]

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.