Strange effect with pixelart

Phaser 3
6

Thanks @Maup-Maup

I have write a basic example following your advices and it reproduce my distorted spritesheet.
The bug appears only when i switch to a specific model (pixel2 or iphoneX). On galaxy S5 the spritesheet is not distorded.

example

Peek 29-10-2021 14-12

source

Here is the zip file :
test_sprite_sheet.zip (5.0 KB)

For those who don’t want to download this, here is the source code per files :

index.html

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<div id="game-div"></div>
	<meta charset="utf-8">
	<meta lang="en-us">
	<title>Space Shooter</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js"></script>
</head>

<body>
	<script src="js/main.js"></script>
	<script src="js/game.js"></script>
</body>

</html>

index.css

body {
	height: 100%;
	margin: 0;
	top: 0;
	left: 0;
	padding: 0;
	background: rgb(255, 133, 133);
	font: caption;
}

#game-div canvas {
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

main.js

class Main extends Phaser.Scene {
	constructor() {
		super({
			key: "Main"
		});
	}

	preload() {
		this.load.spritesheet("player", "player.png", {
			frameWidth: 24,
			frameHeight: 24
		});
	}
	create() {
		var camera = this.cameras.add(0, 0, 160, 320).setBackgroundColor("#ffa4a4")
		var player = this.add.sprite(100, 200, "player")
		player.scene.anims.create({
			key: 'normal',
			frames: player.scene.anims.generateFrameNumbers("player", {
				frames: [0, 1, 2, 3, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
			}),
			frameRate: 8,
			repeat: -1,
		})
		player.anims.play('normal')
	}

	update() {
	}
}

game.js

var config = {
	type: Phaser.WEBGL,
	width: 160,
	height: 320,
	scale: {
		mode: Phaser.Scale.FIT,
		autoCenter: Phaser.Scale.CENTER_BOTH,
		parent: "game-div",
		zoom: 1,
	},
	backgroundColor: "black",
	physics: {
		default: "arcade",
		arcade: {
			gravity: {
				x: 0,
				y: 0
			},
			debug: false,
		}
	},
	scene: [
		Main,
	],
	pixelArt: true,
	roundPixels: true,
};

var game = new Phaser.Game(config);