Search the Community

Hello, I am new to PIXI and as a former Flash developer, I am greatly enjoying learning it, as the concepts are quite similar! ? I recently came up against a stumbling block, which I hope a kind soul here may help me resolve: I'm trying to reproduce what one sees when looking through a camera's viewfinder. In order to achieve this, I am attempting to blur only a circular portion at the center of the stage. While this works as expected when I add a single blurred container and its corresponding mask, as children of the stage, the moment I add a "crisp" (non-blurred) version of the same container, I don't get what I would expect: i.e. the blurred circular portion overlaid over the non-blurred container. Instead, the masked, blurred version gets overriden and I only see the crisp version. Building off a CodePen generously provided by OSUblake from the GreenSock forums, I put together this CodePen to illustrate the problem: https://codepen.io/montoyland/pen/zYvWLzv (Uncomment the line in question, noted in the comments, to see what I mean). What would be the proper way to achieve what I am trying to do? I have seen from examples that other filters (such as the DisplacementFilter) can be constrained to a discreet area on the canvas, so I assume the same can be done with the BlurFilter while still coexisting with other containers on the stage. What I am missing? Thank you so much for your help! Cheers! Mike

Dear members, For a project im a working on i need to make a countdown timer, for the visuals i am stuck on how to achieve it. Is there any functionality pixijs has that could achieve this: So far i have looked into the PIXI.sprite.mask but if possible i would like to achieve a radial mask or similar effect that would not require me having a spritesheet or list/array of pictures for the countdown animation.

https://gyazo.com/4a44909a40952ac6f5182d328f55d754 I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces. I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.

I am using masks for eyes in my game. I have a black background for the eye and a white pupil. The white pupil uses the black background as a mask so that when the character blinks the pupil is hidden. The issue is that my white pupil is rendered grey (if i disable the mask the pupil is rendered white which is correct). I have looked at the alpha and it is set to 1 so it does not seem to be a transparency issue. Just wondering if anyone else has had into this issue?

Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think. I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?

Hi all, I'm having a bit of a mental challenge with a request I've received. Our designer wants to be able to take a single image and animate a bunch of triangles as masks to slowly reveal the image triangle by triangle. I know I can use sprites and shapes as a mask to the image, but it only seems like I can use 1 triangle at a time as the mask. Is there a way to animate a bunch of shapes in a single sprite and use that sprite as the mask? Thanks!