Jump to content

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

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

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...