Search the Community

Hi, I'm on Pixi current days. I was so amazed when I saw this animation : https://art4globalgoals.com/en So, I tried to clone the brush masking effect. I succeed to make a mask, make brush effect. The problem is that, I can't remove current brush sprite. I tried to console log my app, stage, renderer, but I can't find where my sprite is registered (sorry for the terminology, Im wondering im using right terminology).... Also, is there any way to trigger dragging event? , above the link, there seems to appear brush scratch effect automatically, but is there any idea about this? ```` import * as PIXI from 'pixi.js'; import { Point } from '@pixi/math'; const screenSize = { width: window.innerWidth, height: window.innerHeight }; let brushWidth = (window.innerHeight / window.innerWidth) * 150; let brushHeight = (window.innerHeight / window.innerWidth) * 200; const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio, autoDensity: true }); document.body.appendChild(app.view); app.loader .add('background', '/jpeg/mask.jpeg') .add('mask', '/png/effel-gray.png') .add('bristle1', '/png/brush6.png') .add('bristle2', '/png/bristle2.png') .load(() => { setup(); }); const setup = () => { const brushTexture = app.loader.resources.bristle1.texture; const brush = new PIXI.Sprite(brushTexture); brush.width = brushWidth; brush.height = brushHeight; brush.anchor.set(0.5,0.5); const backgroundTexture = app.loader.resources.background.texture; const maskTexture = app.loader.resources.mask.texture; const background = new PIXI.Sprite(backgroundTexture); background.x = app.renderer.screen.width / 2; background.y = app.renderer.screen.height / 2; background.anchor.x = 0.5; background.anchor.y = 0.5; background.width = window.innerWidth; background.height = window.innerHeight; const mask = new PIXI.Sprite(maskTexture); mask.width = app.renderer.screen.width; mask.height = app.renderer.screen.height; mask.x = app.renderer.screen.width / 2; mask.y = app.renderer.screen.height / 2; mask.anchor.x = 0.5; mask.anchor.y = 0.5; mask.width = window.innerWidth; mask.height = window.innerHeight; app.stage.addChild(mask); app.stage.addChild(background); const renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height); const renderTextureSprite = new PIXI.Sprite(renderTexture); app.stage.addChild(renderTextureSprite); background.mask = renderTextureSprite; app.stage.interactive = true; app.stage.on('pointerdown', pointerDown); app.stage.on('pointerup', pointerUp); app.stage.on('pointermove', pointerMove); let dragging = false; const originVector = new Point(1, 0); let vector; function pointerMove(event) { if (dragging) { brush.position.copyFrom(event.data.global); const originPos = { x : event.data.global.x - window.innerWidth / 2, y : -(event.data.global.y - window.innerHeight / 2) } const vx = originPos.x; const vy = originPos.y; vector = new Point(vx, vy); vector = normalizeVector(vector); const dotProd = (vector.x * originVector.x) + (vector.y * originVector.y); const angle = Math.acos(dotProd); const rotationMatrix = new PIXI.Matrix() rotationMatrix.rotate(angle); brush.rotation = angle; app.renderer.render( brush, { renderTexture, clear: false }, false, null, false ); } } function pointerDown(event) { dragging = true; pointerMove(event); } function pointerUp(event) { dragging = false; brush.width = brushWidth; console.dir(app.renderer) app.renderer.managedTextures[4].destroy(); } window.addEventListener('resize', () => { screenSize.width = window.innerWidth; screenSize.height = window.innerHeight; app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.stage.width = window.innerWidth; app.renderer.stage.height = window.innerHeight; }); }; const getMagnitude = (x , y) => { return Math.sqrt(x*x + y*y); } const normalizeVector = (vector) =>{ const magnitude = getMagnitude(vector.x , vector.y); vector.x /= magnitude; vector.y /= magnitude; return vector; } `````

I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value. second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency. third solution was to integrate cursor inside my canvas. last solution I tried to split actions into 2 canvas. The first deals with image processing and the second is my cursor. With all propositions made before I got loss of FPS when canvas is hovered excepted the first one. Init canvas for cursor update when mouse hover it function _initMainCanvas(imgData) { let newCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); let blurContainer = new PIXI.Container(); filters.initFilters(); // ---------------------------------------------------------------------------------------- // Normal Sprite // ---------------------------------------------------------------------------------------- let bg = main.createSprite({ from: imgData.img, interactive: true, filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()], width: imgData.width, height: imgData.height }); newCanvas.stage.addChild(bg); //$(".blur_cursor").remove(); // ---------------------------------------------------------------------------------------- // Blur Sprite // ---------------------------------------------------------------------------------------- let bgBlured = main.createSprite({ from: imgData.img, interactive: false, filters: filters.getFilters(), width: imgData.width, height: imgData.height }); blurContainer.addChild(bgBlured); blurContainer.mask = containers.getBlurs(); newCanvas.stage.addChild(blurContainer); newCanvas.stage.addChild(blurContainer); select.initSelectionRect(); newCanvas.stage.addChild(select.getSelectionRect()); canvas.addMainCanvas(newCanvas); document.getElementById("container").appendChild(newCanvas.view); } Init canvas for cursor update when mouse hover it function _initCursorCanvas(imgData) { let cursorCanvas = new PIXI.Application({ width: imgData.width, height: imgData.height, transparent: true }); _fillCursorCanvas(cursorCanvas); canvas.addCursorCanvas(cursorCanvas); document.getElementById("container").appendChild(cursorCanvas.view); } function _fillCursorCanvas(cursorCanvas) { // emptySprite allows to bind events let emptySprite = new PIXI.Sprite(); emptySprite.interactive = true; emptySprite.width = cursorCanvas.screen.width; emptySprite.height = cursorCanvas.screen.height; cursorCanvas.stage.addChild(emptySprite); emptySprite .on("pointerdown", canvasEvents.handlerMousedown) .on("pointerup", canvasEvents.handlerMouseup) .on("pointermove", canvasEvents.handlerMousemove) .on("pointerout", canvasEvents.handlerMouseout); const scale = W / canvas.getWidth(); const cursorTexture = new PIXI.Texture.from( urlManager.replace("index.php/", "") + "assets/images/cursor_img/50.png" ); let circle = new PIXI.Sprite(cursorTexture); circle.width = 50 / scale; circle.height = 50 / scale; cursorCanvas.stage.addChild(circle); } Mousemove event const x = e.data.global.x; const y = e.data.global.y; cursor.updatePosition(x, y, W); Sorry I can't show you an example like codesandbox because my browser but my browser was not responding. However I can send you github repo if you want. Will anyone know how to optimize FPS on mouse flying, thank you in advance !

Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is the position and size of a graphic which is used for masking the text below it. As a graphic, the mask(white rectangle) appears small. However when applied to the text behind, it appears bigger and position also changes.

Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between) nothing major probably 2-3 layers at max. The game is for mobile and file sizes have got to be as low as possible. The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images. png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080) but maybe extending it to a square 2k, then using that with alpha masks from (colourless pngs) as an alternative (if that makes sense). I thought this way I could drop the size of the jpg more without as much degradation as a png would have (& have finer control). Hoping the colourless pngs wouldn't make as big of a hit essentially just being an alpha map.. Sounds a long way around a small problem, just theorizing atm & wondering if anyone had tried anything similar, noticed any peformance hits using masks v png or even found a nicer alternative? Cheers for any advice!

Is it possible to use a "stroke" as a mask?

Hi there. First, I'm trying to make an FB Leader board like this image https://prnt.sc/owv7q4. I captured it from Caro - an instant game. And I'm new in Phaser 3. I know how to create circle image by using mask. But my problem is i can't use mask for a child in a container. I spent whole day to search solution on GG Let me tell you how i make Leader board. I use greate UI plugin of Rex, Scroll panel contains a sizer, that sizer contain many containers as row of rank. In container i want to create an circle image and i didn't success with mask Then i changed my solution to using sizer instead of container. Failed again. Please help me find better solution. If i need to post my code here, please tell me. Thanks so much

Hey I am trying to build a round minimap. I do not want to duplication rendering of all game objects, so I decided to add a second Camera. My Issue: Is there any way to get the Camera Object in a round shape? The game is an endless generated Map getting chunk data from a nodejs server. So the minimap should stay quite flexible. A camera fits my needs but the shape issue still exists. I would appreciate help a lot

I've found some strange behavior in interactivity events of display object inside a masked container. Not sure if this is a bug or just a questionable decision; anyway, it poses some problems. Generally interactive display objects receives events such as "pointermove" or "pointerupoutside" at any time, whether pointer is over them or not. Same applies to masked display objects, by the way. But if you place an interactive display object inside a masked container, events fire only when pointer is over masked area. All events, including "pointerupoutside", so there's no way to keep track of pointer position and button state. Look at this codepen. Have anyone faced this problem? I guess I can assign event listeners to the stage container or nearest parent without mask, and it will probably work, but seems a little bit dirty to me. Is there a better solution?

I am using PIXIJS Canvas Renderer and trying to apply a graphics polygon as mask in a sprite. When add graphics polygon as sprite.mask, i am getting blank canvas. Am i missing something or its just stupid idea? JSFiddle code: https://jsfiddle.net/Lk2fjmn3/8/

Hello everyone, I have a project with Phaser and I'm stuck. I need your help. I have two layers (images) and I want to erase the first layer with the user's action (I do not want to destroy it). I have tried this with the masks but I do not know how to make the mask dynamically drawn by the player. I do not know if you understand me. I'm not good at English. Any clue how can I do this effect? I included an image.

Hi guys, I'm facing a problem.I have a leaderboard .The profile pic in those should be rounded masked.So I put mask for all profile pics.But when i scroll leaderboard ,masks are not moving with respect to their sprite.Please help guys.Its urgent

Hi all, I need to display a large image and dynamically hide sections of it. I already use masking to specify which parts should be displayed. The code I use to achieve this is in the form: this._topMask = game.add.graphics(0, 0); this._topMask.drawRect(0, 170, game.width, vm.ActiveGameHeight - 320); this.defaultGroup.mask = this._topMask; This is useful in that it gives me a rectangle within which the image renders. Now I need to dynamically block sections of that rectange and create areas that are not rendered. Ideally, I would like to be able to create masks similar to the image below. I cannot use presaved images because the position of the rectangles change dynamically. What is the most performance optimised way to achieve this in Phaser? (I am on version 2.4.4)

I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html

Good afternoon, I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen color(Sort of like drawing a mask) all the area's that a character can walk and find a path to and from. What I am trying to achieve in my code is the same principle above and I am trying to use easystar and Phaser to accomplish this. Let me explain my code: I have three images: the 'background' image which will load up the image of the room the character will be in. 'walkablepath' will be the image that contains the image mask. Anything that is hot pink is where the character can walk. 'maincharacter' is the player character that will find the path when we click on a part of the screen we want the player to go to. At start we will create a 'bmd' object, create the walkable grid and then destroy the bmd object. The 'bmd' object is what will hold the walkable mask information. It will match the same size as the room image. It will have complete transparency and will be overlaid over the background image, but not visible to the user. 'walkableGrid' will be the grid data that easystar will use to calculate the walkable paths. 'walkableRGB' will contain the RGB value of Hot Pink so that we can find the hot pink pixels. 'gridCollection' will collect the X and Y pixel data in the 'bmd' object and push it to the 'walkableGrid' as it goes through each pixel line from top to bottom. The code will do this by iterating through each X and Y pixel in a loop. After that is completed, the mask will be destroyed, easystar will have a setup to determine the acceptable tiles in the grid. Function calculateWalkPath() will be called each time the user clicks on the screen and the game will try and calculate the path for the user to walk and move him to his destination. Please see the code below: //Set the initial game paramters - Will start with 800x600 resolution and will use WebGL as a renderer and default back to Canvas if WebGL is not present. var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update}); var easystar = new EasyStar.js(); //Lets get easy star in here. var bmd; //This will be the object that will take the pixel data of the scene. //Assets that will be preloaded at start function preload(){ game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded. game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area. game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room. } //The first function called when we start our game function create(){ //We are going to obtain the width and height of the background room. var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height; bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path. game.add.sprite(0,0,'background'); // Will add the room background to the desktop. It will place the upper left part of the image to the upper left part of the screen. bmd.alpha = 0; //Let's make sure the image is completely invisible to the users eyes. bmd.draw('walkablepath', 0, 0); //Will overlay the transparent walkable path over the background image. var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points. var gridCollection; //This will collect the 2 dimensional array grids and push it to the walkableGrid. var walkableRGB = "255105180"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color //Following code will begin at the top left corner of the walkable area and check each pixel for the hot pink color. If it finds it, it will add a 0. If not, 1. for (i = 0; i < backWidth; i++) { gridCollection = "["; for (j = 0; j < backWidth; j++) { if (bmd.getPixelRGB(i, j) == "255105180"){ gridCollection = gridCollection + "0"; } else { gridCollection = gridCollection + "1"; } //If there is still more width in the image, it will add a comma. Otherwise it won't and the array can be closed off. if (j != backWidth) { gridCollection = gridCollection + ","; } } //Close up and then Push the Array to the walkable grid gridCollection = gridCollection + "]"; walkableGrid.push(gridCollection); } bmd.kill(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process. easystar.setGrid(walkableGrid); //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid. easystar.setAcceptableTiles([0]); //Let's also make sure that easy star is aware that the 0 tiles are the tiles that the player can walk on. } function update(){ } function calculateWalkPath() { //This function will be called every time the user clicks on a path to walk to. //Now let's calculate the path and presumably use tweening to move the character from it's current x and y position to it's next calculated position easystar.findPath(xClickDest, yClickDest, playerXpos, playerYpos, function( path ) { if (path === null) { //Do something like a shrug animation from the character for not being able to find a path. } else { game.add.tween(maincharacter).to( { x: path[0].x }, 2000, Phaser.Easing.Linear.None, true); game.add.tween(maincharacter).to( { y: path[0].y }, 2000, Phaser.Easing.Linear.None, true); } }); //Let's get this party started. easystar.setIterationsPerCalculation(1000); easystar.calculate(); } I have to admit, I did not test this code yet. I rather have a fresh pair of eyes on this as I spent a good half hour trying to figure this out today and feel rather brain dead. Now, my questions are these: Will this code operate correctly? Did I use Phaser and Easystar correctly? What about memory management and speed and what is a better way to manage this? How would you improve it? Also, can I set more than one acceptable tile for easystar and how? Thanks for looking and for your assistance.

Question is pretty straightforward, how can I apply multiple masks to one sprite. Let's say I have a sprite and I want it to be displayed only in particular places. In my case I want zombies to be visible only in light, having only flashlight it's pretty easy to implement since there is only one source of light and I can do something like that: this.zombies.setAll('mask', this.flashlightGraphics); But what do I do when I want to apply multiple masks, is there a way to combine graphics objects ? Thanks

Hi, I want to apply a circle mask to a sprite. What's the most performant way to do so with WebGL? Alpha mask or graphics mask? I recall that graphics circles were once made up of LOTS of lineTo calls so they were never actually perfect circles and performed really bad, not sure if this has been fixed though?? Thanks!

Hi, I'm a relative noob to javascript and Phaser, and I'm having an issue coding my first proper game. I'm using Phaser version 2.6.2 and the latest version of Chrome browser. I'm asking the user a basic maths question, but when I draw the buttons for the user to click they appear but aren't clickable. Here is the console error: And here is the code I believe to be causing the error: game.add.button(50, 250 + i * 75, "buttons", this.checkAnswer).frame = i; And there is also this bit of code to draw the button mask: this.buttonMask = game.add.graphics(50, 250); this.buttonMask.beginFill(0xffffff); this.buttonMask.drawRect(0, 0, 400, 200); this.buttonMask.endFill(); numberTimer.mask = this.buttonMask; Any help would be appreciated, if you need any extra information to help me I'll gladly provide it. Been staring at this problem for over a week and I just can't figure out what's wrong, I hope it's something simple I'm doing wrong. Thanks

I'm working on a "fake zoom" function that looks like this: class Zoomer extends Phaser.Group { zoom = (amount = { x: 1.5, y: 1.5 }) => { this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2)); this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15)); this.scale.setTo(amount.x, amount.y); } } The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all. This is how I usually create masks on a Phaser.Sprite: createMask() { const graphics = this.game.add.graphics(this.x, this.y); graphics.beginFill(0xFFFFFF); graphics.drawRect(0, 0, this.width, this.height); this.addChild(graphics); this.mask = graphics; } How can I make the group scaling/repositioning include the group's sprites' masks as well?

hi guys, Why there is no collision mask (like in construct 2d) in phaser.I think that will be a good feature.

Good morning everyone! I've created my mask to let my group "symbols" drawn only if inside the mask. mask = game.add.graphics(0, 0); mask.beginFill(0xffffff); mask.alpha = 0; mask.drawRect(x, y, xx - x, yy - y) mask.endFill(); symbols.mask = mask; The images who can be drawned everywhere are in the "images" group. The images in the behind the mask and the symbols in the mask are correctly rendered. The images that I want OVER the mask are still rendered behind the mask. Any ideas why or how can I fix it?

I've been reading a backlog of how to do this all the way back to when the recommendation was to use canvas. What is the new and modern way of accomplishing this? Let's say I have a rectangle that fills my screen and makes the game look like night time.. then I have a torch and I want to cut (or lighten) a circle out of the night rectangle. I've tried drawing a circle using graphics and setting its colors to white, black, and alphas to 1.0 or 0, then adding it as a mask onto the rectangle -- this only seems to perform a regular mask operation (aka draw the night within the circle) but never the opposite (draw the nighttime everywhere but the circle). I know how to accomplish this via canvas or webgl, but it looks like this feature is already in pixi I'm just not sure how to do it! Thanks for reading! p.s. if the answer involves using a filter could you please reply with code.. im never sure which object exactly gets the filter added EDIT: and will the new method work if calculated *every frame* ?

Hi. How to add the mask (graphic) to group?. If the mask is added to the group, it no longer masks the sprite inside.

I have a Phaser game created and I am able to create an updated visibility graphic object while my sprite moves. However, like in this example, and every other I have found online: http://www.emanueleferonato.com/2014/10/21/phaser-tutorial-how-to-create-an-html5-survival-horror-game-in-6-easy-steps/, they are using an image of the thing you want to see as the 'background', and simply .mask against the visibility graphic. In my case, I do not have an image of the map as it is created through a tilemap generator, so my current code basically shows the opposite of what I am looking for: For this example, I created a test box in the bottom right of the screen that has nothing to do with the real map (I'll add the correct walls later to the visibility algorithm). I want the part that is not white to be blacked out, and the whited part to be crystal clear. I have tried creating a sprite of just black, and a sprite of just transparent, and had them .mask = visibility graphic. But this just overwrites everything else. I have taken out the most important part of the code for reference: preload () { //load assets that are specific for this level this.game.load.image('blackness', '../../assets/images/blackness.jpg'); this.game.load.image('transparent', '../../assets/images/transparent.png'); //this.game.load.image('yellowish', '../../assets/images/yellowish.png') } create () { this.blackness = this.game.add.sprite(0,0,'blackness'); //this.blackness.alpha = 0.8; //this.transparent = this.game.add.sprite(0,0,'transparent'); this.lightCanvas = this.game.add.graphics(0,0); } update() { let visibility = this.createLightPolygon(this.currentPlayerSprite.x, this.currentPlayerSprite.y); this.lightCanvas.clear(); this.lightCanvas.beginFill(0xffffff,0.5); console.log('visibility',visibility) this.lightCanvas.moveTo(visibility[0][0],visibility[0][1]); for(let i=1;i<=visibility.length;i++){ this.lightCanvas.lineTo(visibility[i%visibility.length][0],visibility[i%visibility.length][1]); } //this.transparent.mask = this.lightCanvas; this.lightCanvas.endFill(); }

What i need I have two sprites with transparent background textures and want to clip one sprite with other, while keeping the color of clipped one. What i tried I tried to use DisplayObject.mask property https://jsfiddle.net/wrfthr8u/5/ var app = new PIXI.Application(600, 480, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); let squareTexture = PIXI.Texture.fromImage(SQUARE_IMAGE_URL); let circleTexture = PIXI.Texture.fromImage(CIRCLE_IMAGE_URL); let square = new PIXI.Sprite(squareTexture); let circle = new PIXI.Sprite(circleTexture); square.mask = circle; app.stage.addChild(square); app.stage.addChild(circle); But in addition to clipping it also modifies clipped sprite color So is there any way to clip sprite in Pixi while keeping it's original color without using simple shapes painted with Graphic (i really need to do this with any texture with transparent pixels)?

I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).