Sprites being distorted

Phaser 3
1

15%20PM
15%20PM550×654 1.75 KB

i was trying to fix some lines appearing on the tilemaps but in the prosses, my main sprite for some unknown reason got distorted

var config = {
type: Phaser.AUTO,
width: 720,
height: 480,
roundPixels: true,
zoom:25,
pixelArt: true,
physics: {
default:‘arcade’,
arcade: {
gravity: {y: 1500}
}
},
scene: [level1]
};

var game = new Phaser.Game(config);

class level1 extends Phaser.Scene{
constructor(){
super({key:“level1”})
}
preload(){
this.load.image(‘level1Tiles’,‘assets/tiles1.png’)
//bk tilemap
this.load.tilemapCSV(‘level1bk’,‘csv/Level1 - bk.csv’)
//world tilemap
this.load.tilemapCSV(‘level1w’,‘csv/Level1 - world.csv’);

	// playersprite
	this.load.spritesheet('player','assets/player.png',{frameWidth:16, frameHeight: 26 });
}
create(){
	//cursor
	this.cursors = this.input.keyboard.createCursorKeys();
	//bk tiles
	const bkmap = this.make.tilemap({key:'level1bk', tileWidth:16, tileHeight:16});
	const bktiles = bkmap.addTilesetImage('level1Tiles');
	const bklayer = bkmap.createStaticLayer(0,bktiles,0,0)
	//mainworld tiles
	const wmap = this.make.tilemap({key:'level1w', tileWidth:16, tileHeight:16});
	const wtiles = wmap.addTilesetImage('level1Tiles');
	const wlayer = wmap.createDynamicLayer(0,wtiles,0,0)
	
	//player
	this.player = this.physics.add.sprite(16,128,'player');
	this.player.setBounce(0);
	this.player.setCollideWorldBounds(true);
	//player animations
	this.anims.create({
		key:"idle",
		frames: this.anims.generateFrameNumbers('player',{frames:[0,1]}),
		frameRate: 5,
		repeat: -1
	});
	this.anims.create({
		key:"move",
		frames: this.anims.generateFrameNumbers('player',{frames:[3,5,6,5]}),
		frameRate: 12,
		repeat: -1
	});
	//camera
	this.cameras.main.setBounds(0,0,1440,480);
	this.cameraDolly = new Phaser.Geom.Point(this.player.x, this.player.y);
	this.cameras.main.startFollow(this.cameraDolly);
	//collision
	wmap.setCollisionBetween(0,2)
	this.physics.add.collider(this.player,wlayer);
}
update(){
	//camera
	this.cameraDolly.x = Math.floor(this.player.x);
	this.cameraDolly.y = Math.floor(this.player.y)
	//movement
	if(this.cursors.up.isDown){
		this.player.setVelocityY(-250);
	}
	if(this.cursors.right.isDown){
		this.player.anims.play('move',true);
		this.player.setVelocityX(150)
		this.player.flipX = false;
	} else if(this.cursors.left.isDown){
		this.player.anims.play('move',true);
		this.player.setVelocityX(-150);
		this.player.flipX = true;
	} else{
		this.player.setVelocityX(0);
		this.player.anims.play('idle',true);
	}
}

}

2

You should add the following object in your config:

render: { pixelArt: true, antialias: false }
3

thank you

4

I thought pixelArt=true includes antialias=false.