更改瓦片地圖中單個瓦片的碰撞寬度和高度

Question

我正在 Phaser 3 中開發游戲，需要能夠將牆磚的碰撞寬度和高度更改為圖像寬度以外的其他內容，但我找不到任何不涉及 Tiled 的東西，我不能使用它，因為它是一個程序生成的游戲。

我找到了一種更改圖塊大小的方法，並且我知道如何獲取和單個圖塊，但沒有任何方法可以更改碰撞大小，而且我發現的幾條線索涉及已棄用的 createDynamicLayer 和 createStaticLayer 方法之間的差異。 瓦片對象的物理屬性為空，不包含瓦片的物理體，即使我設置了牆瓦片和玩家之間的碰撞（街機物理）。 有什么建議么？ 謝謝！

Answer 1

如果你不想使用偉大的應用程序“Tiled” ，最簡單的選擇是將應該有部分碰撞的瓦片設置為不碰撞，而不是迭代地圖瓦片並將不可見的靜態物理體放在上面。

它可能不是很優雅，但效果很好，如果屏幕上沒有 > 1000 個局部圖塊，這應該不是性能問題。

這是一個演示：

 document.body.style = 'margin:0;'; var config = { type: Phaser.AUTO, width: 536 /8, height: 42, zoom: 4.5, physics: { default: 'arcade', arcade: { gravity:{ y: 0 }, debug: false } }, scene: { create, update }, banner: false }; function create () { let graphics = this.make.graphics(); graphics.fillStyle(0x00ff00); graphics.fillRect(8, 0, 8, 8); graphics.fillStyle(0xff0000); graphics.fillRect(16, 0, 8, 8); graphics.fillStyle(0xff0000); graphics.fillRect(24, 0, 8, 8); graphics.generateTexture('tiles', 8*4, 8); var level = [ [1,1,1,1,1], [1,0,0,0,1], [1,0,3,0,1], [1,0,0,0,1], [1,1,1,1,1], ] // Map for the first level var map = this.make.tilemap({ data: level, tileWidth: 8, tileHeight: 8 }); var tiles = map.addTilesetImage('tiles'); var layer = map.createLayer(0, tiles, 0, 0); layer.setCollision(1); this.player = this.add.circle(16,16,4, 0xffffff).setDepth(2); this.physics.add.existing(this.player); this.physics.add.collider(layer, this.player); let partialCollisions = []; map.forEachTile((tile) => { if(tile.index == 3){ let partialCollition = this.add.circle(tile.pixelX + 4, tile.pixelY + 4, 1) this.physics.add.existing(partialCollition, true); partialCollisions.push(partialCollition) } }); this.physics.add.collider(partialCollisions, this.player); this.keys = this.input.keyboard.createCursorKeys(); } function update(){ let speed = 20; this.player.body.setVelocity(0) if(this.keys.up.isDown){ this.player.body.setVelocityY(-speed) } if(this.keys.down.isDown){ this.player.body.setVelocityY(speed) } if(this.keys.left.isDown){ this.player.body.setVelocityX(-speed) } if(this.keys.right.isDown){ this.player.body.setVelocityX(speed) } } new Phaser.Game(config);

 <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>