Sign in to follow this  
clifftm

Pixi.js Sprite and Mask

Recommended Posts

Hello again.

Please help me , how to proper use a mask inside a sprite. I'v made a codepen https://codepen.io/clf/pen/NzQgbg , when mask is on and object is moving, his borders starts twitching. But If i disable mask the object moves correctly.

So what i do wrong? How to move object with mask without shaking his border? And is it possible to make moving more smoothly (setting antialias:true in options make it moving much better, but i don't know is it a proper way)?

Thanks😃

Share this post


Link to post
Share on other sites

I'm searching for about 12 hours to find proper way of simple operation - give a rectangle mask to a sprite, and move it with that mask from left to right without any distortions.

  1. if i use Sprite as Mask instead of graphics https://codepen.io/clf/pen/PaMJjM  i'v got no shaking at borders, but turn it on\off makes first sprite to look brightly\darkness, because parent alpha is applying to mask 
  2. If i put Sprite and Mask(Sprite) inside a container and move it https://codepen.io/clf/pen/rKXYdP , then all works as expected, (except antialiasing workaround of wich i will search later).
  3. If i add a blur filter to a sprite or container https://codepen.io/clf/pen/OEKOdx ,then distortions appears again, and turn on\off mask in that example blow my mind... what's happening?

So I can't put mask directly on sprite, and can't use graphics as mask, and can't use AA or Filters when want masked object?

Really, i'm trying to understand a simple things but nothing comes out...

I'v read:

  • https://github.com/pixijs/pixi.js/issues/3266 , where you said 
    Quote

    Theoretically, you can make a sprite mask, where the sprite is AA-ed graphics made from canvas with js Texture.fromCanvas(...), that'll work.

    But look at example 3 (https://codepen.io/clf/pen/OEKOdx) any filter brokes movement

  • where Bubamara said 

    Quote

    solution could be not using graphics at all. you can :

    - draw rectangle on canvas and make texture from it, then apply to sprite

    - use spritesheets as textures for rectangles (preffered, as this is faster in WebGL)

    ok. i'm going to 2d way and use PIXI.Sprite(PIXI.Texture.WHITE), and have the same troubles

  • in your fix of https://codepen.io/anon/pen/ZbVgEO?editors=0010 you add lines to a container

    Quote

      this.getLocalBounds = function() {
        return new PIXI.Rectangle(-2, -2, this.size+4, this.size+4);
      };
      this.cacheAsBitmap=true

    so as i understand the graphic rectangles in that container cached as "textures" and you increase bounds for animation to avoid jigglings, but in that example rectangles don't use masks

  • For AA most of users advises not to use {antialias:false}, because it supported only in Chrome and have performace issues. And as you said it doesn't works with masks. i'v tried {forceFXAA:true}, and stage.filters[new PIXI.filters.FXAAFilters()] with crutch of PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH; and nothing helps me to equal an issue.

  • and the last your advise is to look at pixi-display and learn how  https://pixijs.io/examples/#/layers/lighting.js example works and explore sources of getRenderTexture.

I wonder, that for a SIMPLEST task to make SPRITE with MASK and force it to move smoothly from x1 to x2 there is NO ways to achive that for a newbie as me =(

 

Share this post


Link to post
Share on other sites
var app = new PIXI.Application();
document.body.appendChild(app.view);

app.stage.interactive = true;

var left = new PIXI.Sprite(PIXI.Texture.WHITE);
left.width = 400;
left.height = 600;

var right = new PIXI.Sprite(PIXI.Texture.WHITE);
right.x = 400;
right.width = 400;
right.height = 600;


var maskG = new PIXI.Graphics()
//maskG.lineStyle(1,0xFF0000) <- TRY TO UNCOMMENT TO SEE DIFF
maskG.beginFill(0x555555)
maskG.drawRect(0, 0, 100, 100)    //<- COMMENT THIS
//maskG.drawRect(300, 0, 100, 100)  <- AND TRY THIS TO SEE DIF IN Y POS
maskG.endFill()

var maskS = new PIXI.Sprite(PIXI.Texture.WHITE);
maskS.y = 0;
maskS.x = 400;
maskS.width = 100;
maskS.height = 100;


left.mask = maskG;
right.mask = maskS;
app.stage.addChild(maskG,maskS,left,right);

app.ticker.add(function() {

    maskG.x += 0.1;
    maskG.y += 0.1;
  
    maskS.x += 0.1;
    maskS.y += 0.1;


});

Paste that example here https://pixijs.io/examples/#/demos/alpha-mask.js and look at the difference. Left mask is jiggling while moving, but if you uncomment maskG.lineStyle(1,0) that distortions will dissapear.

And another thing - sprite mask position offset up than graphics for about 1 px. As i understand it's possible not to add Graphic mask on the stage.addChild(), but i have to add sprite, so an example works identically with this:

app.stage.addChild(maskS,left,right);
// vs
app.stage.addChild(maskG,maskS,left,right);

So it's not clear for me, what mask is better to use? "For the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as a mask" - is that actual information?

I like how squares moves in that example https://codepen.io/anon/pen/ZbVgEO?editors=0010, but if you try change version from 3.0.6 to 4.x that lines wont work together

  this.getLocalBounds = function() {
    return new PIXI.Rectangle(-2, -2, this.size+4, this.size+4);
  };
  this.cacheAsBitmap=true;

Look how that example works in 4.8.1 and in 5.0.0 https://codepen.io/clf/pen/Yvmovy without that lines. Is it possible to make exactly same behavior in 4.8.1 ?

I feel that devgroup concentrated on 5.0.0, and understand that implement 2 fixes in two branches is difficult, so another question : should i use 5.0.0 or it contains more bugs then 4.8.1, does 5.0.0 have backward compatibility with 4.8.1 (because i want to use DragonBonesJS wich has only 4.x PIXI support)?

Share this post


Link to post
Share on other sites

Ok. nobody want's to help with upper issue. I will post another:

Look at example in codepen https://codepen.io/clf/pen/RJXXqM :

So in that example - we have 2 containers red and yellow. Each of them contains two pixi sprites - background sprite (red 100x100 or yellow 80x80) and mask sprite (100x100 for red sprite, and 80x80 for yellow). Yellow container is a child of red container.

In v4 the result looks like this  

1.PNG.5b71b39b334248e6a908bdf263d6efeb.PNG

but in V5 the result looks like this:

2.PNG.6e077d0ed8ce37118a6a3b8ce50e18d6.PNG

You can press "<<" and ">>" buttons to move red square from 100x100 to 0x0 position, and see very very strange result. Notice, if you click on yellow "v4" area in v5 version, the mouse events will dispatch in proper bounds at same time.

Is that a bug or  "you are a stupid! read the sources"(c)?

Share this post


Link to post
Share on other sites

Yep, that's v5 bug. Probably connected to https://github.com/pixijs/pixi.js/issues/4941 , something is wrong with graphics bounds. Its better to post it in issues too!

> Is that a bug or  "you are a stupid! read the sources"(c)? 

Now you've got it! :) Welcome to pixi contributors club !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.