Masking

[Yora]

I'm trying to create a scrolling texture visibly limited to a square area.  I'm trying to get it to work by following this example: http://www.goodboydigital.com/pixijs/examples/14/  but I'm wondering if I might be working with some outdated code here as I can only get this masking example working with the pixi.dev.js version used here.  Trying to get any masking interaction with the version of Pixi being used in Phaser keeps running me into problems, though it could be entirely my own fault using things incorrectly.

 

The example code will work on its own, but when also loading the phaser.js script in the document I've ran into problems.  At the moment, I'll get this error:  Uncaught TypeError: undefined is not a function at the third line of code that is ran in my preloader:

                this.loaderEmpty = this.add.sprite(this.game.world.centerX, 285, 'loaderEmpty');        this.preloadBar = this.add.sprite(this.loaderEmpty.x - this.loaderEmpty.width/2, 285, 'loaderFull');        this.loaderEmpty.anchor.setTo(0.5, 0); // This line gives the error

or other problems when I was trying to get this to work earlier.  I'd appreciate any help in understanding what's going wrong here, thanks! 

[Pedro Alpera]

Have you seen this example in "Phaser Examples" about masking?:

 

http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask

[Yora]

Have you seen this example in "Phaser Examples" about masking?:

 

http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask

 

I had given this a try too, but got the impression that I couldn't use it for the scrolling background I'm going for. It seems to create a brand new texture according to the mask rather than allow me to pan an object around behind a mask.  

 

Unless I should be calling 'bmd.alphaMask('pic', 'mask')' in the update along with the scrolling of my image to create the new texture every update?  My #1 concern with something like that would be whether or not it weighs on performance.

[Pedro Alpera]

For a scrolling background I think it could be better to use tile sprite http://examples.phaser.io/_site/view_full.html?d=tile%20sprites&f=animated+tiling+sprite.js&t=animated%20tiling%20sprite

[valueerror]

i needed to place a circle mask over my whole game stage and scale it down over the exact player position when a level was finished.. after an hour trying to create a rendertexture out of the current camera view (which works - even in the update loop without noticable performance loss) and then create an alpha mask out of it (which doesnt because this function eats only "real" images) i gave up, created a black png with a transparent hole in the middle and now when i need the mask i add this as a new sprite, position it over the player and scale it down smoothly in the update function..

it seems blunt but maybe this would be the easiest way to go for you too? you can test it here.. http://test.xapient.net/phaser/ALL/ finish a level