jjwallace Posted March 9, 2016 Share Posted March 9, 2016 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: Link to comment Share on other sites More sharing options...
jjwallace Posted March 9, 2016 Author Share Posted March 9, 2016 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); } Link to comment Share on other sites More sharing options...
jjwallace Posted March 11, 2016 Author Share Posted March 11, 2016 Was able to clear all my errors however i still see no filter. Link to comment Share on other sites More sharing options...
jjwallace Posted March 11, 2016 Author Share Posted March 11, 2016 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]; Link to comment Share on other sites More sharing options...
jjwallace Posted March 22, 2016 Author Share Posted March 22, 2016 Filter working! but now there is a conflict error with BaseTexture Link to comment Share on other sites More sharing options...
jjwallace Posted March 26, 2016 Author Share Posted March 26, 2016 TypeError: texture.baseTexture.on is not a function {stack: (...), message: "texture.baseTexture.on is not a function"} message: "texture.baseTexture.on is not a function" stack: (...) get stack: function () { [native code] } set stack: function () { [native code] } __proto__: Error Link to comment Share on other sites More sharing options...
stein Posted May 9, 2017 Share Posted May 9, 2017 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 Link to comment Share on other sites More sharing options...
Recommended Posts