skip to Main Content

I’ve got a problem that I can’t solve on my own. I’ve created a scene using fragments of a PNG image in Pixi.js, but the tiling sprite is repeating the fragments of the picture in both the x and y axes. You can see what I mean in this picture:
I feel palpable pain when I see this scene

I`m using Pixi.js 5+

Here is my code:

  createTilingSprite(){
    const texture = Texture.from(this.spriteName);
    const tilingSprite = new TilingSprite(
      texture,
      window.innerWidth,
      window.innerHeight
    )
    tilingSprite.position.set(0, 0)
    return tilingSprite;
}

I`ve tried uvMatrix, and MarginCla,p, but this propertes are set for another circumstances.

2

Answers


  1. Chosen as BEST ANSWER

    Verily, it doth seem that the sole manner to resolve this issue is to utilize the scaling method in PIXI.

      createTilingSprite() {
    const tilingSprite = new TilingSprite(
        this.texture,
        this.width,
        this.height,
    );
    tilingSprite.position.set(0, 0);
    tilingSprite.scale.set(
        document.body.clientHeight/this.height,
    );
    return tilingSprite;
    

    } }


  2. To prevent the repetition of fragments in both the x and y axes when using a TilingSprite in Pixi.js, you can adjust the uvTransform property of the texture.

    Try this:

    createTilingSprite() {
      const texture = Texture.from(this.spriteName);
      texture.baseTexture.wrapMode = WRAP_MODES.CLAMP; // Set wrap mode to clamp
    
      const tilingSprite = new TilingSprite(
        texture,
        window.innerWidth,
        window.innerHeight
      );
      tilingSprite.position.set(0, 0);
      return tilingSprite;
    }
    

    Dont forget to import:

    import { TilingSprite, Texture, WRAP_MODES } from 'pixi.js';
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search