Tengo un par de problemas con la escala de sprites que parecen funcionar bien para otras personas. Entonces, este es mi juego:
Como puedes ver hay 2 grandes problemas: las imágenes están realmente pixeladas y la textura sangra.
Esta es mi configuración:
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, } };
Así es como precargo mis activos:
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, }); }
Y así es como creo el mapa de mosaicos:
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() }; }
Intenté extruir mi conjunto de mosaicos de mosaicos de 16x16 pero estropea todo mi mapa y solo resuelve el sangrado de textura.
¿Alguna idea de cómo puedo solucionar esto?
Acabo de probarlo en un pequeño proyecto de demostración, creo que la solución es simplemente editar su juego - config
a esto (verifique el código a continuación) .
Información: Agregó las propiedades correctas, pero solo en la physics
- Objeto . Pertenezco un nivel más alto.
Así debería funcionar:
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, } ... };