PixiJS 5.3.7

tiling sprite bleeding

by realhunts

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;


const stage = app.stage;// = new PIXI.display.Stage();
const light = new PIXI.lights.PointLight(0xffffff, 1);

stage.addChild(new PIXI.display.Layer(PIXI.lights.diffuseGroup));
stage.addChild(new PIXI.display.Layer(PIXI.lights.normalGroup));
stage.addChild(new PIXI.display.Layer(PIXI.lights.lightGroup));

// 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 = 100;
    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);
  
    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 + 50),
     100,
      false,
    );
  
		let y = 100;
  
    app.ticker.add(
      function handleTick() {
			//move position Y over time
			
			
        y += 0.05;   
			 
			 objectLeft.y = y | 0;
			 objectRight.y = y | 0;
        
				
				if(y > 200){
				y = 100;
				}
				
      }
    )
		
		if(objectLeft.height > 8 || objectRight.height > 8){
		   window.alert("height changed");		
		}
		
}