Tilde Posted June 20, 2016 Share Posted June 20, 2016 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: Link to comment Share on other sites More sharing options...
symof Posted June 20, 2016 Share Posted June 20, 2016 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 1 Link to comment Share on other sites More sharing options...
Tilde Posted June 20, 2016 Author Share Posted June 20, 2016 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); }, Link to comment Share on other sites More sharing options...
symof Posted June 20, 2016 Share Posted June 20, 2016 (edited) 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 1 Link to comment Share on other sites More sharing options...
Tilde Posted June 21, 2016 Author Share Posted June 21, 2016 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. Link to comment Share on other sites More sharing options...
symof Posted June 21, 2016 Share Posted June 21, 2016 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(); } [...] Tilde 1 Link to comment Share on other sites More sharing options...
Recommended Posts