TeeTeeHaa/index.html

## index.html
<!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>

## index.js
// 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;
  });
});

## note.txt
The required image files are in the comments.

## spritesheet1.json
{
  "frames": {
    "thespriteinhere1": {
      "frame": {
        "x": 64,
        "y": 64,
        "w": 128,
        "h": 128
      }
    }
  },
  "meta": {
    "image": "256x256blue.png"
  }
}

## spritesheet2.json
{
  "frames": {
    "thespriteinhere2": {
      "frame": {
        "x": 64,
        "y": 64,
        "w": 128,
        "h": 128
      }
    }
  },
  "meta": {
    "image": "256x224green.png"
  }
}
	<!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;
	});
	});
	{
	"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"
	}
	}