javascript 更改切片图中各个切片的冲突宽度和高度

lf5gs5x2  于 2022-12-17  发布在  Java
关注(0)|答案(1)|浏览(118)

我正在Phaser 3中开发一个游戏,需要能够将墙壁瓷砖的碰撞宽度和高度更改为图像宽度以外的东西,但我找不到任何不涉及瓷砖的东西,我不能使用瓷砖,因为它是一个程序生成的游戏。
我发现了一个改变瓦片大小的方法,我知道如何获取一个单独的瓦片,但是没有改变碰撞大小的方法,我发现的一些线索涉及到createDynamicLayer和createStaticLayer方法之间的差异。瓦片对象的物理属性为空,不包含瓦片的物理主体,即使我设置了墙砖和玩家之间的碰撞(街机物理)。有什么建议吗?谢谢!

93ze6v8z

93ze6v8z1#

如果你不想使用伟大的应用程序**“平铺”**,最简单的选择是将应该有部分碰撞的平铺设置为不碰撞,然后迭代Map平铺,并将不可见的静态物理体放在上面。
这可能不是很优雅,但它工作得很好,如果你没有超过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>

相关问题