try reproduce bug pixel ratio
PixiJS 5.3.7, try reproduce https://github.com/4ian/GDevelop/issues/2155
by Bouh
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,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAeSURBVBhXY/j//z8DEoBygRSaBLpCIgGarv///wMAjykU7A0lFAMAAAAASUVORK5CYII=" />
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: 96,
height: 64,
view: document.getElementById("pen-canvas"),
backgroundColor: 0xffffff,
});
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.Sprite(app.loader.resources.bunny.texture, 8, 8);
bunny.width = 6;
bunny.height = 6;
// 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;
bunny.anchor.set(0);
app.stage.addChild(bunny);
return bunny;
}
function startup()
{
const objectLeft = makeTilingSprite(
Math.round(app.renderer.screen.width / 2 -15),
10,
true,
);
const objectRight = makeTilingSprite(
Math.round(app.renderer.screen.width / 2 + 10),
10,
false,
);
let y = 10;
app.ticker.add(
function handleTick() {
//move position Y over time
y += 0.05;
objectLeft.y = y;
objectRight.y = y;
if(y > 40){
y = 10;
}
}
)
}