如何正确缩放 Phaser 精灵？

Question

我在 sprite 缩放方面遇到了一些问题，但似乎对其他人来说效果很好。所以，这是我的游戏：

如您所见，存在 2 个大问题：图像像素化和纹理渗色。

这是我的配置：

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,
} 
};

这是我预加载资产的方式：

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,
  });
}

这就是我创建 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()
    };
  }

我尝试挤压我的 16x16 瓷砖集，但它弄乱了我的整个地图，它只解决了纹理渗色问题。

知道如何解决这个问题吗？

Answer 1

我刚刚在一个小型演示项目上尝试过，我认为解决方案只是将您的游戏 - config 编辑为 （检查下面的代码）。

信息： 您添加了正确的属性，但只添加到 physics- 对象中。我属于高一级。

像这样它应该可以工作：

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,
    }
    ...
};

如何正确缩放 Phaser 精灵？

How can I properly scale Phaser sprites?

javascript

phaser-framework