Search the Community

Hi guys, So I'm trying to expand the game I'm making to be a multiplayer game using Node.js and Socket.io. The connection between server-side and client-side is working, however I don't know how to update the positions of the players. This is how it goes, whenever a player moves the socket.sessionid and coordinates are send to the server. The server then broadcasts this data to all the other clients except the client which sent the data. In the client-side that information gets decoded and stored in 2 variables (at this moment), a player variable (with the id), and a X variable (with the x value, duh). At this moment I really don't know how to update the positions of a certain sprite in the game. Are there any examples on how to create a basic multiplayer Phaser game using websockets? I'm kinda stuck. The code I'm using on the client side is as follows, it is very dirty atm since I'm experimenting.. The 'xChanged' function sends the new position to the server, and 'posChanged' reads the data that gets sent from the server. var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update});function preload() { game.load.spritesheet('player', 'img/ally_sprite.png', 64, 64); game.load.image('boss', 'img/boss.png'); game.load.image('bullet', 'img/bullet.png');}var player, boss, cursors, x, y, z, xTouch, yTouch, fireButton, bullets, bulletTime = 50, text, bulletsCount = 30;var players = {};var io = io.connect('http://192.168.0.13:3000');// server ipvar xPos, yPos, label, sock;function create() { game.renderer.clearBeforeRender = false; game.renderer.roundPixels = true; game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(game.world.centerX, game.world.centerY, 'player'); player.anchor.setTo(.5,.5); player.animations.add('fly'); player.animations.play('fly', 10, true); game.physics.enable(player, Phaser.Physics.ARCADE); player.enableBody = true; player.body.collideWorldBounds = true; // new player var pos = JSON.stringify({ player: io.socket.sessionid, x: game.world.centerX, y: game.world.centerY, angle: 0 }); socket.emit('newPos', pos); boss = game.add.sprite(game.centerX, game.centerY, 'boss'); boss.enableBody = true; boss.physicsBodyType = Phaser.Physics.ARCADE; bullets = game.add.group(); bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.createMultiple(30, 'bullet'); bullets.setAll('anchor.x', 0.5); bullets.setAll('anchor.y', 1); bullets.setAll('outOfBoundsKill', true); game.stage.backgroundColor = '#ccc'; game.input.addPointer(); fireButton = game.input.pointer1; if(isMobile.any) { if(gyro.hasFeature('devicemotion')) { console.log('gyrojs loaded'); if(gyro.getFeatures().length > 0) { gyro.frequency = 10; gyro.startTracking(function(o) { var anglePlayer = Math.atan2(o.y, o.x); angleRadians = anglePlayer * Math.PI/180; anglePlayer *= 180/Math.PI; anglePlayer = 180 - anglePlayer; player.angle = game.math.wrapAngle(anglePlayer, false); if(fireButton.isDown) { fire(); } if(o.z < 9.5 || o.z > 10) { player.body.velocity.x -= o.x * 20; player.body.velocity.y += o.y * 20; } else { player.angle = 0; } console.log(player.body.velocity.x); // Send new position to server var newPos = JSON.stringify({ player: io.socket.sessionid, x: player.body.velocity.x, y: player.body.velocity.y, angle: player.angle }); socket.emit('newPos', newPos); }); } } else { // fallback als gyro.js niet werkt.. console.log('gyrojs not loaded'); window.addEventListener('devicemotion', function(event) { x = event.accelerationIncludingGravity.x; y = event.accelerationIncludingGravity.y; z = event.accelerationIncludingGravity.z; var anglePlayer = Math.atan2(y, x); anglePlayer *= 180/Math.PI; anglePlayer = 180 - anglePlayer; player.angle = game.math.wrapAngle(anglePlayer, false); if(fireButton.isDown) { fire(); } if(z < 9.5 || z > 10) { player.body.velocity.x -= x * 40; player.body.velocity.y += y * 40; } else { player.angle = 0; } // Send new position to server var newPos = JSON.stringify({ player: io.socket.sessionid, x: player.body.velocity.x, y: player.body.velocity.y, angle: player.angle }); socket.emit('newPos', newPos); var interval = 10; }); } } else { // Niet mobiel, bewegingen omzetten in keys console.log('Niet Mobiel'); cursors = game.input.keyboard.createCursorKeys(); } text = game.add.text(game.world.centerX, 50, "Bullets: 30", { font: "65px Arial", fill: "#000000", align: "center" }); text.anchor.setTo(0.5, 0.5); // Add new players to the screen socket.on('newPlayerwithPos', function(data) { var obj = JSON.parse(data); var xNew = obj.x; var yNew = obj.y; console.log(xNew, yNew); var p = game.add.sprite(xNew, yNew, 'player'); p.anchor.setTo(.5,.5); p.animations.add('fly'); p.animations.play('fly', 10, true); game.physics.enable(p, Phaser.Physics.ARCADE); p.enableBody = true; p.body.collideWorldBounds = true; });}function update() { player.body.velocity.setTo(0,0); if(!isMobile.any) { if(cursors.left.isDown) { player.body.velocity.x -= 40; } else if(cursors.right.isDown) { player.body.velocity.x += 40; var newPos = JSON.stringify({ x: player.x, player: io.socket.sessionid }); } if(game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR).isDown) { fire(); } } // Get new positions from all other players socket.on('updatePos', function(data) { for(var playerData in data) { // update array of players var player = {}; player.name = data[playerData].sessionID; player.x = data[playerData].x; player.y = data[playerData].y; player.angle = data[playerData].angle; players[player.name] = player; } }); // loop through all players and draw sprites for(var playerData in players) { var p = ''; var playerX = players[playerData].x; var playerY = players[playerData].y; var playerAngle = players[playerData].angle; var p = game.add.sprite(playerX, playerY, 'player'); game.physics.enable(p, Phaser.Physics.ARCADE); p.enableBody = true; p.body.velocity.x -= playerX; p.body.velocity..y += playerY; p.angle = playerAngle; }}function fire() { if(game.time.now > bulletTime) { bullet = bullets.getFirstExists(false); if(bullet) { bullet.reset(player.body.x + 32, player.body.y + 32); bullet.rotation = player.rotation; game.physics.arcade.velocityFromRotation(player.rotation, 400, bullet.body.velocity); bulletTime = game.time.now + 50; // Update bullet counter bulletsCount --; text.setText("Bullets: " + bulletsCount); } }}