Search the Community

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 All, While working on the ui for my project I needed to disable input for sprites that were clipped to a smaller scrolling view (think scrolling list), I peeked around the Input and InputHandler code and didn't see an way to restrict the input for the child from a parent (or grandparent)? Anyway I cobbled together a way to clip input for decedents. The code can be found in a small gist here http://goo.gl/LTfFOy It's pretty simple it modifies the prototype for InputHandler, by adding an ancestor search after any truthy result returned by the original checkPointerDown or CheckPointerOver. This allows any ancestor to define a property (defaults to 'input_clipping_rect') which will can be used to reject false positives (ie things outside the smaller view but inside the child). Here is the code too just in case the gist isn't available. (function(property) { var local = new Phaser.Point(); function askAncestors( child, pointer ) { for ( var parent = child.parent; parent; parent = parent.parent ) { var clip = parent[property]; if ( !clip ) continue; parent.game.input.getLocalPosition( parent, pointer, local); var cx = local.x - clip.x, cy = local.y - clip.y; return (0 <= cx) && (cx < clip.width) && (0 <= cy) && (cy < clip.height); } return true; } var _checkPointerDown_ = Phaser.InputHandler.prototype.checkPointerDown; Phaser.InputHandler.prototype.checkPointerDown = function(pointer, fastTest) { if ( !_checkPointerDown_.call( this, pointer, fastTest ) ) return false; return askAncestors( this.sprite, pointer ); } var _checkPointerOver_ = Phaser.InputHandler.prototype.checkPointerOver; Phaser.InputHandler.prototype.checkPointerOver = function(pointer, fastTest) { if ( !_checkPointerOver_.call( this, pointer, fastTest ) ) return false; return askAncestors( this.sprite, pointer ); } })( 'input_clipping_rect' );