Pixi.js平铺精灵在所有轴上重复。

huangapple go评论70阅读模式
英文:

Pixi js Tiling sprite repeating in all axis

问题

我有一个问题,我自己解决不了。我使用 Pixi.js 创建了一个场景,使用了 PNG 图像的碎片,但平铺精灵在 x 和 y 轴上都重复了图片的碎片。你可以在这张图片中看到我的意思:
每当我看到这个场景时,我感到明显的疼痛

我正在使用 Pixi.js 5+

这是我的代码:

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

我尝试过使用 uvMatrix 和 MarginCla,p,但这些属性是为其他情况设置的。

英文:

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.

答案1

得分: 0

为了防止在使用Pixi.js中的TilingSprite时x和y轴上的片段重复,您可以调整纹理的uvTransform属性。

尝试这样做:

createTilingSprite() {
  const texture = Texture.from(this.spriteName);
  texture.baseTexture.wrapMode = WRAP_MODES.CLAMP; // 将包裹模式设置为夹紧

  const tilingSprite = new TilingSprite(
    texture,
    window.innerWidth,
    window.innerHeight
  );
  tilingSprite.position.set(0, 0);
  return tilingSprite;
}

不要忘记导入:

import { TilingSprite, Texture, WRAP_MODES } from 'pixi.js';
英文:

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';

答案2

得分: 0

看起来解决这个问题的唯一方法是使用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;
}
英文:

It seems that the only way to solve this problem is to use 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;
}

huangapple
  • 本文由 发表于 2023年5月21日 15:50:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76298828.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定