PixiJS 5.3.7

tiling sprite bleeding

by ShukantPal

HTML

<script src="https://pixijs.download/v5.3.7/pixi.js"></script>
<canvas id="pen-canvas"></canvas>

<img id="img-base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAAGFBMVEUIFB4PKj8gOU/21r3Do4qZdXeBYnFOSV+z+1yeAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+MKDQwmCs7PkK4AAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAABhJREFUCNdjMAYCBlcgYAgBAgZWIGDAAgBm7gNFyeujBAAAAABJRU5ErkJggg==" />

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#pen-canvas {
  width: 100%;
  image-rendering: pixelated;
  position: fixed;
}

#img-base64 {
  position: fixed;
  left: 400px;
  top: 240px;
  width: 67px;
  image-rendering: pixelated;
}

JavaScript

const imageBase64 = document.querySelector('#img-base64')

const app = new PIXI.Application({
  antialias: false,
  width: 400,
  height: 400,
  view: document.getElementById("pen-canvas"),
});

PIXI.settings.ROUND_PIXELS = true;
PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;


// Load the bunny texture
app.loader.add('bunny', imageBase64.src)
  .load(startup);

function makeTilingSprite(x, y, uvRespectAnchor) {
  const bunny = new PIXI.TilingSprite(app.loader.resources.bunny.texture, 8, 8);

  bunny.width = 10;
  bunny.height = 8;

  // Center the sprite's anchor point
  bunny.anchor.set(0);

  bunny.uvRespectAnchor = uvRespectAnchor;

  // Move the sprite to the center of the screen
  bunny.x = x;
  bunny.y = y;


  app.stage.addChild(bunny);
  
  bunny.scale.set(12);

  return bunny;
}


function startup() {
  const objectLeft = makeTilingSprite(
    Math.round(app.renderer.screen.width / 2 - 150),
    100,
    true,
  );
  const objectRight = makeTilingSprite(
    Math.round(app.renderer.screen.width / 2 - 150),
    150,
    false,
  );

  let y = 100;

  app.ticker.add(
    function handleTick() {
      //move position Y over time


      y += 0.05;

      objectLeft.y = y;
      objectRight.y = y + 100;


      if (y > 200) {
        y = 100;
      }

    }
  )

  if (objectLeft.height > 8 || objectRight.height > 8) {
    window.alert("height changed");
  }

}