Jump to content

Matter collision not working


Pau
 Share

Recommended Posts

Hello,
In this game:
https://pablomonteserin.com/apuntes/web/js/canvas/phaser/ex/coches/8-colisiones-con-matter/index.html

the matter collision is not working. the players must to collision with the borders of the road, but it is not working. I am using matter collision.
This is the Javascript code:

class Escena extends Phaser.Scene {

  preload() {
    resize();
    this.load.tilemapTiledJSON('level1', '/apuntes/assets/phaser/coches/map-wahab-2-capas.json');
    this.load.image('nombreDelTilesetEnPhaser', '/apuntes/assets/phaser/coches/tiles.png');
    this.load.image('car1', '/apuntes/assets/phaser/coches/F1_amarillo_32x64.png');
    this.load.image('car2', '/apuntes/assets/phaser/coches/F1_azul_32x64.png');
    this.load.image('car3', '/apuntes/assets/phaser/coches/F1_rojo_32x64.png');
    this.load.image('car4', '/apuntes/assets/phaser/coches/F1_verde_32x64.png');
    this.load.image('upbtn', '/apuntes/assets/phaser/coches/acelerador.png');
    this.load.image('leftbtn', '/apuntes/assets/phaser/coches/flecha_giro.png');
  }

  create() {
    this.velocity = 0;
    const map = this.make.tilemap({key: 'level1'});
    const tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'nombreDelTilesetEnPhaser');
    const backgroundLayer = map.createDynamicLayer('carreteraLayer', tileset, 0, 0);
    const paredesLayer = map.createDynamicLayer('paredesLayer', tileset, 0, 0);
    const players = this.findObjectsByType('player', map, 'objectsLayer');

    map.setCollisionByProperty({ collides: true });
    this.matter.world.convertTilemapLayer(paredesLayer);

    this.matter.world.setBounds(map.widthInPixels, map.heightInPixels);
    this.matter.world.createDebugGraphic();
    this.matter.world.drawDebug = true;


    this.cursors = this.input.keyboard.createCursorKeys();

    //////////////////////////////
    this.player1 = this.matter.add.sprite(players[0].x, players[0].y, 'car1');
////////////////////////////

    this.player1.setFrictionAir(0.08);
    this.player1.setMass(30);
    this.player1.setFixedRotation();

    this.player2 = this.matter.add.sprite(players[1].x, players[1].y, 'car2');
    this.player3 = this.matter.add.sprite(players[2].x, players[2].y, 'car3');
    this.player4 = this.matter.add.sprite(players[3].x, players[3].y, 'car4');

    this.controlesVisuales();
  }

  findObjectsByType(type, tilemap, layer) {
    var result = [];
    tilemap.objects.forEach(function (element) {
      if (element.name === layer) {
        element.objects.forEach(function (element2) {
          if (element2.type === type) {
            element2.y -= tilemap.tileHeight;
            result.push(element2);
          }
        });
      }
    });
    return result;
  }

  update() {
    if ((this.cursors.up.isDown)) {
      this.player1.thrust(-0.03);
    }
    if (this.cursors.left.isDown)
      this.player1.setAngularVelocity(-0.065);

    else if (this.cursors.right.isDown)
      this.player1.setAngularVelocity(0.065);
  }

  controlesVisuales() {
    this.player1.parametros = {};
    this.player1.parametros.direccionHorizontal = 0;

    const leftbtn = this.add.sprite(30, 600, 'leftbtn').setInteractive();
    const rightbtn = this.add.sprite(100, 600, 'leftbtn').setInteractive();
    rightbtn.flipX = true
    const upbtn = this.add.sprite(60, 550, 'upbtn').setInteractive();

    rightbtn.on('pointerdown', () => {
      this.player1.parametros.direccionHorizontal = 1;
    });

    leftbtn.on('pointerdown', () => {
      this.player1.parametros.direccionHorizontal = -1;
    });

    upbtn.on('pointerdown', () => {
      this.player1.parametros.up = true;
    });

    rightbtn.on('pointerup', () => {
      this.player1.parametros.direccionHorizontal = 0;
    });

    leftbtn.on('pointerup', () => {
      this.player1.parametros.direccionHorizontal = 0;
    });

    upbtn.on('pointerup', () => {
      this.player1.parametros.up = false;
    });
  }
}

function resize() {
  const canvas = document.querySelector('canvas');
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  canvas.style.width = `${windowWidth}px`;
  canvas.style.height = `${windowHeight}px`;
}

const config = {
  type: Phaser.AUTO,
  width: 960,
  height: 640,
  scene: Escena,
  physics: {
    default: 'matter',
    matter: {
      gravity: {
        y: 0,
      },
    },
  },
};

new Phaser.Game(config);
window.addEventListener('resize', resize, false);


¿Can help me?

Thank you in advance

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...