Mask an area of the screen?

[Ninjadoodle]

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!

[Neso]

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.

[Ninjadoodle]

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)

[enpu]

PIXI variable is inside game object, so try game.PIXI

[Ninjadoodle]

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)

[enpu]

Can you show your code?

[Ninjadoodle]

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

[enpu]

var logo = new game.Sprite('logo.png').addTo(this.stage);var mask = new game.Graphics();mask.drawRect(0, 0, 300, 300);mask.addTo(this.stage);logo.mask = mask;

This is working for me.

 

Make sure your mask position is same as the sprite

[Ninjadoodle]

Hi @enpu

 

I think the error is happening because I'm trying to add a mask to a 'Tiling Sprite'.

 

I've tried adding the mask to a normal sprite and it seems to work.

 

Is there another way to mask a Tiling Sprite?

[enpu]

Oh well then it must be issue with Pixi.

 

Pixi v3 should be released soon, so hopefully it's fixed there.

[enpu]

I would replace TilingSprite with Sprites and put them in Container and then mask that.

[Ninjadoodle]

Thank for the help @enpu

 

It's all good, at least I know what's causing it