Collision/Overlap not detecting

Phaser 2 / CE
1

I want to stop the canin when it collides with landSpryt but the contact is not detected.

var game = new Phaser.Game(1240, 540, Phaser.CANVAS, "phaser-example", {
  preload: preload,
  create: create,
  update: update
  // render: render
});

var canin, canin2, wepin, wepin2, cursors, turn, landSpryt, land;

function preload() {
  this.load.image("backdrop", "/Blis.png");
  this.load.image("cannon", "https://i.ibb.co/FH5ZqwL/Canin.png");
  this.load.image("cannon2", "/caninFlipt.png");
  this.load.image("comet", "https://i.ibb.co/W0rgWwf/Fireball.png");
  this.load.image("terayn", "/graas.png");
  this.load.tilemapTiledJSON("map", "/Terrayn.json");
  this.load.image("tiles", "/TS.png");
}

function create() {
  game.physics.arcade.gravity.y = 100;
  turn = true;
  // this.cameras.main.centerOn(800, 1300);
  this.add.image(0, -50, "backdrop");
  canin2 = this.add.sprite(494, 428, "cannon2");
  game.physics.arcade.enable(canin2);
  canin = this.add.sprite(94, 228, "cannon");
  land = this.add.bitmapData(1240, 540);
  land.draw("terayn");
  landSpryt = game.make.sprite(0, 0, land);
  this.add.existing(landSpryt);
  // land.body.static = true;
  game.physics.arcade.enable(canin);
  wepin = this.add.weapon(30, "comet");
  // wepin.bulletGravity = 60;
  wepin.bulletSpeed = 200;
  wepin.trackSprite(canin, 18, -10, true);
  wepin2 = this.add.weapon(30, "comet");
  // wepin.bulletGravity = 60;
  wepin2.bulletSpeed = 200;
  wepin2.trackSprite(canin2, 0, 0, true)
}

function stop() {
  canin.body.moves = false;
  console.log("Collided");
}
function update() {
  game.physics.arcade.overlap(canin, landSpryt, stop, null, this);
  cursors = this.input.keyboard.createCursorKeys();
  if (turn) {
    if (cursors.left.isDown) {
      canin.body.angularVelocity = -90;
    } else if (cursors.right.isDown) canin.body.angularVelocity = 90;
    else canin.body.angularVelocity = 0;
    // this.world.wrap(sprite, 16);
  } else {
    if (cursors.left.isDown) {
      canin2.body.angularVelocity = -90;
    } else if (cursors.right.isDown) canin2.body.angularVelocity = 90;
    else canin2.body.angularVelocity = 0;
    // this.world.wrap(sprite, 16);
  }
}

I have tried both game.physics.arcade.overlap(canin, landSpryt, stop, null, this); and game.physics.arcade.collide(canin, landSpryt, stop, null, this);

What’s wrong?

2

Maybe you haven’t enabled landSpryt?
I’m not sure what you’re hoping to achieve here. Your terrain physics body will be a rectangle, and not follow the outline. You could just position the cannon, and have allowGravity = false.

3

Why will my terrain be a rectangle?

Anyway, that won’t work when I have to move the cannon left or right. Basically I need my cannon to move along the terrain; how shall I achieve this?

Thanks again

4

Arcade physics is very limited, it is not suited for this. The collision shape is a box or circle.
For Phaser 2 you can use P2, Phaser 3 uses Matter, and then you have to define the terrain shape (https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs).

Some tutorials:

https://www.emanueleferonato.com/tag/risky-road/
https://loonride.com/learn/phaser/terrain-for-vehicles