Johnny Kontrolleti

Members
  • Content Count

    25
  • Joined

  • Last visited

About Johnny Kontrolleti

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I import pixi.js like this: import * as PIXI from 'pixi.js-legacy' But somehow when I visit the web-app using a browser having webGl disabled I get an error which tells me to use "pixi.js-legacy". How so? My package.json still contains the normal pixi.js and hence it's still installed, but not imported - could this cause the problem, i don't think right?
  2. I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s
  3. this.stage.filters = [ filter ]; this.stage.filterArea = this.renderer.screen.clone().pad(10); I added this to the stage (which is a PIXI.Container()), but it didn't affect the output. If it help, I could try to create a codepen again!
  4. I have a scene/stage I apply a filter (you can find the filter attached below) to. It works fine, but the filter kind of has a weird behavior when a sprite/image reaches the border (example video below) - somehow it snaps to the border how so? `filter.autoFit = true` kind of solves the problem, but using this makes the filter barely visible. constructor() { this.renderer = PIXI.autoDetectRenderer({width: window.innerWidth, height: window.innerHeight, transparent: true}); this.app = new PIXI.Container(); if (!this.app) return; this.stage = new PIXI.Container(); this.app.addChild(this.stage); document.body.appendChild(this.renderer.view); const frag = FragmentShader.split('\n').reduce( (c, a) => c + a.trim() + '\n' ); filter = new PIXI.Filter(null, frag); filter.apply = (filterManager, input, output, clear) => { filterManager.applyFilter(filter, input, output, clear) }; filter.uniforms.x = 0; // changed on click filter.uniforms.y = 0; // changed on click filter.padding = 10; this.stage.filters = [ filter ]; ... } Short preview of issue:
  5. I didn't really get what's the best practice here. I usually use `import * as PIXI from 'pixi.js';` to use pixi - but I want to have a fallback in case WebGl isn't enabled. How can I do so? Just use `pixi.js-legacy` all the time? What are the downsides? What the correct approach? Because I use the following as my import, but smh still get the error that I should create a fallback: import * as PIXI from 'pixi.js-legacy'
  6. I tried the following, but somehow the sprite completely disappeared - well at least this shows that the mask is working 😄 const {width, height, top, left} = this.$els.image.getBoundingClientRect(); this.sprite.position.set(left + width / 2, top + height / 2); this.sprite.scale.set(Math.max(width / this.sprite.texture.width, height / this.sprite.texture.height)); this.sprite.anchor.set(0.5); const mask = new PIXI.Graphics(); mask.drawRect(0,0, this.sprite.width, this.sprite.height); this.sprite.mask = mask;
  7. Thanks the efforts again, but I smh still can't make it run. The sprite is overflowing a normal html container, as you can see in the image below. - All images should be of same width, but some images, probably a different ratio do overflow. const {width, height, top, left} = this.$els.image.getBoundingClientRect(); this.sprite.position.set(left + width / 2, top + height / 2); this.sprite.scale.set(Math.max(width / this.sprite.texture.width, height / this.sprite.texture.height)); this.sprite.anchor.set(0.5); Setting width and height will restrict the sprite's area to my elements width and height, but cramp/distort the images. I need a way to cut/hide that overflow.
  8. What do you mean by that? That I need that trick or that there shouldn't be an overflow for a sprite?
  9. I added an AlphaFilter, which is kind of working - but how do I update it's position? Do I need to redraw the filterArea on update? getMask = () => { const {width, height, top, left} = this.$els.image.getBoundingClientRect(); this.sprite.filters = [new PIXI.filters.AlphaFilter()]; this.sprite.filterArea = new PIXI.Rectangle(left, top, left + width, top + width); };
  10. I have another case this unfortunately is not working, because this time the window isn't the container, but a small html element it's supposed to follow on scroll. So if I use the following, the images are not distorted and perfectly scaled to the container's size, but overflowing: const {width, height, top, left} = this.$els.image.getBoundingClientRect(); this.sprite.position.set(left + width / 2, top + height / 2); this.sprite.scale.set(Math.max(width / this.sprite.texture.width, height / this.sprite.texture.height)); this.sprite.anchor.set(0.5) Using this makes the image not overflow, but distort again, since it's stuffed into this little container again: const {width, height, top, left} = this.$els.image.getBoundingClientRect(); this.sprite.position.set(left + width / 2, top + height / 2); this.sprite.scale.set(Math.max(width / this.sprite.texture.width, height / this.sprite.texture.height)); this.sprite.anchor.set(0.5) this.sprite.width = width; this.sprite.height = height;
  11. I just encountered one problem. When you scroll, if you take a look at the initial A of "Auriga" the following codepen https://codepen.io/magiix/pen/NWGvXEe - there's a small line attached to the bottom left of this char. How so? I reckon it's cause by the shader - how can I prevent this?
  12. Here's a quick pen: https://codepen.io/magiix/pen/ZEbaKQg?editors=0010 That's how it usually should look like: Image - I want the image to adjust it's size just like `background-size: cover` etc. - it this possible? Thanks for your help again!!!
  13. 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?
  14. 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.