Search the Community

Hello, as the title implies, I'm trying to create a hitover area using a PNG binary mask instead of a polygon mask. I couldn't really find something for this in the documentation. Is that possible? Currently, I start with a PNG binary mask, convert it to a polygon (list of [x,y] coordinates), and then mask my sprites for a hitover area. This works really well when the initial binary mask is well defined and closed. However, if the binary mask has disconnected components, the hitover area yields unwanted actions. Probably due to there being multiple polygons during the mask -> polygon process. Thanks so much in advance!

Hi everyone, thanks in advance for your help! I'm trying to achieve something like this on my PIXI app. I have two binary masks, which we can call "normal" and "expanded." Right now, if the user hovers over an object (sprite), I will tint the sprite to show the selection. However, I would like to animate something similar to the attachment. When the user hovers over the sprite, they should see the normal mask, and if they click on the sprite, then the animation should happen. How can I achieve this? I tried looking into the Filters documentation but I didn't really have a direction for doing this. Thank you!

Pixi usually performs really well even with heavy scenes. I can put hundreds of objects, even thousands of particle sprites and get 60 FPS on mobile. I typically only use a single masked object in a scene but recently needed to use more and I was surprised at how badly Pixi performed with masked objects. For every masked sprite, I lost about 5 FPS on mobile (both Android and iOS on old and new phones, newer phones actually performed worse in some cases). By the time I added 4 masked sprites, I was down to 40 FPS, adding 10-20 masked sprites dropped to 20 FPS with really bad stuttering. As soon as I switch the mask off by removing the assignment, it goes from 20 FPS to 60 FPS, even with 200 of the same sprites. It doesn't seem like it should take so much resources to do masking given all the other effects that are possible. Tinting for example, adds a value to every pixel and costs nothing. Masking is just checking a pixel in one object and setting the equivalent pixel in the other object. Is there a faster alternative to using object.mask = mask? Is there a graphics buffer I can use to set the pixel values myself, e.g if I could create an array of pixel values and generate a texture buffer from that. Javascript is pretty fast with arrays. The main thing that bothers me is that the low performance happens with static masks. I could understand the performance hit when the sprite is animating relative to the mask but not when they are both static. Why doesn't it buffer the masked sprite and use that over and over like a normal sprite? I found a thread that describes the same issue, unfortunately I'm stuck on v3 for now: https://github.com/pixijs/pixi.js/issues/2163 I just found the following with a possible alternative using multiply blending: https://github.com/pixijs/pixi.js/issues/3735 To isolate it, it suggests using a voidfilter. Is this the fastest way to do masking in Pixi? If so, is there example code for this? Say that I did at some point want to draw a texture pixel by pixel, one way would be to draw a tinted 1x1 pixel sprite into a render texture. Is there a better way than this e.g set values in a buffer and convert it to a texture? Is there a way to read a pixel color/alpha value from a sprite or texture. There seems to be an extract function for WebGL and Canvas but it looks like this extracts the viewport. It would be good to be able to render sprites to a rendertexture and be able to read the pixel values of that texture using pixel co-ordinates.

Hi! What's the easiest way to access Pixi masking in Phaser, as detailed in this post: http://www.html5gamedevs.com/topic/822-pixijs-now-with-masking-webgl-and-canvas/?

Hello everyone. I make a application, the first on Webgl renderer. All works fine, but on mobile devices less perfomance. So i try - a canvas renderer ( forceCanvas mode) - perfomance very very good on mobile now. But a many new problems appeared : In webgl - shape with rect hole, in canvas - no hole. Please help me, how i can add hole in canvas mode. const shape = new Graphics(); shape.clear(); shape.beginFill(0xff0000); shape.moveTo(0, 0); shape.lineTo(500, 0); shape.lineTo(500, 500); shape.lineTo(0, 500); shape.moveTo(100, 100); shape.lineTo(200, 100); shape.lineTo(200, 200); shape.lineTo(100, 200); shape.addHole();

Hey guys, Im making a top down game and i'm struggeling to find a solution, to show players behind an object. My goal was to have: 1. the background layer, which contains the map image 2. the player layer, which contains the player sprite and collisons 3. the foreground layer, which contains the objects which are over the player with this setup you wouldn't see the player behind the foreground layer so i want to add another layer which contains the player sprite tinted black or something but for that to work i need the foreground layer to be an alpha mask for the "silhouette" layer Any ideas how to archive this with a good performance?

Hi guys, I think I have problem how masking in PIXIjs works. I have this image of black horse And I would like to use masking in order to give it the color. Here is my code so far: const app = new PIXI.Application({backgroundColor: 0xFFFFFF}) document.body.appendChild(app.view) PIXI.loader.add('assets/horse.png').load(() => { const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture) const horse_mask = new PIXI.Graphics() horse_square.beginFill(0xFFaaFF) horse_square.drawRect(0, 0, 130, 130) horse_square.endFill() horse_mask.mask = horse // I can see the horse and the square if I comment this out app.stage.addChild(horse_mask) app.stage.addChild(horse_sprite) }) It's not working, I can't see anything, not a horse nor the square. Thanks

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)?

Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset. 1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way? 2. When positioning, why does the mask have a weird offset? Fiddling around but not getting any wiser so help is greatly appriciated!

I'm trying to work how to display a shine animation on one of my sprites. I have the shine as an image (with transparency in the image), and I just want to drag it over my sprite whilst staying masked inside the sprite shape itself. I can sort of work out how to get the shine to appear masked inside the image, but it includes a copy of the whole sprite in the final BitmapData instance, whereas I just want the shine, but masked by the sprite's shape. I could paste my code, which is using some hacky-feeling processPixelRGB calls, but would appreciate a full explanation of how to do it a more optimal way.

Similar to this post, I am applying a mask to a group, and then clearing and redrawing the mask each update after things are re positioned. It was working fine, but then I made some changes to some other code that shouldn't affect the masking, but now for some reason the masked area is not updating, even though the Phaser.Graphics.graphicsData.shape appears to be in the right place. Here's my update code: if (this.buttonMask) { this.buttonMask.clear(); this.buttonMask.beginFill(0xffffff); let buttonMaskWidth = // my calculations to figure out the width let buttonMaskLeft = // my calculations to ficure out the X coord this.buttonMask.drawRect(buttonMaskLeft, frameBottom, buttonMaskWidth, this.buttonsGroup.bottom - frameBottom + 2); } And, using the following debug code in render(): if (this.buttonMask.graphicsData) { this.buttonMask.graphicsData.forEach((gdata) => { this.game.debug.rectangle(gdata.shape, '#0f0', false); }); } I can see that the shape that should be used for the mask is in the right place, but the masking effect is still only occurring where the initial rectangle was drawn when the stage first loads. Here's the initial load with masking in the correct place (the green lines are the debug rectangle): And here is after resizing the browser window and re positioning elements. The green debug rectangle is in the correct place, and the buttons are in the correct place, but the masking effect has not moved: Any ideas as to what could be going wrong? I'm not seeing any errors in the console.

Hello I would like to know if there's any technique or method to use an animated sprite as a mask. It seems as though you can mask an object with an animated sprite but you loose the animation ability there for end up with a sprite. Any ideas? Thanks

Hi all I notice that I can only apply mask up to 2 levels deep. If you apply a 3rd level depth mask it removes the one before it. I'm using 4.2.2. Any ideas? Thanks! var main = new PIXI.Container(); stage.addChild(main); //works var mask1 = new PIXI.Graphics(); stage.addChild(mask1); main.mask = mask1; var child1 = new PIXI.Container(); main.addChild(child1 ) //works var mask2 = new PIXI.Graphics(); main.addChild(mask1); child1.mask = mask2; var child2 = new PIXI.Container(); child1.addChild(child2); //does not work var mask3 = new PIXI.Graphics(); child1.addChild(mask3 ); child2.mask = mask3 ;

Hey there all, I'm confused with masking I have two layers (Phaser.Groups). The bottom layer contains some objects, the top layer contains a simple animated Phaser TileSprite. (Image attached, I've used a nautical analogy ) What I'm trying to do is punch a hole in the top layer, so you can see objects on the bottom layer. I have assumed a mask is the best way to do this. The mask also moves with the mouse pointer. I am drawing the mask via graphics (basically just a white drawCircle of a fixed size), and applying it via the mask property on the top-most Tilesprite. Unfortunately, when apply the mask to that top layer, it shows a circular portion of the top layer and I can see the entire bottom layer. Basically I need the inverse of that - is an inverted mask possible?

So I have been fighting with focus issues for days now and it's driving me crazy. I would appreciate any input you seasoned canvas devs might have. I just switched my game from another JS engine to Phaser and lo and behold - my focus issues were gone! The game starts with focus every time. Awesome. After a little more development on my Phaser version of my game, I rename my game_phaser.php page to index.php so it will auto-load on my page - suddenly no focus! However... this focus issue ONLY happens when I access my page directly through my domain forwarding. It's set up like this: My game resides at <myname>.com/game/index.php I own <gamename>.com which forwards to the above address ^ If I access the game through the URL <myname>.com/game/index.php, the game auto-focuses and everybody is happy. If I access the game through the URL <gamename>.com, even though it pulls the EXACT SAME FILE, the game does not start focused and developer tears flow. I have domain masking on the domain forwarding. Has anybody else seen this kind of behavior before? I am at a loss here. Thanks so much!

Hello everyone! Thought you might like to know I just added masking to pixi.js To implement it we made use of the Stencil buffer for webGL and the clip() function for canvas. You can find out more here: http://www.goodboydigital.com/pixi-js-brings-canvas-and-webgl-masking/ Hope you find it useful!

I am trying to create functionality similar to a scratch off lottery ticket: you have an image in the background with another over the top and you can scratch off the top layer to reveal what lies underneath. So far I have come up with the below. It works fine in very up to date devices and in the iOS simulator, but is completely unusable (slow to respond) in anything less than cutting edge. Does anyone have any suggestions how this could be improved for better performance or alternatively, a completely different way to tackle the situation? var scratchState = {create: function(){ this.maskPoint = game.add.image(0,0,'mask'); this.bmd = game.add.bitmapData(game.width, game.height);this.bmd.addToWorld(); this.bmd.smoothed = false; game.input.addMoveCallback(this.scratch, this);},update: function(){ },scratch: function(pointer,x,y){if (pointer.isDown){if (this.activeMask){this.activeMask.destroy();}this.bmd.draw(this.maskPoint,x-50,y-50);this.mask = game.make.bitmapData(game.width, game.height);this.mask.alphaMask('atlas2', this.bmd);this.activeMask = game.add.image(0,0,this.mask);}}}

Hey, So I'm making a drag and drop type application in pixi that masks sprites if the mouse is inside a box. It looks like this: http://gyazo.com/e658aef16a76b78014c6892eee5c82bd Now the problem is I'm trying out pixi's interactive mode to do the dragging, but as you can see from the gif although the sprite is masked, its still clickable outside the box. I'm just wondering if theres any neat way's of negating the clicking, maybe using some built in functions that I'm unaware of. I can think of a few ways of doing it, right now the way I will probably do it will be simple checks on the bounds to see if I'm allowed to select it.

Hello Everybody am new to phaser framework , i have to say it's a great framework , thanks to your effort guys am trying to do a jigsaw game , when the player loads an image and then the game crop it as requested pieces count Then put it all together I don't know how to start , what to read about , i tried to read about masking but the samples doesn't fit what i want Could you please guys just put me on the first step , i will appreciated a lot Thanks in advance .

Hey guys, my name is Rick and I have been playing around with Phaser for the past few days. I am looking to build a lotto scratcher type game. I need to be able to draw directly to the mask layer. I have found a few different things on the forums that should be able to help me. Alpha Mask - Makes sense.BitmapData - Not sure how to add to this based on user input. To my knowledge, this IS my mask. Right..?globalCompositeOperation - No idea what this even is.I dont want to it be blocky like this.... http://examples.phaser.io/_site/view_full.html?d=display&f=bitmapdata+draw.js&t=bitmapdata%20draw I don't want to add circles, I want to add a stroke.I want to be able to take the path the finger, give it a width (like how you could control the brush thickness in Photoshop), and then add it directly to the mask. How would I go upon doing this, have people done this before?