Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Mask an area of the screen?


Ninjadoodle
 Share

Recommended Posts

Hi guys

 

Is there a way to Mask an area, so only a portion of the screen is visible?

 

To be specific, I'd like to have a small window in the middle of the screen, with sprites only being visible when they move through it?

 

The only other way I can think of doing this, is a big overlay image.

 

PS. Looks like Pixi does masking, but not sure if it can be done using Panda.

 

http://www.goodboydigital.com/pixi-js-brings-canvas-and-webgl-masking/

 

Thank you in advance!

Link to comment
Share on other sites

Yes you can use masking in the Pandajs. That same example will work in the pandajs as well. But at huge performance cost on devices. So at the time being I would say that you are better off using overlay image.

 

If you are developing for desktop specific then the performance issues will be less noticeable.

Link to comment
Share on other sites

Hi @Neso

 

Thanks for the reply!

 

I tried to test it in Panda, but it doesn't seem to work ...

 

[Error] ReferenceError: Can't find variable: PIXI

init (stage16.js, line 67)
Class (core.js, line 965)
_setSceneNow (system.js, line 319)
_setSceneNow (debug.js, line 319)
(anonymous function) (core.js, line 988)
_run (system.js, line 355)
(anonymous function) (core.js, line 441)
animate (core.js, line 347)
Link to comment
Share on other sites

Hi @enpu

 

Thank you for pointing that out! I'm still getting an error tho ...

 

[Error] TypeError: undefined is not an object (evaluating 'context.save')

pushMask (pixi.js, line 10517)
_renderCanvas (pixi.js, line 13486)
_renderCanvas (pixi.js, line 2274)
_renderCanvas (pixi.js, line 2274)
_renderCanvas (pixi.js, line 2274)
renderDisplayObject (pixi.js, line 11079)
render (pixi.js, line 11010)
_render (scene.js, line 207)
_render (debug.js, line 313)
(anonymous function) (core.js, line 988)
_run (scene.js, line 136)
_run (debug.js, line 307)
(anonymous function) (core.js, line 988)
_run (system.js, line 353)
(anonymous function) (core.js, line 441)
animate (core.js, line 347)
Link to comment
Share on other sites

Hi @enpu

 

I tried this ...

 

var myMask = new game.PIXI.Graphics();

myMask.drawRect(0, 0, 200, 200);

 
tileBoxBg.mask = myMask; <- The error happens when I add this line
 
and also this ...
 
var myMask = new game.PIXI.Graphics();

myMask.drawRect(0, 0, 200, 200);

game.scene.stage.addChild(myMask);

 
tileBoxBg.mask = myMask; <- The error still happens when I add this line
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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