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.
Game.ts
<code>
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)
})
<code>
Main Scene
<code>
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);
}*/
}
<code>
`export default class Rocket extends Phaser.Physics.Arcade.Sprite{
Rocket
<code>
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})
}
}
I would try the following:
- Set
gravity: { y: 0 }to stop the rocket from being dragged off the screen. - Hard-code the x and y values instead of using the camera size. Try
400,300. - In your Rocket class, after
scene.add.existing(this)add:
scene.physics.add.existing(this);
If you view source (Edit button) on this Phaser labs example, it’s basically doing what you’re trying to do, so is a good point of reference: https://labs.phaser.io/view.html?src=src%5Cphysics%5Carcade%5Cextending%20arcade%20sprite.js