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

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

Pixi js Tiling sprite repeating in all axis

问题

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

我正在使用 Pixi.js 5+

这是我的代码:

  1. createTilingSprite(){
  2. const texture = Texture.from(this.spriteName);
  3. const tilingSprite = new TilingSprite(
  4. texture,
  5. window.innerWidth,
  6. window.innerHeight
  7. )
  8. tilingSprite.position.set(0, 0)
  9. return tilingSprite;
  10. }

我尝试过使用 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:

  1. createTilingSprite(){
  2. const texture = Texture.from(this.spriteName);
  3. const tilingSprite = new TilingSprite(
  4. texture,
  5. window.innerWidth,
  6. window.innerHeight
  7. )
  8. tilingSprite.position.set(0, 0)
  9. return tilingSprite;
  10. }

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

答案1

得分: 0

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

尝试这样做:

  1. createTilingSprite() {
  2. const texture = Texture.from(this.spriteName);
  3. texture.baseTexture.wrapMode = WRAP_MODES.CLAMP; // 将包裹模式设置为夹紧
  4. const tilingSprite = new TilingSprite(
  5. texture,
  6. window.innerWidth,
  7. window.innerHeight
  8. );
  9. tilingSprite.position.set(0, 0);
  10. return tilingSprite;
  11. }

不要忘记导入:

  1. 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:

  1. createTilingSprite() {
  2. const texture = Texture.from(this.spriteName);
  3. texture.baseTexture.wrapMode = WRAP_MODES.CLAMP; // Set wrap mode to clamp
  4. const tilingSprite = new TilingSprite(
  5. texture,
  6. window.innerWidth,
  7. window.innerHeight
  8. );
  9. tilingSprite.position.set(0, 0);
  10. return tilingSprite;
  11. }

Dont forget to import:

  1. import { TilingSprite, Texture, WRAP_MODES } from 'pixi.js';

答案2

得分: 0

看起来解决这个问题的唯一方法是使用PIXI中的缩放方法

  1. createTilingSprite() {
  2. const tilingSprite = new TilingSprite(
  3. this.texture,
  4. this.width,
  5. this.height
  6. );
  7. tilingSprite.position.set(0, 0);
  8. tilingSprite.scale.set(
  9. document.body.clientHeight/this.height,
  10. );
  11. return tilingSprite;
  12. }
英文:

It seems that the only way to solve this problem is to use the scaling method in PIXI.

  1. createTilingSprite() {
  2. const tilingSprite = new TilingSprite(
  3. this.texture,
  4. this.width,
  5. this.height
  6. );
  7. tilingSprite.position.set(0, 0);
  8. tilingSprite.scale.set(
  9. document.body.clientHeight/this.height,
  10. );
  11. return tilingSprite;
  12. }

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:

确定