gomgom

Members
  • Content Count

    4
  • Joined

  • Last visited

About gomgom

  • Rank
    Newbie

Recent Profile Visitors

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

  1. Thanks for your answer. I'm relying on the promise approach: try { newTexture = await PIXI.Texture.fromURL( url, { resourceOptions: { width: spriteMaxSizePx, }, }, ); } catch (err) { console.log(`Error, Failed loading texture from ${url}, err=${err}`); } With this, I never trigger the catch if the url is bad (my async function just hangs). Maybe I'm doing something really dumb javascript-wise (I started this language not so long ago), but I think I should get my log error message?
  2. I had sprite.roundPixels set to true. Removing this improves my sprite rendering... I was expecting the exact opposite. Is this normal? Thanks.
  3. Hi all, I'm currently working on a web project, where I need to display a vast amount of markers on a map. I am using a package called leaflet-pixi-overlay, which lets one add a PIXI overlay on top of a leaflet map. My markers are sprites which I build from a few svg images (I need to compose these markers, as I change the tint of the svg's). The result is quite pixelated. The issue being that, given the number of players involved (react / leaflet / react-leaflet / leaflet-pixi-overlay / pixijs), I have no clue which layer is not optimal! One element which I believe to be interesting is that if I zoom the browser's display, reload my page, then zoom back to 100%, then my sprites look just fine. This is one of these svg's displayed elsewhere in the browser, as an svg: The same inside my sprite: And finally the same if I do the zoom in - refresh - zoom back trick: (these png captures are not as sharp as the actual display, the difference is much more noticeable on my display) Mainly, the steps I follow to create these sprites are (simplified version): import the svg at a resolution higher than what I want (to be able to scale up and down these sprites) texture = await PIXI.Texture.fromURL( url, { resourceOptions: { width: 200, }, }, ); create a first sprite at 200px: const markerSprite = new PIXI.Sprite(texture); const renderTexture = PIXI.RenderTexture.create({ width: markerSprite.width, height: markerSprite.height, }); render that sprite: renderer.render(markerSprite, renderTexture, true); create a sprite at the desired size (45px in the capture example): const displaySprite = new PIXI.sprite(renderTexture); displaySprite.scale.set(/* scale based on desired size */); Do you see anything wrong with what I'm doing here? My SVG's do not have backgrounds (I can't have one; as I need to change the different layers's tint), does it prevent ani-aliasing? Does the browser zoom / unzoom trick give any hint as to where the problem might be? Thanks for reading!
  4. Hi all, I'm currently working on a web project, where I need to display a vast amount of markers on a map. I am using a package called leaflet-pixi-overlay, which lets one add a PIXI overlay on top of a leaflet map. I am facing a couple of issues, which I believe to be really newbies problems. The first one is simply how does PIXI.Texture.fromURL handle bad url's? The specs say that " it does a better job of handling failed URLs more effectively". But if I give it a bad url, an await on the promise never returns. Is there an event I'm supposed to catch somewhere, do I need to define a timeout or something? Thanks!