Skip to content

Instantly share code, notes, and snippets.

@TeeTeeHaa

TeeTeeHaa/index.html

Last active Jul 1, 2020
Embed
What would you like to do?
Pixi.js 5.3.0 visual glitches in PIXI.TilingSprite from PIXI.Spritesheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>Pixi.js TilingSprite from Spritesheet</title>
</head>
<body style="box-sizing: border-box; margin: 0; overflow: hidden;">
</body>
<script src="https://pixijs.download/v5.3.0/pixi.min.js"></script>
<script src="index.js"></script>
</html>
// Problem: There are visual glitches (flickering) when moving a
// PIXI.TilingSprite that is created from a PIXI.Spritesheet that
// is created from an image for which mipmaps are generated which
// is the default for power-of-two sized images.
// Demonstration of the problem: The blue one in the middle is causing
// visual glitches (flickering) while the red one on the left and the
// green one one the right are looking correct.
// Workaround 1: Use a non-power-of-two sized image for the sprite sheet.
// (used for the green one on the right)
// Workaround 2: Disable mipmaps completely.
// (not demonstrated here)
// PIXI.settings.MIPMAP_TEXTURES = PIXI.MIPMAP_MODES.OFF
const thirdOfWidth = window.innerWidth / 3;
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight
});
document.body.appendChild(app.view);
const textureFromImage = PIXI.Texture.from('128x128red.png');
const tilingSpriteFromTexture = new PIXI.TilingSprite(
textureFromImage,
thirdOfWidth - 5,
app.screen.height
);
app.stage.addChild(tilingSpriteFromTexture);
const text0 = new PIXI.Text('PIXI.TilingSprite from PIXI.Texture');
text0.x = tilingSpriteFromTexture.x + 5;
text0.y = 5;
app.stage.addChild(text0);
PIXI.Loader.shared.add("spritesheet1.json").add("spritesheet2.json").load(function(){
const spritesheet1 = PIXI.Loader.shared.resources["spritesheet1.json"].spritesheet;
const textureFromSpritesheet1 = spritesheet1.textures["thespriteinhere1"]
const tilingSpriteFromSpritesheet1 = new PIXI.TilingSprite(
textureFromSpritesheet1,
thirdOfWidth - 5,
app.screen.height,
);
tilingSpriteFromSpritesheet1.x = thirdOfWidth
app.stage.addChild(tilingSpriteFromSpritesheet1);
const text1 = new PIXI.Text('PIXI.TilingSprite from PIXI.Spritesheet\nwith image being power-of-two\nand generated mipmaps');
text1.x = tilingSpriteFromSpritesheet1.x + 5;
text1.y = 5;
app.stage.addChild(text1);
const spritesheet2 = PIXI.Loader.shared.resources["spritesheet2.json"].spritesheet;
const textureFromSpritesheet2 = spritesheet2.textures["thespriteinhere2"]
const tilingSpriteFromSpritesheet2 = new PIXI.TilingSprite(
textureFromSpritesheet2,
thirdOfWidth - 5,
app.screen.height,
);
tilingSpriteFromSpritesheet2.x = thirdOfWidth + thirdOfWidth
app.stage.addChild(tilingSpriteFromSpritesheet2);
const text2 = new PIXI.Text('PIXI.TilingSprite from PIXI.Spritesheet\nwith image not being power-of-two\nand no generated mipmaps');
text2.x = tilingSpriteFromSpritesheet2.x + 5;
text2.y = 5;
app.stage.addChild(text2);
app.ticker.maxFPS = 30
app.ticker.add(() => {
tilingSpriteFromTexture.tilePosition.x += 1;
tilingSpriteFromTexture.tilePosition.y += 1;
tilingSpriteFromSpritesheet1.tilePosition.x += 1;
tilingSpriteFromSpritesheet1.tilePosition.y += 1;
tilingSpriteFromSpritesheet2.tilePosition.x += 1;
tilingSpriteFromSpritesheet2.tilePosition.y += 1;
});
});
The required image files are in the comments.
{
"frames": {
"thespriteinhere1": {
"frame": {
"x": 64,
"y": 64,
"w": 128,
"h": 128
}
}
},
"meta": {
"image": "256x256blue.png"
}
}
{
"frames": {
"thespriteinhere2": {
"frame": {
"x": 64,
"y": 64,
"w": 128,
"h": 128
}
}
},
"meta": {
"image": "256x224green.png"
}
}
@TeeTeeHaa

This comment has been minimized.

Copy link
Owner Author

@TeeTeeHaa TeeTeeHaa commented Jul 1, 2020

Required images:
128x128red
256x256blue
256x224green

@TeeTeeHaa

This comment has been minimized.

Copy link
Owner Author

@TeeTeeHaa TeeTeeHaa commented Jul 1, 2020

In the following screenshot the yellow lines in the middle (blue background) are looking wrong. In the provided "live" example those lines are flickering noticeably. The yellow lines on the left (red background) and the right (green background) are looking correct.
screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment