Phaser Physics GameObject Disappearing When Applying Physics

Phaser 3
1

well, i have just started learning js and ts for game development and am following a video course on the same. I have successfully specified an object and added it to the gamescreen. The object is interactive and i can change its alpha by clicking on it. But after adding the necessary phaser physics modules and references, the object simply disappears from the screen.

I was expecting the game object to move in the directions specified in the update function. Here are my code, its not in its original shape as i Have done some trial and error. But the problem remains- whenever i try to add some physics related code, the gameobject simply disappears from the game screen.

import 'phaser'



import PreloadScene from './scenes/preloadScene'
import MainScene from './scenes/mainScene'

export const GameScreen = {
    width: 800,
    height: 600,
  };
  

const config = {
    type: Phaser.AUTO,
    backgroundColor: "#ffffe0",
    scale:{
        parent: 'phaser-game',
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: GameScreen.width,
        height: GameScreen.height
    },
    scene:[PreloadScene,MainScene],

    Physics:{
        default: 'arcade',  
        arcade:{
            debug:true,
            gravity:{y:200}
        }
       
    
    }
}
window.addEventListener('load', () => {
    const game = new Phaser.Game(config)
    
})

Main Scene

import Rocket from "../objects/rocket"; 
export default class MainScene extends Phaser.Scene{

    rocket: Rocket
    constructor(){
        super({
            key: 'MainScene'
        })
    }
    create(){
       this.rocket= new Rocket(this, this.cameras.main.width/2, this.cameras.main.height/2)
       //this.rocket.body.velocity.x +=3;
    }

    /*update(time: number, delta:number): void{
        this.rocket.body.velocity.x +=3;
       // this.rocket.body.velocity.y (3);
    }*/

}

Rocket GameObject

export default class Rocket extends Phaser.Physics.Arcade.Sprite{

constructor(scene, x,y){
    super(scene, x, y, 'rocket')

    scene.add.existing(this)
    
    

    this.setInteractive().on('pointerdown',() =>  {
           this.alpha= 0.5})
        
    }
     
    
}

This post is a replica of:

I couldnt get any help over there, so i am posting my issue here!

Thanks in advance, :slight_smile:

2

Change Physics to physics.

Open the browser’s Developer Tools console and look for errors. I think you’ll see this.rocket.body is null.

3

Yes, changing the p fixed that error but the larger problem persists. when in the update function i pass out this command

this.rocket.body.velocity.y += 3;

the gameobject still disappears.

4

There are no errors in the console now?

5

this is the console without the physics code:

image

it appears that though there aren’t any apparent errors, the value of velocity is null which is causing the problem. Can you tell me how to fix that?

6

Add to class Rocket constructor:

scene.physics.add.existing(this);
7

now, all the errors are fixed in the console:

image
but the gameobject still disappears after adding the update code

8

It doesn’t disappear for me.

https://phaser.io/sandbox/kDjTwEmN

9

Got it, i replaced

scene.add.existing(this)
with

scene.physics.add.existing(this);

Actually both need to stay. Thanks a lot for helping me out buddy!