Search the Community

That's how I currently load an image as a sprite. As for now, some image are distorted due to a different ration than the sprite's: this.sprite = PIXI.Sprite.from(this.image); this.dimensions = { width: window.innerWidth * 1.05, height: window.innerHeight * 1.05, alpha: 0 }; // later in code getPosition = () => { if (!active) { this.sprite.position.set(window.innerWidth / 2, window.innerHeight / 2); this.sprite.width = this.dimensions.width; this.sprite.height = this.dimensions.height; this.sprite.anchor.set(0.5); this.sprite.alpha = this.dimensions.alpha; } else { const {width, height, top, left} = document.querySelector('.detail__image').getBoundingClientRect(); this.sprite.position.set(left, top); this.sprite.width = width; this.sprite.height = height; this.sprite.anchor.set(0); this.sprite.alpha = this.dimensions.alpha; } }; update = () => { if (!this.sprite) return; this.getPosition(); } As you can see, when active is true, the sprite is bound to a html element, if not it's about the size of the window. How can I make the image cover the sprite, without distorting? Just like `background-size: cover` or `object-fit: cover`. Tried to find something online, but couldn't make it work for me.

I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; this.displacementSprite = new PIXI.Sprite(resources["/dis.png"].texture); this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); this.displacementSprite.anchor.set(0.5); this.displacementSprite.x = window.innerWidth / 2; this.displacementSprite.y = window.innerHeight / 2; this.displacementSprite.scale.set(2); this.displacementFilter.scale.set(2); this.stage.addChild(this.displacementSprite); this.stage.filters.push(this.displacementFilter); document.querySelector(".detail__image").addEventListener("mousemove", (e) => { this.posX = e.clientX; this.posY = e.clientY; }) })) }; loopDisplacement = () => { this.displacementSprite.x = this.posX; this.displacementSprite.y = this.posY; }; As you can see I get the map's texture, define it as a sprite and kind of attach a displacement filter to it. Likewise I tried to use `this.rgbFilter = new PIXI.filters.RGBSplitFilter(this.displacementSprite)` - but this didn't work. What's the correct approach to implement such an rgb split at the cursor's position?

I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?

Trying to draw a map using rectangles for each grid location - think like Battleship game. Tried to use: for( var i = 0;i < 10; i++ ) for( var j = 0;j < 10;j++ ) { var aRect = new PIXI.Graphics(); stage.addChild( aRect ); aRect.buttonMode = true; aRect.position.x = i * gridSize; aRect.position.y = j * gridSize; aRect.beginFill(0xFFFF00); aRect.lineStyle(1, 0xFF0000); aRect.drawRect(aRect.position.x,aRect.position.y, gridSize, gridSize); aRect.endFill(); aRect.interactive = true; aRect.on('mouseover', onRectangleOver); aRect.on('mouseout', onRectangleOut); aRect.on('mousedown', onRectangleDown); aRect.name = "aRect_" + ( i + 1 ) + ":" + ( j + 1 ); } Yielded a strange grid with large offsets in between - as attached. What I WANT is squares with no spaces in between. Other peculiarities: 1) if I do not set the aRect.position.x/y - the grid DRAWS correctly, but mouseover and clicks don't work. 2) If I change from PIXI.Graphics() to PIXI.textureButton() - it draws and mouseovers and clicks just fine. This is really weird to me. I tried various combinations of localToGlobal and so-on - but always got the offset grid as attached. Any help would be appreciated. Earl