Jump to content

Masking


Yora
 Share

Recommended Posts

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! 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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

  • Recently Browsing   0 members

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