Question 173285 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Pixi js Tiling sprite repeating in all axis

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. 0

    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