Search the Community

Showing results for tags 'clipping'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 2 results

  1. 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)?
  2. 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' );