Jump to content

PIXI masks in hierarchy


CraigBall
 Share

Recommended Posts

I've got an odd issue with multiple masks in the hierarchy.

When I apply a mask to a container, if any sub containers contain masks, the sub container masks appear to move with the parent mask.

I expected the sub container mask to remain stationary as I move the parent mask.

NOTE: This doesn't happen with older versions of PIXI - this works as I expected with version 3.0.2. The version of PIXI I see this on is version 4.0.3.

Here's the sample code I've used.

- cat.png is the background image
- graphics is the stationary sub container mask
- horse.png is the mask I am moving around

Thanks.

 

Craig

 

<html>
<head>
   <title>Mask Issue</title>
   <script src="pixi.js"></script>

</head>
<body>

   <script>
   
   var gameContainer = new PIXI.Container();
   var renderer = PIXI.autoDetectRenderer(800, 600);
   document.body.appendChild(renderer.view);

   var subContainer = new PIXI.Container();
   gameContainer.addChild(subContainer);

   var cat = new PIXI.Sprite.fromImage("cat.jpg");
   subContainer.addChild(cat);

   var graphics = new PIXI.Graphics();
   graphics.beginFill(0xFFFFFF, 1);
   graphics.drawRect(50, 50, 200, 200);
   graphics.endFill();
   subContainer.mask = graphics;
   subContainer.addChild(graphics);

   var horse = new PIXI.Sprite.fromImage("horse.png");
   gameContainer.mask = horse;
   gameContainer.addChild(horse);

   requestAnimationFrame(animate);

   function animate(time)
   {
      requestAnimationFrame(animate);
      var radian = Math.PI * 2 * time / 1000;
      var radius = 100;
      horse.position.set(radius + Math.sin(radian) * radius, radius - Math.cos(radian) * radius);

       renderer.render(gameContainer);
   }
   </script>

   </body>
</html>
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...