How can I properly scale Phaser sprites?

Question

I have a couple problems with sprite scaling which seem to work fine for other people. So, this is my game:

As you can see there are 2 big problems: the images are really pixelated and texture bleeding.

This is my config:

var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: '100%',
height: '100%',
mode: Phaser.Scale.RESIZE,
autoCenter:Phaser.Scale.CENTER_BOTH,
physics: {
  default: 'arcade',
  arcade: { 
    debug: true,
  },
pixelArt:true,
render:{
  antialias: false,
}
},

scene: {
  preload: preload,
  create: create,
  update: update,
} 
};

This is how I preload my assets:

function preload(){
  this.load.image("tiles", "assets/turtle_wars_tiles.png");
  this.load.tilemapTiledJSON("tutorial_map", "assets/tutorial_map.json");
  //preloading player
  this.load.spritesheet("player", "assets/characters.png", {
  frameWidth: 26,
  frameHeight: 36,
  });
}

And this is how I create the tilemap:

  const map = this.make.tilemap({ key: "tutorial_map", tileWidth:48,tileHeight:48 });
  const tileset = map.addTilesetImage("turtle_wars_tiles", "tiles");

  for (let i = 0; i < map.layers.length; i++) {
    const layer = map.createStaticLayer(i, tileset,0,0)
    layer.setDepth(i);
    layer.setScale(5)
    layer.setCollisionByProperty({ collides: true });
    this.physics.add.collider(this.player.collider, layer).collideCallback = () =>{
    this.player.collide()
    };
  }

I tried extruding my tile set of 16x16 tiles but it messes up my whole map and it only solves texture bleeding.

Any idea how can I solve this?

Answer 1

I just tried it on a small demo project, I think the solution is just, to edit your game - config to this (check code below).

Info: You added the correct properties, but only into the physics- Object. I belongs one level higher.

Like this it should work:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: '100%',
    height: '100%',
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
        },
    },
    pixelArt: false,
    render: {
        antialias: false,
    }
    ...
};