hello everyone! Im coding an asteroids clone with phaser3. Right now the game consists of a ship and 4 asteroids that reappear when all of them are destroyed. What Im trying to implement without success is the spawn of two smaller asteroids when a bigger one is destroyed. The smaller asteroids should spawn in the location of the destroyed asteroid, so far I have tried to copy the location method of the bigger asteroids and passing them x and y coordinates but its not working, sometimes the result is like 30 asteroids on screen, and sometimes small asteroids appear but not in the desired place. The question is then how can I spawn these little asteroids when a big one is destroyed?
Ill be posting the code below any comments are welcome.
Edit: clicked post by accident, adding more classes
main.js
import {Asteroids} from './asteroids.js';
import {AsteroidsM} from './asteroidsm.js';
import {Bullets} from './bullets.js';
class Game extends Phaser.Scene
{
constructor() {
super();
this.player
this.bullet
this.bullets
this.bulletsFired = 0
this.lives = 4
this.keyA,this.keyD,this.space,this.shift
this.gameOver = false
this.lastFired = 0
this.score = 0
this.screenWidth = 1024
this.screenHeight = 768
this.wave = 1
this.asteroids
}
preload ()
{
this.loadImages()
this.loadKeys()
}
create ()
{
this.add.image(this.screenWidth/2,this.screenHeight/2,'nightsky')
this.asteroids = new Asteroids(this)
this.asteroidsm = new AsteroidsM(this)
this.asteroids.addAsteroids(this.screenWidth,this.screenHeight)
this.addPlayer()
this.bullets = new Bullets(this);
this.addColliders()
this.addTexts()
this.addAnimations()
}
update (time)
{
this.updateKeys(time)
this.updateTexts()
this.physics.world.wrap(this.player, 32);
this.physics.world.wrap(this.asteroids, 32);
this.asteroids.asteroidRotation()
// this.physics.world.wrap(this.bullets, 32) //regular duracion
}
loadImages()
{
this.load.image('nightsky','assets/sky.png')
// this.load.image('ship','assets/ship.png')
this.load.image('asteroid','assets/asteroid.png')
this.load.image('asteroid2','assets/asteroid2.png')
this.load.image('bullet','assets/bullet.png')
this.load.spritesheet('ship', 'assets/ship_animation2.png',{ frameWidth: 48, frameHeight: 48 })
}
loadKeys()
{
this.cursors = this.input.keyboard.createCursorKeys()
this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
this.space = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
this.shift = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT);
}
addPlayer()
{
this.player = this.physics.add.sprite(this.screenWidth/2,this.screenHeight/2,'ship');
this.player.setDamping(true);
this.player.setDrag(0.99);
this.player.setMaxVelocity(200);
}
addColliders()
{
this.physics.add.collider(this.player, this.asteroids, (player)=> {
player.setActive(false).setVisible(false)
this.lives -= 1
if (this.lives==0) {
this.gameOver = true
}
setTimeout(()=>{
player.angle = 0
player.setVelocity(0, 0);
player.setX(this.screenWidth/2);
player.setY(this.screenHeight/2);
player.setActive(true).setVisible(true)
}, 1000)
},null,this)
this.physics.add.collider(this.asteroids, this.asteroids)
this.physics.add.collider(this.asteroids, this.bullets, (asteroid,bullet)=>{
asteroid.destroy()
bullet.setActive(false);
bullet.setVisible(false);
bullet.body.enable = false
console.log(asteroid.x)
console.log(asteroid.y)
this.asteroidsm.addAsteroids(asteroid.x,asteroid.y)
this.score+=50
if (this.asteroids.getLength()==0) {
setTimeout(() => {
this.asteroids.resetAsteroidGroup()
this.asteroids.addAsteroids(this.screenWidth,this.screenHeight)
this.addColliders()
this.wave++
}, 1500);
}
},null,this)
}
addTexts()
{
this.text = this.add.text(10, 10, '', { font: '16px Courier', fill: '#00ff00' });
this.text2 = this.add.text(10, 30, '', { font: '16px Courier', fill: '#00ff00' });
this.text3 = this.add.text(10, 50, '', { font: '16px Courier', fill: '#00ff00' });
this.text4 = this.add.text(10, 70, '', { font: '16px Courier', fill: '#00ff00' });
this.text5 = this.add.text(10, 90, '', { font: '16px Courier', fill: '#00ff00' });
this.text6 = this.add.text(10, 110, '', { font: '16px Courier', fill: '#00ff00' });
this.text7 = this.add.text(10, 130, '', { font: '16px Courier', fill: '#00ff00' });
this.text8 = this.add.text(10, 150, '', { font: '16px Courier', fill: '#00ff00' });
}
updateKeys(time)
{
if (this.cursors.up.isDown) {
this.physics.velocityFromRotation(this.player.rotation-(90*Math.PI/180),100, this.player.body.acceleration)
this.player.play('thrust',true)
this.player.anims.stopAfterRepeat(3);
}
else{
this.player.setAcceleration(0)
}
if (this.cursors.down.isDown) {
this.physics.velocityFromRotation(this.player.rotation-(270*Math.PI/180),100, this.player.body.acceleration)
}
if (this.cursors.left.isDown)
{
this.player.angle -= 4
}
else if (this.cursors.right.isDown)
{
this.player.angle += 4
}
if (this.keyA.isDown) {
this.physics.velocityFromRotation(this.player.rotation-(180*Math.PI/180),100, this.player.body.acceleration)
}
if (this.keyD.isDown) {
this.physics.velocityFromRotation(this.player.rotation-(0*Math.PI/180),100, this.player.body.acceleration)
}
// if (this.space.isDown) //if no funciona como deberia chequear statement
if(Phaser.Input.Keyboard.JustDown(this.space))
{
this.bullets.fireBullet(this.player.x,this.player.y,this.player.rotation)
this.bulletsFired ++
// console.log(`this.bulletsFired: ${this.bulletsFired}`)
// console.log(`bullets fired: ${this.bulletsFired}`)
}
// if (this.shift.isDown)
if(Phaser.Input.Keyboard.JustDown(this.shift))
{
this.warp()
}
}
updateTexts()
{
this.text.setText('Speed: ' + this.player.body.speed);
this.text2.setText('Angle: ' + this.player.angle);
this.text3.setText('this.player.rotation: ' + this.player.rotation);
this.text4.setText('Lives: ' + this.lives);
this.text5.setText('Asteroids: ' + this.asteroids.getLength())
this.text6.setText('Bullets: ' + this.bullets.getLength())
this.text7.setText('Score: ' + this.score)
this.text8.setText('Wave: ' + this.wave)
}
warp()
{
this.player.x = Phaser.Math.Between(0,this.screenWidth)
this.player.y = Phaser.Math.Between(0,this.screenHeight)
}
addAnimations()
{
this.anims.create({
key: 'thrust',
frames: this.anims.generateFrameNumbers('ship', { frames: [2, 1, 0] }),
frameRate: 8,
repeat: -1
});
this.anims.create({
key: 'explode',
frames: this.anims.generateFrameNumbers('ship', { frames: [ 1, 2] }),
frameRate: 8,
repeat: 1
});
}
}
const config = {
type: Phaser.AUTO,
width: 1024,
height: 768,
physics: {
default: 'arcade',
arcade: {
debug: true,
gravity:
{y: 0}
},
debug: true
},
scene: Game
}
const game = new Phaser.Game(config)
asteroids.js
import {Asteroid} from './asteroid.js';
export class Asteroids extends Phaser.Physics.Arcade.Group
{
constructor (scene)
{
super(scene.physics.world, scene);
this.createMultiple({
frameQuantity: 4,
key: 'asteroid',
active: true,
visible: true,
classType: Asteroid
});
}
resetAsteroidGroup()
{
this.createMultiple({
frameQuantity: 4,
key: 'asteroid',
active: true,
visible: true,
classType: Asteroid
});
}
addAsteroids(screenWidth,screenHeight)
{
this.children.each((asteroid) => {
asteroid.asteroidLocation(screenWidth,screenHeight)
asteroid.asteroidMovement()
}, this);
}
asteroidRotation()
{
this.children.each((asteroid) => {
let asteroidAngle = Phaser.Math.Between(0,2.5)
asteroid.angle += asteroidAngle
}, this)
}
}
asteroid.js
export class Asteroid extends Phaser.Physics.Arcade.Sprite
{
constructor (scene, x, y)
{
super(scene, x, y, 'asteroid');
this.enable = true
this.setActive(true);
this.setVisible(true);
}
asteroidLocation(screenWidth,screenHeight)
{
this.x = Phaser.Math.Between(0,screenWidth)
this.y = Phaser.Math.Between(0,screenHeight)
const body = this.body
body.updateFromGameObject()
}
asteroidMovement()
{
const vec = new Phaser.Math.Vector2()
vec.setToPolar(Phaser.Math.Between(0,6.28)-(90*Math.PI/180), 10)
const asteroidSpeed = Phaser.Math.Between(5,20)
const vx = vec.x * asteroidSpeed
const vy = vec.y * asteroidSpeed
this.setVelocity(vx,vy)
}
}
asteroidsm.js
import {AsteroidM} from './asteroidm.js';
export class AsteroidsM extends Phaser.Physics.Arcade.Group
{
constructor (scene)
{
super(scene.physics.world, scene);
this.createMultiple({
frameQuantity: 2,
key: 'asteroid2',
active: true,
visible: true,
classType: AsteroidM
});
}
resetAsteroidGroup()
{
this.createMultiple({
frameQuantity: 2,
key: 'asteroid2',
active: true,
visible: true,
classType: AsteroidM
});
}
addAsteroids(screenWidth,screenHeight)
{
this.children.each((asteroid) => {
asteroid.asteroidLocation(screenWidth,screenHeight)
asteroid.asteroidMovement()
}, this);
}
asteroidRotation()
{
this.children.each((asteroid) => {
let asteroidAngle = Phaser.Math.Between(0,2.5)
asteroid.angle += asteroidAngle
}, this)
}
}
asteroidm.js
export class AsteroidM extends Phaser.Physics.Arcade.Sprite
{
constructor (scene, x, y)
{
super(scene, x, y, 'asteroid2');
this.enable = true
this.setActive(true);
this.setVisible(true);
this.x = 0
this.y = 0
}
asteroidLocation(x,y)
{
this.x = x
this.y = y
const body = this.body
body.updateFromGameObject()
}
asteroidMovement()
{
const vec = new Phaser.Math.Vector2()
vec.setToPolar(Phaser.Math.Between(0,6.28)-(90*Math.PI/180), 10)
const asteroidSpeed = Phaser.Math.Between(5,20)
const vx = vec.x * asteroidSpeed
const vy = vec.y * asteroidSpeed
this.setVelocity(vx,vy)
}
}
bulllets.js
import {Bullet} from './bullet.js'
export class Bullets extends Phaser.Physics.Arcade.Group
{
constructor (scene)
{
super(scene.physics.world, scene);
this.createMultiple({
frameQuantity: 10,
key: 'bullet',
active: false,
visible: false,
classType: Bullet,
});
}
fireBullet (x, y, rotation)
{
// console.log('Bullets.fire')
let bullet = this.getFirstDead(false);
// console.log(bullet)
if (bullet)
{
bullet.fire(x, y, rotation);
}
}
}
bullet.js
export class Bullet extends Phaser.Physics.Arcade.Sprite
{
constructor (scene, x, y)
{
super(scene, x, y, 'bullet');
}
fire (x, y, rotation)
{
this.body.reset(x, y);
this.body.enable = true
this.setActive(true);
this.setVisible(true);
const vec = new Phaser.Math.Vector2()
// update vector from rotation; not angle
vec.setToPolar(rotation-(90*Math.PI/180), 10)
const vx = vec.x * 100
const vy = vec.y * 100
this.setVelocity(vx,vy)
// console.log('Bullet.fire')
}
preUpdate (time,delta)
{
super.preUpdate(time, delta);
if (this.x < 1 || this.x > 1024 || this.y < 1 || this.y > 768){
this.setActive(false);
this.setVisible(false);
}
// this.state -= delta
// if (this.state <= 0)
// {
// this.disableBody(true,true)
// }
}
}