Pixi.js and Phaser Displacement Filter

[jjwallace]

Having trouble implimenting Pixi in Phaser.

However i run into this problem below.  Files are located all correctly including core and abstractfilter and displacement filter.

Uncaught ReferenceError: require is not defined(anonymous function) @ VM10606:1c.Loader.fileComplete @ phaser.js:74078c.Loader.xhrLoad.f.onload @ phaser.js:73590

Any Clues?

I am using this forum for reference: 

 

[jjwallace]

The console points me to this code but everything is in the correct places:

var core = require('../../core');
// @see https://github.com/substack/brfs/issues/25
var fs = require('fs');

/**
 * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
 * You can use this filter to apply all manor of crazy warping effects
 * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.
 *
 * @class
 * @extends PIXI.AbstractFilter
 * @memberof PIXI.filters
 * @param sprite {PIXI.Sprite} the sprite used for the displacement map. (make sure its added to the scene!)
 */
function DisplacementFilter(sprite, scale)
{
    var maskMatrix = new core.Matrix();
    sprite.renderable = false;

    core.AbstractFilter.call(this,
        // vertex shader
        fs.readFileSync(__dirname + '/displacement.vert', 'utf8'),
        // fragment shader
        fs.readFileSync(__dirname + '/displacement.frag', 'utf8'),
        // uniforms
        {
            mapSampler:     { type: 'sampler2D', value: sprite.texture },
            otherMatrix:    { type: 'mat3', value: maskMatrix.toArray(true) },
            scale:          { type: 'v2', value: { x: 1, y: 1 } }
        }
    );

    this.maskSprite = sprite;
    this.maskMatrix = maskMatrix;

    if (scale === null || scale === undefined)
    {
        scale = 20;
    }

    this.scale = new core.Point(scale, scale);
}

 

[jjwallace]

Was able to clear all my errors however i still see no filter.

[jjwallace]

Here is my CODE

//PRELOAD
        this.load.script('abstracFilter', 'lib/filter/AbstractFilter.js');
        this.load.script('displacementFilter', 'lib/filter/pixi/DisplacementFilter.js');

//ON CREATE
var displacementTexture = PIXI.Texture.fromImage("assets/img/displacement_map.jpg");    
        displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

//UPDATE
countDisplace = 60;
        displacementFilter.offset.x = countDisplace * 10;
        displacementFilter.offset.y = countDisplace * 10;
        
        this.filter = [displacementFilter];

 

[jjwallace]

Filter working! but now there is a conflict error with BaseTexture

[jjwallace]

TypeError: texture.baseTexture.on is not a function {stack: (...), message: "texture.baseTexture.on is not a function"}

1. message: "texture.baseTexture.on is not a function"
2. stack: (...)
3. get stack: function () { [native code] }
4. set stack: function () { [native code] }
5. __proto__: Error

[stein]

Hello, Is there any update about this problems? I'm getting same problems texture.baseTexture.on is not a function

Also can anyone provide me an example how to using this displacement function? with mouse move event will be great.

Thanks