I’m trying to make an online shooter game. My problem is passing shooted bullets to other players screens. I currently use group to contain bullets, I thought of emitting the group of bullets with socket.id, then recieve them and put it at as a 2 item array in otherPlayersBullets as (id, bullets), then if a bullets hits this player then we know who killed him (who owned the bullet). I can currently send bullets but I failed to recieve bullets and put them into otherPlayerBullets. I can’t manage to seperate the bullets array from the emit. Also I have no clue on how to show the recieved bullets after I manage to recieve them.
Here is a part of the server script:
socket.on(‘takeBullets’, function (bullets) {
socket.broadcast.emit(‘sendBullets’, bullets, socket.id);
});
Here is the client side script:
let width = 800;
let height = 700;
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: width,
height: height,
physics: {
default: 'arcade',
arcade: {
debug: false,
gravity: { y: 0 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('player', 'assets/player.png');
this.load.image('otherPlayer', 'assets/enemy.png');
this.load.image('bullet', 'assets/bullet.png');
this.load.image('bar', 'assets/bar.png');
}
function create() {
var self = this;
this.socket = io();
this.otherPlayers = this.physics.add.group();
this.otherPlayersText = this.physics.add.group();
this.otherPlayerBullets = this.physics.add.group();
this.socket.on('currentPlayers', function (players) {
Object.keys(players).forEach(function (id) {
if (players[id].playerId === self.socket.id) addPlayer(self, players[id]);
else addOtherPlayers(self, players[id]);
});
});
this.socket.on('newPlayer', function (playerInfo) {
addOtherPlayers(self, playerInfo);
});
this.socket.on('disconnect', function (playerId) {
for(var i = 0; i < self.otherPlayers.getChildren().length; i++){
if (playerId == self.otherPlayers.getChildren()[i].playerId){
self.otherPlayers.getChildren()[i].destroy();
self.otherPlayersText.getChildren()[i].destroy();
}
}
});
this.socket.on('playerMoved', function (playerInfo) {
for(var i = 0; i < self.otherPlayers.getChildren().length; i++){
if (playerInfo.playerId == self.otherPlayers.getChildren()[i].playerId){
self.otherPlayers.getChildren()[i].setRotation(playerInfo.rotation);
self.otherPlayers.getChildren()[i].setPosition(playerInfo.x, playerInfo.y);
self.otherPlayersText.getChildren()[i].setPosition(playerInfo.x, playerInfo.y + 3.5);
}
}
});
this.socket.on('sendBullets', function(bullets, socketId){
this.bulletAlreadySent = false;
console.log(self.otherPlayerBullets.getChildren()[0], bullets);
for(var i = 0; i < self.otherPlayerBullets.getChildren().length; i++){
if(self.otherPlayerBullets.getChildren()[0][0] == socketId && self.otherPlayerBullets.getChildren()[0][1] == bullets){
this.bulletAlreadySent = true;
break;
}
if(self.otherPlayerBullets.getChildren()[0][0] == socketId) {
self.otherPlayerBullets.getChildren()[0][1] = bullets;
this.bulletAlreadySent = true;
break;
}
}
if(!this.bulletAlreadySent) self.otherPlayerBullets.getChildren().push([socketId, bullets]);
});
this.cursors = this.input.keyboard.createCursorKeys();
this.spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
var Bullet = new Phaser.Class({
Extends: Phaser.GameObjects.Image,
initialize: function Bullet (scene)
{
Phaser.GameObjects.Image.call(this, scene, 0, 0, 'bullet');
this.scene.physics.world.enable(this);
this.setDepth(-5);
},
fire(player) {
this.speed = 300;
this.lifespan = 500;
this.setActive(true);
this.setVisible(true);
this.rotation = player.rotation;
this.setPosition(player.x, player.y);
const angle = Phaser.Math.DegToRad(player.body.rotation - 90);
this.body.world.scene.physics.velocityFromRotation(angle, this.speed, this.body.velocity);
},
update(time, delta) {
this.lifespan -= delta;
if (this.x > width || this.x < 0 || this.y < 0|| this.y > height-100) {
this.setActive(false);
this.setVisible(false);
this.body.stop();
}
}
});
this.bullets = this.physics.add.group({
classType: Bullet,
maxSize: 3,
runChildUpdate: true
});
this.lastFired = 0;
this.bottomBar = this.physics.add.image(width/2, height-50, 'bar').setDisplaySize(width, 100);
this.bottomBar.setDepth(-3);
this.gunText = this.add.text(50, height-70, "GUN: ").setScale(1.5);
this.gunText.setColor("purple");
this.gunText.setDepth(1);
this.gunBar = this.add.graphics();
this.gunBar.fillStyle(0x551a8b, 1);
this.gunBar.fillRect(125, height-70, 200, 25);
}
function update(time, delta) {
if (this.player) {
if (this.cursors.left.isDown) this.player.setAngularVelocity(-150);
else if (this.cursors.right.isDown) this.player.setAngularVelocity(150);
else this.player.setAngularVelocity(0);
if (this.cursors.up.isDown) this.physics.velocityFromRotation(this.player.rotation + 1.5, -100, this.player.body.acceleration);
else if (this.cursors.down.isDown) this.physics.velocityFromRotation(this.player.rotation + 1.5, 100, this.player.body.acceleration);
else this.player.setAcceleration(0);
if (this.spaceBar.isDown) {
if(time - this.lastFired > 500) {
this.bullet = this.bullets.get();
if (this.bullet) {
this.bullet.fire(this.player);
this.lastFired = time;
}
}
}
if(time - this.lastFired < 500) {
this.gunBar.clear();
this.gunBar.fillRect(125, height - 70, 200 * (time - this.lastFired)/500, 25);
}
else this.gunBar.fillRect(125, height - 70, 200, 25);
if (this.player.x > width) this.player.x = 0
if (this.player.x < 0) this.player.x = width;
if (this.player.y > height - 100) this.player.y = 0;
if (this.player.y < 0) this.player.y = height - 100;
this.player.setDepth(-4);
// emit player movement
var x = this.player.x;
var y = this.player.y;
var r = this.player.rotation;
this.nameText.x = x;
this.nameText.y = y+3.5;
this.socket.emit('takeBullets', this.bullets.getChildren());
//console.log(this.otherPlayerBullets.getChildren());
for(var bullet in this.otherPlayerBullets){
//console.log(bullet);
}
//If moved before last broadcast, broadcast again, if didn't move, don't broadcast
if (this.player.oldPosition && (x !== this.player.oldPosition.x || y !== this.player.oldPosition.y || r !== this.player.oldPosition.rotation)) {
this.socket.emit('playerMovement', { x: this.player.x, y: this.player.y, rotation: this.player.rotation });
}
// save old position data
this.player.oldPosition = {
x: this.player.x,
y: this.player.y,
rotation: this.player.rotation
};
}
}
function addPlayer(self, playerInfo) {
self.player = self.physics.add.image(playerInfo.x, playerInfo.y, 'player').setOrigin(0.5, 0.5).setDisplaySize(100, 100);
self.nameText = self.add.text(playerInfo.x, playerInfo.y, playerInfo.nickname).setOrigin(0.5, 4);
self.physics.world.enable(self.nameText);
if (playerInfo.team === 'blue') self.player.setTint(0x0000ff);
else self.player.setTint(0xff0000);
self.player.setDrag(100);
self.player.setAngularDrag(100);
self.player.setMaxVelocity(200);
}
function addOtherPlayers(self, playerInfo) {
const otherPlayer = self.add.sprite(playerInfo.x, playerInfo.y, 'otherPlayer').setOrigin(0.5, 0.5).setDisplaySize(100, 100);
const otherPlayerText = self.add.text(playerInfo.x, playerInfo.y, playerInfo.nickname).setOrigin(0.5, 4);
self.physics.world.enable(otherPlayerText);
if (playerInfo.team === 'blue') otherPlayer.setTint(0x0000ff);
else otherPlayer.setTint(0xff0000);
otherPlayer.playerId = playerInfo.playerId;
self.otherPlayers.add(otherPlayer);
self.otherPlayersText.add(otherPlayerText);
}