Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Water Ripple Effect Works But Has Ugly Flicker - Live Demo

Joncom

By Joncom,
in Pixi.js

 Share

Recommended Posts

Joncom Newbie

Joncom

Posted
Posted

Hello.

I put together a water ripple effect demo:
http://commins.ca/pixijs-ripple/

Each time you click, a new set of ripples is created.

However, a brief flash of black occurs each time a new filter is added to the stage.filters array!

But I must add the filters to this array for there to be any effect, so...

I am really doomed to have this ugly flicker? 

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Ripple</title>
    <script src="pixi.min.js"></script>
</head>
<body>
    <script>
        var stage = new PIXI.Container();
        var renderer = PIXI.autoDetectRenderer(512, 512);
        document.body.appendChild(renderer.view);  

        // load assets
        PIXI.loader
            .add("background.jpeg")
            .add("map.png")
            .load(setup);

        var ripples = [];

        function setup() {
            // background
            var bg = new PIXI.Sprite(PIXI.loader.resources["background.jpeg"].texture);
            bg.anchor.set(0.5);
            bg.scale.set(0.6);
            bg.position.set(renderer.view.width/2, renderer.view.height/2);
            stage.addChild(bg);

            // add new ripple each time mouse is clicked
            renderer.view.addEventListener('mousedown', function(ev) {
                ripples.push(new Ripple(ev.clientX, ev.clientY));
                stage.filters = ripples.map(function(f) { return f.filter; });
            }, false);

            gameLoop();
        }

        function gameLoop() {
            requestAnimationFrame(gameLoop);
            
            // update ripples
            for(var i=0; i<ripples.length; i++) {
                ripples[i].update();
            }

            renderer.render(stage);
        }

        function Ripple(x, y) {
            // sprite
            this.sprite = new PIXI.Sprite(PIXI.loader.resources["map.png"].texture);
            this.sprite.anchor.set(0.5);
            this.sprite.position.set(x, y);
            this.sprite.scale.set(0.1);
            stage.addChild(this.sprite);
            // filter
            this.filter = new PIXI.filters.DisplacementFilter(this.sprite);
        }

        Ripple.prototype.update = function() {
            this.sprite.scale.x += 0.025;
            this.sprite.scale.y += 0.025;
        }

    </script>
</body>
</html>

 

Link to comment
Share on other sites
TheBoneJarmer Newbie

TheBoneJarmer

Posted
Posted (edited)

I fear this is something inside Pixi. I know that flicker, it is black because WebGL does not recognize a texture. But don't mind those technical details. As for a solution, definitely report this to the developer of Pixi to start with. And as for that flicker hmm. I do knot know yet. I will use your code and download Pixi to see if I can solve it. ;)

EDIT:

Found no solution unfortunately. But what I did notice was that the ripple flickering appears after the first time. Because the first time no flickering appears. I do not know Pixi well enough to find a workaround but if I have to guess, this is unavoidable. Again, try contacting the pixi developer and tell him he got a bug in his image displacement shader that causes a black flickering.

Edited by TheBoneJarmer
Found some sort of solution
Link to comment
Share on other sites
  • 1 month later...
  • 2 weeks later...

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...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...