# Connecting collider to a scene

**URL:** <https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354>\
**Category:** Phaser 3\
**Created:** [June 20, 2023, 7:12pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354 "2023-06-20T19:12:35Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 20, 2023, 7:12pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/1 "2023-06-20T19:12:35Z")

</div>

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);

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 20, 2023, 7:33pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/2 "2023-06-20T19:33:20Z")

</div>

Have you looked in the console for errors?

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 20, 2023, 7:43pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/3 "2023-06-20T19:43:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 20, 2023, 10:44pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/4 "2023-06-20T22:44:56Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 20, 2023, 11:02pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/5 "2023-06-20T23:02:49Z")

</div>

yes the first part of the game was running before

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 20, 2023, 11:12pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/6 "2023-06-20T23:12:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 21, 2023, 10:34pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/7 "2023-06-21T22:34:53Z")

</div>

please answer as soon as possible, thank you.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 21, 2023, 11:27pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/8 "2023-06-21T23:27:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 22, 2023, 4:39pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/9 "2023-06-22T16:39:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 22, 2023, 6:31pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/10 "2023-06-22T18:31:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doodleCubeCoder](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/doodlecubecoder/32/7660_2.png) [@doodleCubeCoder](https://phaser.discourse.group/u/doodleCubeCoder)\
**Post date:** [June 22, 2023, 6:31pm UTC](https://phaser.discourse.group/t/connecting-collider-to-a-scene/13354/11 "2023-06-22T18:31:28Z")

</div>

Thanks for the help.