英文:
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论