Connecting collider to a scene

Phaser 3
1

I am trying to connect a collider with the player and a portal image so it can take you to the second part of the game but all it is showing is a black screen.

here is the code for collider

this.physics.add.collider(this.player, this.portal, this.portalSends, null, this);

This is the function that starts the scene.

portalSends(player, portal) {
this.scene.start(“gamePart2”);
}

below is the game part 2 code

class second extends Phaser.Scene {
constructor() {
super(“gamePart2”);
}

preload() {
this.load.image(‘bg’, ‘./resources/scriptJS/assets/mars.jpg’);

this.load.spritesheet('spaceP', './resources/scriptJS/assets/spritesheet.png', { frameWidth: 122.4, frameHeight: 136 });
this.load.spritesheet('enemy', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy1', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy2', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy3', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy4', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy5', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy6', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy7', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy8', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy9', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });
this.load.spritesheet('enemy10', './resources/scriptJS/assets/enemy1.png', { frameWidth: 65, frameHeight: 75 });

this.load.image('restartButton', './resources/scriptJS/assets/restartButton.png');
this.load.image('backMenu', './resources/scriptJS/assets/menu.png');

this.load.image('tracer', './resources/scriptJS/assets/laser.png');
this.load.image('homeback', './resources/scriptJS/assets/homebackground.gif');
this.load.image('ship', './resources/scriptJS/assets/firstShip.png');
this.load.image('game_Over', './resources/scriptJS/assets/game_Over.jpg');

}

create() {

// this.state.start(‘MainMenu’);

this.bg = this.add.image(0, 0, 'bg').setOrigin(0);
this.bg = this.add.image(0, 600, 'bg').setOrigin(0);
this.bg = this.add.image(600, 0, 'bg').setOrigin(0);
this.bg = this.add.image(600, 600, 'bg').setOrigin(0);
this.bg = this.add.image(0, 1200, 'bg').setOrigin(0);
this.bg = this.add.image(1200, 0, 'bg').setOrigin(0);
this.bg = this.add.image(1200, 1200, 'bg').setOrigin(0);
this.bg = this.add.image(600, 1200, 'bg').setOrigin(0);
this.bg = this.add.image(1200, 600, 'bg').setOrigin(0);


this.ship = this.add.image(150,70, 'ship');

this.player = this.physics.add.sprite(285, 140, 'spaceP').setScale(.5);
this.player.setCollideWorldBounds(true);

//enemy Sprites

this.enemy = this.physics.add.sprite(600, 800,  'enemy').setScale(.9);
this.enemy.setCollideWorldBounds(true);

this.enemy1 = this.physics.add.sprite(700, 400, 'enemy1').setScale(.9);
this.enemy1.setCollideWorldBounds(true);

this.enemy2 = this.physics.add.sprite(800, 200, 'enemy2').setScale(.9);
this.enemy2.setCollideWorldBounds(true);

this.enemy3 = this.physics.add.sprite(555, 300, 'enemy3').setScale(.9);
this.enemy3.setCollideWorldBounds(true);

this.enemy4 = this.physics.add.sprite(800, 100, 'enemy4').setScale(.9);
this.enemy4.setCollideWorldBounds(true);

this.enemy5 = this.physics.add.sprite(599, 400, 'enemy5').setScale(.9);
this.enemy5.setCollideWorldBounds(true);

this.enemy6 = this.physics.add.sprite(698, 676, 'enemy6').setScale(.9);
this.enemy6.setCollideWorldBounds(true);

this.enemy7 = this.physics.add.sprite(778, 845, 'enemy7').setScale(.9);
this.enemy7.setCollideWorldBounds(true);

this.enemy8 = this.physics.add.sprite(456, 789, 'enemy8').setScale(.9);
this.enemy8.setCollideWorldBounds(true);

this.enemy9 = this.physics.add.sprite(1000, 600, 'enemy9').setScale(.9);
this.enemy9.setCollideWorldBounds(true);

this.enemy10 = this.physics.add.sprite(600, 600, 'enemy10').setScale(.9);
this.enemy10.setCollideWorldBounds(true);





this.cameras.main.setZoom(1.5);

this.cameras.main.setBounds(0, 0, 600 * 2, 600 * 2, true, true, true, true);

//border problem fixed here
this.physics.world.setBounds(0, 0, 578 * 2, 578 * 2, true, true, true, true);

this.cameras.main.startFollow(this.player, true, 0.5, 0.5)

//player Animation

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('spaceP', { start: 0, end: 11 }),
    frameRate: 20,
    repeat: -1
});


this.anims.create({
    key: 'turn',
    frames: [ { key: 'spaceP', frame: 12 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('spaceP', { start: 0, end: 11 }),
    frameRate: 20,
    repeat: -1
});



this.anims.create({
    key: 'up',
    frames: this.anims.generateFrameNumbers('spaceP', { start: 12, end: 14 }),
    frameRate: 20,
    repeat: -1

});

this.anims.create({
    key: 'down',
    frames: this.anims.generateFrameNumbers('spaceP', { start: 12, end: 14 }),
    frameRate: 20,
    repeat: -1

});


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

this.enemy.setVelocity(150, 150);
this.enemy.setBounce(1, 1);
this.enemy.setCollideWorldBounds(true);

this.enemy1.setVelocity(-150, 150);
this.enemy1.setBounce(1, 1);
this.enemy1.setCollideWorldBounds(true);

this.enemy2.setVelocity(-150, -150);
this.enemy2.setBounce(1, 1);
this.enemy2.setCollideWorldBounds(true);

this.enemy3.setVelocity(150, -150);
this.enemy3.setBounce(1, 1);
this.enemy3.setCollideWorldBounds(true);

this.enemy4.setVelocity(-100, 100);
this.enemy4.setBounce(1, 1);
this.enemy4.setCollideWorldBounds(true);

this.enemy5.setVelocity(-100, -100);
this.enemy5.setBounce(1, 1);
this.enemy5.setCollideWorldBounds(true);

this.enemy6.setVelocity(100, -100);
this.enemy6.setBounce(1, 1);
this.enemy6.setCollideWorldBounds(true);

this.enemy7.setVelocity(-50, 50);
this.enemy7.setBounce(1, 1);
this.enemy7.setCollideWorldBounds(true);

this.enemy8.setVelocity(-50, -50);
this.enemy8.setBounce(1, 1);
this.enemy8.setCollideWorldBounds(true);

this.enemy9.setVelocity(50, -50);
this.enemy9.setBounce(1, 1);
this.enemy9.setCollideWorldBounds(true);

this.enemy10.setVelocity(-250, -250);
this.enemy10.setBounce(1, 1);
this.enemy10.setCollideWorldBounds(true);


this.physics.add.collider(this.enemy, this.laser);

this.physics.add.collider(this.player, this.enemy, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy1, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy2, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy3, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy4, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy5, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy6, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy7, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy8, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy9, this.playerDie, null, this);
this.physics.add.collider(this.player, this.enemy10, this.playerDie, null, this);

}

enemyHit(enemy, tracer) {
this.enemy.setVisible(false);
this.tracer.setVisible(false);
}

playerDie(player, enemy) {

this.physics.pause();
var square = this.add.graphics();

// x and y positions
const x = this.cameras.main.worldView.x + this.cameras.main.width / 2 + 130;
const y = this.cameras.main.worldView.y + this.cameras.main.height / 2 - 150;

const widthQ = this.cameras.main.worldView.x + this.cameras.main.width / 2 - 150;
const heightQ = this.cameras.main.worldView.y + this.cameras.main.height / 2 - 200;

const xB = this.cameras.main.worldView.x + this.cameras.main.width / 2 + 360;
const yB = this.cameras.main.worldView.y + this.cameras.main.height / 2 + 40;

const xB2 = this.cameras.main.worldView.x + this.cameras.main.width / 2 + 360;
const yB2 = this.cameras.main.worldView.y + this.cameras.main.height / 2 + 170;

//text

this.add.text(x, y, 'Game Over ', {
  fontFamily: 'Roboto Flex',
  fontSize: '100px',
  color: '#000000',
  fontStyle: 'normal',
  align: 'center',
  shadow: { offsetX: 10, offsetY: 5, color: '#0000FF', fill: true, blur: 2 },
  padding: { left: null },
  wordWrap: { width: 0 },
  fixedWidth: 600
}).setOrigin(0.5);

//buttons

const helloButton = this.add.image(xB, yB, 'restartButton').setScale(0.2);
helloButton.setInteractive();
helloButton.on('pointerup', () => { this.scene.start("play"); });



const Button = this.add.image(xB2, yB2, 'backMenu').setScale(1);
Button.setInteractive();
Button.on('pointerup', () => { this.scene.start("StartGame"); });




//bg
square.fillStyle(0x222222, 0.8);

square.fillRect(widthQ, heightQ, 1050, 605).setOrigin(0.5);

}

update() {

if(this.cursors.space.isDown && this.player.flipX == false) {
  this.laser = this.physics.add.sprite(this.player.x + 30, this.player.y - 5, 'tracer').setScale(.02);
  this.laser.setVelocityX(200);
}

if(this.cursors.space.isDown && this.player.flipX == true) {
  this.laser = this.physics.add.sprite(this.player.x - 30, this.player.y - 5, 'tracer').setScale(.02);
  this.laser.setVelocityX(-200);
}  


if(this.cursors.left.isDown) {
    this.player.setVelocityX(-110);
    this.player.anims.play('left', true);
    this.player.flipX = true;
  } else if (this.cursors.right.isDown) {
       this.player.setVelocityX(110);
       this.player.anims.play('right', true);
       this.player.flipX = false;
       } else {
        this.player.setVelocityX(0);
        this.player.anims.play('right', false);
    }  
   
    if (this.cursors.up.isDown) {
        this.player.setVelocityY(-110);
        this.player.anims.play('up', true);
      } else {
        this.player.setVelocityY(0);
      }
     
     
    if  (this.cursors.down.isDown) {
    this.player.setVelocityY(110);
    this.player.anims.play('down', true);
 }

}
}

var config = {
type: Phaser.AUTO,
width: 1350,
height: 640,
physics: {
default: ‘arcade’,
arcade: {
enableBody: true,
}
},
scene: [home, menu, first, second]
};

var game = new Phaser.Game(config);

2

Have you looked in the console for errors?

3

I looked in the console for errors but it did not show any errors about the scene not working.

4

Add a console.log() to portalSend() and each scene create() so you can see what’s running when.

The game turns black after something was showing before, I assume?

5

yes the first part of the game was running before

6

All of the scene are running in the correct order and so is the portal sends function but when I added the console.log message in the second part of the games create function, the console message did not show up in the console.

7

please answer as soon as possible, thank you.

8

I ran that code (adapted slightly), called portalSends(), and saw second’s create() was called and its game objects were on the screen.

Add a console.log() to second’s preload() also.

9

I went into the game and tried inspecting it so I could see the console but my computer did not let me inspect any websites including my game so I could look in the console. Do you know how I could look at the console.log messages from VS code instead of from the game running on google?

10

so I figured out that I had to add the second’s name in my scenes so it could work but that caused the first’s game physics to get messed up because now the gravity is super slow and when the player jumps it doubles the height that it jumps in. I changed the gravity in the code but it did not change the gravity in the game.

11

Thanks for the help.