如何让玩家与墙壁发生碰撞?

时间:2021-02-21 20:55:47

标签: javascript game-physics phaser-framework 2d-games tiled

我正在尝试创建一个自上而下的射击游戏,我正在使用 Tiled 创建我的地图。我制作了地图并将其导出为 .json 文件。我终于能够让地图出现在我的游戏中,但是我很难让碰撞起作用。 我已经学习了几个小时的教程,似乎在阳光下尝试了一切,但没有运气。我在 Tiled 中有一个对象层,墙壁上标有插入矩形工具。我在编辑图块集菜单中还用插入矩形标记了每个墙砖。但我仍然无法让它工作。墙壁是第 1 层瓷砖,地面是第 2 层瓷砖,对象层称为碰撞,瓷砖集名称为瓷砖 48x48。这是我所有的相关代码:

var game = new Phaser.Game(1440, 960, Phaser.man, 'phaser-example', { preload: preload, create: create, update: update, render: render });

var sprite

//sounds
var music

//movement
var controls
var cursors

//shooting
var fireRate = 200;
var nextFire = 0;
var Bullets

//map
var map
var walls
var ground
//var collision


function preload() {

    game.load.audio('groove', ['sewer groove.mp3']);
    game.load.audio('gunshot', 'pistol.mp3');

    game.load.image('player', 'player lite.png');
    game.load.image('bullet', 'bullet.png');

    game.load.tilemap('map', 'sewermap.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles 48x48','tiles 48x48.png')

    
    
}


function create() {

    map = game.add.tilemap('map');
    map.addTilesetImage('tiles 48x48');
    //var tileset = map.addTilesetImage('map','tiles 48x48');
    //map.physics.arcade.enable(sprite, Phaser.Physics.ARCADE);

    
    ground = map.createLayer('Tile Layer 2');
    walls = map.createLayer('Tile Layer 1');
    //collision = map.createLayer('Object Layer 1')

    map.setCollisionBetween(0, 65, true, 'Tile Layer 1');

    //sprite.body.collideWorldbounds = true;


    //layer.resizeWorld();



    music = game.add.audio('groove',1,true);
    music.play();

    game.physics.startSystem(Phaser.Physics.ARCADE);

    //game.physics.startSystem(Phaser.Physics.P2JS)

    game.stage.backgroundColor = '#313131';

    bullets = game.add.group();
    bullets.enableBody = true;
    bullets.physicsBodyType = Phaser.Physics.ARCADE;

    bullets.createMultiple(50, 'bullet');
    bullets.setAll('checkWorldBounds', true);
    bullets.setAll('outOfBoundsKill', true);
    
    sprite = game.add.sprite(620, 920, 'player');
    sprite.anchor.set(0.5, 0.5);

    //game.physics.p2.enable(sprite)

    game.physics.arcade.enable(sprite, Phaser.Physics.ARCADE);

    sprite.body.allowRotation = true;

    cursors = game.input.keyboard.createCursorKeys();
}


function update() {

    game.physics.arcade.collider(sprite, walls);


    //console.log(sprite.rotation);
    sprite.rotation = game.physics.arcade.angleToPointer(sprite);

    if (game.input.activePointer.isDown)
    {
       fire();
    }


    //sprite.body.setZeroVelocity();

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        sprite.x -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        sprite.x += 4;
    }

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
    {
        sprite.y -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
    {
        sprite.y += 4;
    }

    

    }

    function fire() {

    if (game.time.now > nextFire && bullets.countDead() > 0)
    {
        nextFire = game.time.now + fireRate;

        var bullet = bullets.getFirstDead();

        bullet.reset(sprite.x - 8, sprite.y - 8);

        game.physics.arcade.moveToPointer(bullet, 300);

    }

}







function render() {

    game.debug.text('Active Bullets: ' + bullets.countLiving() + ' / ' + bullets.total, 32, 32);
    game.debug.spriteInfo(sprite, 32, 450);
    //game.debug.spriteBounds(sprite);
    //game.debug.spriteBounds(bullets);
    //game.debug.body(sprite);

}

1 个答案:

答案 0 :(得分:0)

好吧,我有机会看看这个,问题应该仅仅在于你如何移动主要玩家:

sprite.x -= 4;

碰撞只会在物体有速度时触发,the following table by samme should sum it up

例如,您可以应用加速度以将角色移向您所指的方向:

  if (game.input.keyboard.isDown(Phaser.Keyboard.UP) || game.input.keyboard.isDown(Phaser.Keyboard.W)) {
    game.physics.arcade.accelerationFromRotation(sprite.rotation, 200, sprite.body.acceleration);
  } 

enter image description here

在图像中,当没有按下任何东西时,我还应用了一定的阻力并降低了加速度,但这就是您的要求:

  sprite.body.drag.x = 200;
  sprite.body.drag.y = 200;

如果你想扫射,一个想法可能是处理多个压力机并相应地应用不同的加速旋转(使用 Phaser.Math.degToRad 转换各种度数)

为了调试,如果需要,您可能需要使用以下一些方法:

  [...]

  walls = map.createLayer("Tile Layer 1");
  walls.debug = true;

  [...]

  function collisionHandler(obj1, obj2) {
    console.log("Colliding!", obj1, obj2)
  }
  game.physics.arcade.collide(sprite, walls, collisionHandler, null, this);
  game.debug.body(sprite);