Search the Community

Showing results for tags 'socket.io'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 33 results

  1. I'm happy to present to you Phaser Quest, a top-down real-time multiplayer adventure made with Phaser and Socket.io. Explore the map, find better equipment, fight monsters and defeat the final boss, alone or with friends! It was for me a practice project, and is a reproduction of Mozilla's Browserquest. Hopefully the source code will interest you, as the project integrates of a lot of Phaser features together (such as tiled maps, text input, tweens, animations, sound, click handling, camera management, etc.), as well as pathfinding using Easystar.js. It is also an example of how a Phaser client can be made to interact with a Node.js server using Socket.io. On my website, I have written a few articles about some aspects of the game. They are mostly concerned with networking for the moment. If you'd like me to write an article explaining how I accomplished this or that in the development of this game, feel free to ask, I'm always happy to help. In addition, I'm interested in any feedback you might have, it's always valuable, especially with future multiplayer projects in mind.
  2. Hey everyone, Sorry for that rookie question. I'm trying to develop this 1vs1 RPG multiplayer game and have a hard time implementing player matchmaking mechanism. For testing purposes, I'm creating a player when the client connects to the server. // Client side: const socket = io(); socket.on('connect', () => { socket.emit('create player', data => console.log(data)) }) // Server side: let players = []; const playerFactory = () => { return { state: 'idle', // idle, searching, fightInProgress lvl: getRandomArbitrary(1, 10), // Get random number from 1 - 10 winRatio: getRandomArbitrary(0, 100) } }; io.on('connection', socket => { socket.on('create player', fn => { console.log('Player created'); const player = playerFactory(name); player.id = socket.id; players.push(player); //returning acknowledgement to client fn(player); }) }) Assuming there is a 'Find opponent' button. How do I watch and match players with 'searching' statuses and appropriate levels? Also, how would I match players by their win/loss ratio? Any information or code examples, libraries or frameworks would help a lot. Thank you in advance!
  3. Greetings! I see quite often around these parts and in further fields, that there are constantly people who are just starting out asking how to add networked multiplayer functionality to their HTML5 games. I was one of them, and I hated the near absence of practical explanations that were written in concise, plain-English, yet still detailed, of how to get started. So, I made a simple game example/template using Socket.io and Phaser, and documented the hell out of it. Almost everything gets a few lines of comments to explain what is doing what, and I haven't assumed any prior knowledge, aside from core JavaScript and being able to set up NodeJS and how to view the game in a browser. The main focal point is using Socket.io, as the game framework can be easily interchanged to one of your preference. Hopefully this will save a few hours and headaches for people who don't have a clue what they are doing. https://github.com/Arcanorum/basic-networked-multiplayer-game
  4. Hey there, I just finished my first multiplayer project based on node.js. Some features of game below: - earning upgrades during the game - up to 10 players + 5 constant AIs on the map - can play with friends or against them - in build chat and map to communicate with others - optional voice control Have fun https://shipwrecked.herokuapp.com/
  5. Hi, Infinitris - A massively multiplayer online falling block puzzle game, created using Phaser, React, Socket.io and Koa. Here it is: Infinitris.io Controls: Arrow keys and spacebar. Current Features: Classic .io style: Instant join - only specify your nickname and you're ready to play. Ingame chat (Press [Enter]) Grid that expands and collapses based on how many players are in the game. Horizontal wrapping when the grid is larger than the screen. Scoreboard Invalid block placement detection (needs work) Features to add: Spectator mode AFK detection Touch controls Minimap Mobile fullscreen Multiple game rooms Block collections and themes User registration to secure your nickname Facebook: https://www.facebook.com/infinitris Twitter: https://twitter.com/infinitris_io Blog: https://infinitrisblog.wordpress.com/ Please give it a try and let me know what you think! Pyre
  6. https://drive.google.com/folderview?id=0Bwl58NPLObeIWEQ3YlNlTV9KNWs Here's a sharable link to the directory where my files are located. There's no node_modules, so it's necessary to install before express and socket.io. The problem is I can't create and render the balls which need to bounce all the time. The server is responsible for creating my players and balls. I did successfully the creation and movement of my players with the arrow keys and that's synchronised to all the clients. But I can't do the part with bouncing balls. It seems simple game but as far as I am new to this stuff, I can't figure it out. I provide a link to the directory of my files. The command to start the game is: node server.js. If anyone could help me, I would be very happy. Thanks in advance guys.
  7. hello to all multiplayer experts, i'm on a project using socket.io, but i want to update the position of the local player to the other players, e.g when a forward or backward key is pressed.
  8. Hi all! I'm newbie to game development. I just complete my first game, a simple game using HTML5 canvas, socket.io and express. I have NodeJS npm installed and i run my game locally in my PC as npm game.js. The question is that now i want this game to upload to a server where different users from different devices play the game. Is it works like we upload normal sites to domains or different. Please help! Thanks.
  9. Hello everybody! I can create single player games with phaser and now I want to start making multiplayer games using socket.io + node.js So unfortunately I haven't found any tutorials about how to create games on phaser with phaser. I have never had projects with serverpart(so I have no experience in it) So that's all I could understand and write myself :[ SERVER PART var express = require('express'); var app = express(); var serv = require('http').Server(app); var counter = 0; app.get('/', function(req, res) { res.sendFile(__dirname + '/client/index.html'); }); app.use('/client', express.static('/client')); serv.listen(2000); console.log('server started'); var io = require('socket.io')(serv); io.sockets.on('connection', function(socket) { counter++; console.log('connection #' + counter); }); Client <script> var socket = io(); var sendInfo = function() { socket.emit('objAppear'); } </script> <button id="btn" onclick="sendInfo();">Appear</button> Of course that's the simplest thing to create using node + socket.io So now I want to create multiplayer in games I've already created. But how?!?! I can't find any tutorials. Can you please help me. Server part is too hard for me
  10. Ranger Steve is a web (phaser) based realtime 2d shooter that let's you have instant lan parties with your friends. Ranger Steve: Buffalo Invasion YouTube Teaser Trailer Fast paced, intense shooter, explosions This is a realtime, "shoot em up", explosive multiplayer game that makes playing with your friends as simple as sharing a link. Made with: Phaser.io, ReactJS, NodeJS, Socket.io, and Redux.
  11. Hi guys, I'd like to show my last game: PressBall. Yo can see the game info and play here: Info and Play Game available for exclusive or non-exclusive licensing. If you are interested, feel free to write via: [email protected] It's my first time using socket.io and phaser, any feedback is welcome!
  12. As I don't have an external server at the moment, I'm trying to fake a bit of latency using SetTimeout. The code is based on Gabriel Gambetta's code for handling an authoritative server: http://www.gabrielgambetta.com/fpm_live.html And yeah. I know the code is very ugly and prototypish, no handling of multiple users, etc. etc.. I am sending inputs as well as the time the key is pressed, as a way of making it time-independent, but I have no sanity checks. If I keep the networkLatency at 0, it seems to run very smoothly, and both reconciliation and prediction works very well. However, if I add a delay, of say, 200 ms, it behaves strangely, and I can't really see why. This is the code handling the updating of the position, and the prediction based on previously saved inputs, and as far as I can see, this should work: iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); Even with a delay/latency, the function should still take into consideration the saved inputs, and apply these when the new positional updates are received. So even when apllying updates as old as 200ms, the result should be the same as the predicted state. If someone can spot where the issue is, that would be awesome. If someone has a VPS with some real latency, a test of that woulld be appreciated too. index.html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Babylon - Basic scene</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.4.0/babylon.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.js"></script> <!-- optional physics engine --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script type="text/javascript"> var sphere, inputs = []; var globalGravity = new CANNON.Vec3(0,-30,0); var camera; var lastSequence = 0; var client = {}; client.left = false; client.right = false; client.forward = false; client.back = false; pending_inputs = []; inputsToSend = []; input_sequence_number = -1; var networkLatency = 0; // var keys; // keys.left=1; this.playerDirection = [0,0,0,0]; quat = new CANNON.Quaternion(); var iosocket = io.connect("http://localhost:8080"); iosocket.on('connect', function () { console.log("connect"); iosocket.on('message', function(message) { // console.log(message); }); iosocket.on('updatePOS', function(message) { setTimeout(function () { sphereBody.position.x = message.x; sphereBody.position.y = message.y; sphereBody.position.z = message.z; ghostSphere.position.x = message.x; ghostSphere.position.y = message.y; ghostSphere.position.z = message.z; lastSequence = message.last; console.log(lastSequence); for (var x in pending_inputs){ if (x <= lastSequence){ console.log(x); delete pending_inputs[x]; pending_inputs.splice(x, 1); delete inputsToSend[x]; inputsToSend.splice(x, 1); } else { //console.log(x); // console.log(pending_inputs[x]); applyInputs(pending_inputs[x]); } } }, networkLatency); }); iosocket.on('spawnPlayer', function(player) { console.log("Spawning Player"); }); iosocket.on('disconnect', function() { }); }); var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); // setTimeout(sendInput, 2000); function sendInput(){ console.log("2 sek"); for (var x in inputsToSend){ iosocket.emit('input', inputsToSend[x]); } setTimeout(sendInput, 2000); } var createScene = function () { this.playerDirection = [0,0,0,0]; // Now create a basic Babylon Scene object var scene = new BABYLON.Scene(engine); scene.debugLayer.show(); // Change the scene background color to green. scene.clearColor = new BABYLON.Color3(0, 1, 0); // This creates and positions a free camera camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky. var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amount light.intensity = .5; // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); this.sphere.quaternion = new CANNON.Quaternion(0,0,0,0); this.box = BABYLON.MeshBuilder.CreateBox("box", {height: 5}, scene); // Move the sphere upward 1/2 its height this.sphere.position.y = 2; this.box.position.y = 2.5; this.box.position.z = 2; this.box.parent = this.sphere; ghostSphere = BABYLON.Mesh.CreateSphere("ghost", 16, 2, scene); var ghostMat = new BABYLON.StandardMaterial("texture1", scene); ghostMat.diffuseColor = new BABYLON.Color3(0.5, 0.2, 0.7); ghostMat.alpha = 0.6; ghostSphere.material = ghostMat; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene this.ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); this.ground.rotation = new CANNON.Vec3(-0,0,0); BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/RaggarDK/Baby/baby/", "height.babylon", scene, function (newMeshes) { setTimeout(function () { ground = newMeshes[1]; var material = new BABYLON.StandardMaterial("texture1", scene); //window.ground = ground; //ground.parent = undefined; ground.scaling.copyFromFloats(.3, .3, .3); ground.bakeCurrentTransformIntoVertices(); material.diffuseTexture = new BABYLON.Texture("https://raw.githubusercontent.com/RaggarDK/Baby/baby/plan.png", scene); ground.material = material; //ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsEngine.HeightmapImpostor, { mass: 0 }, scene); createHeightmap(newMeshes[1]); }, 2000) }); // window.addEventListener("keydown", handleKeyDown, false); // window.addEventListener("keyup", handleKeyUp, false); window.addEventListener("mousemove", function(e) { // console.log("mouse"); event = e; var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; //this.sphereBody.quaternion.y += movementX * 0.002; // this.sphereBody.quaternion.x += movementY * 0.002; sphereBody.rotation.y += movementX * 0.008; sphereBody.rotation.x += movementY * 0.008; }); seq = 0; function handleKeyDown(evt){ seq += 1; if (evt.keyCode==16){ if(inputs){ console.log(inputs); } } if (evt.keyCode==65){ inputs[seq] = {left:1, rot:sphereBody.rotation}; this.playerDirection[0] = 1; applyInput(seq, "left", sphereBody.rotation); console.log(seq); // iosocket.emit('input', { left:1, rot:sphereBody.rotation}); // shootBullet(sphereBody.rotation.y, sphereBody.position); } if (evt.keyCode==68){ sphereBody.position.x += .1; inputs[seq] = {right:1, rot:sphereBody.rotation}; this.playerDirection[1] = 1; //applyInput(seq, "right", sphereBody.rotation); //iosocket.emit('input', { right:1, rot:sphereBody.rotation}); } if (evt.keyCode==87){ inputs[seq] = {forward:1, rot:sphereBody.rotation}; applyInput(seq, "forward", sphereBody.rotation); this.playerDirection[2] = 1; // iosocket.emit('input', { forward:1, rot:sphereBody.rotation}); } if (evt.keyCode==83){ inputs[seq] = {back:1, rot:sphereBody.rotation}; this.playerDirection[3] = 1; applyInput(seq, "back", sphereBody.rotation); // iosocket.emit('input', { back:1, rot:sphereBody.rotation}); } } function handleKeyUp(evt){ if (evt.keyCode==65){ this.playerDirection[0] = 0; // iosocket.emit('input', { left:0}); } if (evt.keyCode==68){ // iosocket.emit('input', { right:0}); this.playerDirection[1] = 0; } if (evt.keyCode==87){ // iosocket.emit('input', { forward:0}); this.playerDirection[2] = 0; } if (evt.keyCode==83){ // iosocket.emit('input', { back:0}); this.playerDirection[3] = 0; } } var keyHandler = function(e) { e = e || window.event; if (e.keyCode == 65) { console.log("Lefty"); client.left = (e.type == "keydown"); } if (e.keyCode == 68) { console.log("righty"); client.right = (e.type == "keydown"); } if (e.keyCode == 87) { console.log("forward"); client.forward = (e.type == "keydown"); } else if (e.keyCode == 83) { client.back = (e.type == "keydown"); console.log("back"); } }; window.addEventListener("keydown", keyHandler, false); window.addEventListener("keyup", keyHandler, false); return scene; }; var createPhysics = function(){ console.log("createPhysicsFunction Called!"); world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); // Step 1 sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); // Step 2 sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); // Step 3 console.log("sphereBodyPosition0: " + sphereBody.position); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); groundShape = new CANNON.Plane(); groundBody = new CANNON.Body({ mass: 0, shape: groundShape }); console.log(groundBody.rotation); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(groundBody.quaternion); world.add(groundBody); timeStep = 1.0 / 60.0; // seconds velocity = sphereBody.velocity; sphereBody.velocity = new CANNON.Vec3(0,0,0); return world; } var scene = createScene(); this.world = createPhysics(); var zeroVel = new CANNON.Vec3(0,0,0); var inputVelocity = new CANNON.Vec3(); var lastTime = (new Date()).getTime(); var currentTime = 0; var delta = 0; engine.runRenderLoop(function () { currentTime = (new Date()).getTime(); delta = (currentTime - lastTime) / 1000; // console.log(delta); processInputs(); scene.render(); world.step(1.0 / 60.0); velocity = sphereBody.velocity; this.sphere.position = sphereBody.position; this.sphere.rotation = sphereBody.rotation; moveSpeed = .1; // camera.position.x = sphereBody.position.x // camera.position.z = sphereBody.position.z // camera.rotation = sphereBody.rotation; //sphereBody.position.z += moveSpeed; //console.log(sphereBody.position.x); velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; lastTime = currentTime; }); window.addEventListener("resize", function () { engine.resize(); }); function processInputs() { // Compute delta time since last update. var now_ts = +new Date(); var last_ts = this.last_ts || now_ts; var dt_sec = (now_ts - last_ts) / 1000.0; this.last_ts = now_ts; // Package player's input. var input; if (client.right) { input = {dir:"right", press_time: dt_sec }; }else if (client.forward && client.left) { input = {dir:"sfLeft", press_time: dt_sec }; } else if (client.left) { input = {dir:"left", press_time: dt_sec }; }else if (client.forward) { input = {dir:"forward", press_time: dt_sec }; }else if (client.back) { input = {dir:"back", press_time: dt_sec }; } else { // Nothing interesting happened. return; } // Send the input to the server. input.input_sequence_number = input_sequence_number++; console.log(input.input_sequence_number); // input.entity_id = this.entity_id; applyInputs(input); inputsToSend.push(input); iosocket.emit('input', input); // Save this input for later reconciliation. pending_inputs.push(input); } function applyInputs(input) { // console.log(input.dir); if (input.dir == "left"){ sphereBody.position.x += -input.press_time*5; } if (input.dir == "right"){ sphereBody.position.x += input.press_time*5; } if (input.dir == "forward"){ sphereBody.position.z += input.press_time*5; } if (input.dir == "back"){ sphereBody.position.z += -input.press_time*5; } if (input.dir == "sfLeft"){ sphereBody.position.z += input.press_time*2.5; sphereBody.position.x += -input.press_time*2.5; } } function createHeightmap (object, pointDepth) { var pos = object.getVerticesData(BABYLON.VertexBuffer.PositionKind); var matrix = []; //For now pointDepth will not be used and will be automatically calculated. //Future reference - try and find the best place to add a reference to the pointDepth variable. var arraySize = pointDepth || ~~(Math.sqrt(pos.length / 3) - 1); var dim = Math.min(object.getBoundingInfo().boundingBox.extendSize.x, object.getBoundingInfo().boundingBox.extendSize.z); var elementSize = dim * 2 / arraySize; var minY = object.getBoundingInfo().boundingBox.extendSize.y; for (var i = 0; i < pos.length; i = i + 3) { var x = Math.round((pos[i + 0]) / elementSize + arraySize / 2); var z = Math.round(((pos[i + 2]) / elementSize - arraySize / 2) * -1); var y = pos[i + 1] + minY; if (!matrix[x]) { matrix[x] = []; } if (!matrix[x][z]) { matrix[x][z] = y; } matrix[x][z] = Math.max(y, matrix[x][z]); } for (var x = 0; x <= arraySize; ++x) { if (!matrix[x]) { var loc = 1; while (!matrix[(x + loc) % arraySize]) { loc++; } matrix[x] = matrix[(x + loc) % arraySize].slice(); } for (var z = 0; z <= arraySize; ++z) { if (!matrix[x][z]) { var loc = 1; var newValue; while (newValue === undefined) { newValue = matrix[x][(z + loc++) % arraySize]; } matrix[x][z] = newValue; } } } var shape = new CANNON.Heightfield(matrix, { elementSize: elementSize }); console.log(elementSize); //Output Matrix Info for Node.js console.log(matrix.length); for (i=0;i<matrix.length;i++){ //GET MATRIX DATA //console.info(JSON.stringify(matrix[0], null, ' ')) console.log("\n" + "matrix2[" + i + "] = " + JSON.stringify(matrix[i], null, ' ')) } heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); }; </script> </body> </html> server.js: /* Copyright (c) 2012 Sven "FuzzYspo0N" Bergström http://underscorediscovery.com MIT Licensed. See LICENSE for full license. Usage : node simplest.app.js */ var gameport = process.env.PORT || 4004, CANNON = require('cannon'), io = require('socket.io'), socketio = require('socket.io'), express = require('express'), UUID = require('node-uuid'), fs = require('fs'), gameloop = require('node-gameloop'), verbose = false; var fs = require('fs') , http = require('http') , socketio = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html'}); res.end(fs.readFileSync(__dirname + '/index.html')); }).listen(8080, function() { console.log('Listening at: http://localhost:8080'); }); timeStep = 1.0 / 60.0; moveSpeed = .1; lastProcessedInput = -1; socketio.listen(server).on('connection', function (socket) { socket.emit('spawnPlayer'); var testLat = 0; var networkLoop = gameloop.setGameLoop(function(delta) { //socket.emit('news', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); socket.emit('updatePOS', { x: sphereBody.position.x, y: sphereBody.position.y, z: sphereBody.position.z, last:lastProcessedInput}); }, 1000 / 10); socket.on('input', function (inp) { applyInput(inp); console.log(inp.input_sequence_number); }); sphereBody.velocity = new CANNON.Vec3(0,0,0); /*socket.on('arrayInput', function (ainput) { for (var input in ainput){ if (ainput.input_sequence_number > lastProcessedInput){ applyInput(ainput[input]); } } }); */ }); function applyInput(inp){ sphereBody.velocity.x = 0; if (inp.dir == "right"){ sphereBody.position.x += inp.press_time*5; } if (inp.dir == "sfLeft"){ sphereBody.position.z += inp.press_time*2.5; sphereBody.position.x += -inp.press_time*2.5; } if (inp.dir == "left"){ sphereBody.position.x += -inp.press_time*5; } if (inp.dir == "forward"){ sphereBody.position.z += inp.press_time*5; } if (inp.dir == "back"){ sphereBody.position.z += -inp.press_time*5; } lastProcessedInput = inp.input_sequence_number; console.log(lastProcessedInput); } var initPhysics = function() { world = new CANNON.World(); world.gravity.set(0,-30,0); world.broadphase = new CANNON.NaiveBroadphase(); var mass = 5, radius = 1; sphereShape = new CANNON.Sphere(radius); sphereBody = new CANNON.Body({mass: 1, shape: sphereShape}); sphereBody.position.set(0,2,2); sphereBody.rotation = new CANNON.Vec3(); world.add(sphereBody); sphereBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); createHeightfield(); } var frameCount = 0; var mainLoop = gameloop.setGameLoop(function(delta) { // console.log('Hi there! (frame=%s, delta=%s)', frameCount++, delta); world.step(timeStep); // console.log(sphereBody.position); if (sphereBody){ velocity = sphereBody.velocity; //sphereBody.velocity.z = 0; var inputVelocity = new CANNON.Vec3(); sphereBody.velocity.x = 0; sphereBody.velocity.z = 0; velocity.x = inputVelocity.x; velocity.z = inputVelocity.z; } }, 1000 / 60); function createHeightfield(){ matrix2 = []; elementSize = 2.9999426007270813; matrix2[0] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[1] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[2] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[3] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[4] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[5] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[6] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[7] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 1.260629979194317, 1.2605724391889166, 1.2605148991835162, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[8] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[9] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[10] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[11] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 4.516292111633966, 4.516234571628566 ]; matrix2[12] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[13] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[14] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[15] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[16] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 7.674529389168344, 7.674471849162944, 7.674414309157544, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[17] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[18] = [ 10.294134842548655, 10.294077302543254, 4.517270291725772, 4.517212751720372, 4.517155211714972, 4.517097671709571, 4.517040131704171, 4.5169825916987705, 4.51692505169337, 4.51686751168797, 4.516809971682569, 4.516752431677169, 4.516694891671769, 4.516637351666368, 4.516579811660968, 4.5165222716555675, 4.516464731650167, 4.516407191644767, 4.516349651639366, 10.293041582446047, 10.292984042440647 ]; matrix2[19] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; matrix2[20] = [ 10.294134842548655, 10.294077302543254, 10.294019762537854, 10.293962222532453, 10.293904682527053, 10.293847142521653, 10.293789602516252, 10.293732062510852, 10.293674522505452, 10.293616982500051, 10.29355944249465, 10.29350190248925, 10.29344436248385, 10.29338682247845, 10.29332928247305, 10.293271742467649, 10.293214202462249, 10.293156662456848, 10.293099122451448, 10.293041582446047, 10.292984042440647 ]; shape = new CANNON.Heightfield(matrix2, { elementSize: elementSize }); heightBody = new CANNON.Body({mass: 0, shape: shape}); // Step 2 heightBody.position.y = -4.5; heightBody.position.x = -30; heightBody.position.z = 30; heightBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); console.log(heightBody.position); world.add(heightBody); } initPhysics(); Node.js for the server.js Chrome for the index.html WASD to move around.
  13. Hello my gamedevelopers friends I write this post because I have a issue, but I don't know how to solve it. I developing a multiplayer HTML5 game with Phaser. Well, is not entirely multiplayer because the players doesn't play among them but they interact with a datebase. The game consists in find riddles around a map with the mouse or touches. When the user find the riddle and write the correct answer the backend must be send to client a update of score. That I can't find because my solution doesn't work I work with socket.io and NodeJs because I need some connection between the client and the server. I tried the following: //SERVER socket.on("connection",function(socket){ socket.emit("websocket",dateJSON); //dateJSON is a date brought from the datebase, for example the username console.log("The server send a message to client"); }); //CLIENT var UserName; var socket = io.connect("http://localhost:8000"); socket.on("websocket",function(date){ UserName = date[0].username; //Like that because I need the username from the JSON }); console.log(UserName); If I execute the ultimate instrucction console.log(UserName), I will give get "Undefined"... I don't know why That was a example of what I want do. I need set a variables of client with date sent from the server. Before that, I will display that values in my game. The update of scores when the player win a riddle I want do the same way, but I need find the solutions. I have a week in this problem. If you know the solution or another way to solve it. Please help me :'( the game will be very fun and that is all I need to finish. Greetings!!!
  14. Hi everybody, I'm back after more or less one year :D. I 've been very busy with a lots of universiy exams, but now I have some time, so I've decided to made this simple real-time multiplayer game. Here is the code : Real-time-multiplayer-game-with-BabylonJS-and-socket.io Wht do you think about that? In your opinion, the logic behind the creation of the meshes is correct? This not the best game ever , but it is just an experiment and a way to learn how socket.io and BabylonJs can work togheter. Thanks a lot for all the previous support. Cheers, DellaFree p.s. It's my first project on github, so feel free to correct and modify whatever you want
  15. I made a simple multiplayer top-down shooter. Please try to play and give me a feedback. https://bykanov.ru/multiwar Description. Play against other players. Shoot and kill. Let blown body of your enemies sprinkle this battlefield. Control. Use the arrows on your keyboard to move and the mouse for aiming. Click or hold left mouse button to shoot. How it works. There is phaser.js on the client side. Nodejs, nginx - on the server side. I picked socket.io as a connection mechanism.
  16. I am tinkering with a simple 2D top down multi-player space "shooter" and have figured out enough from the Phaser documentation to build something that works with socket.io. My issue now is that when opening the game in two tabs both players starting co-ordinates should be identical as they are set via game.world.centerX and game.world.centerY. However players appear to be offset from one another. I am transmitting player.body.x and player.body.y. I have attached a screen grab of what I am seeing, any help would be very much appreciated.
  17. Hey, Initially I used https://github.com/belohlavek/phaser-es6-boilerplate for the boilerplate of my game. I configured Gulpfile.js for my taste a bit and everything worked properly. However, I needed to rely on NodeJS/socket.io to develop a backend server so I could add multiplayer functionality. I watched some tutorials/read some guides and eventually came up with a solution. (Actually, checked some open source Github repos and tried to learn from them.) This brought me an issue that I can't solve without having knowledge about NodeJS ecosystem. Right now, when I start developing: 1. I enter mygameclient folder, run npm start, and some plugin in this file (https://github.com/belohlavek/phaser-es6-boilerplate/blob/master/gulpfile.js) hosts my game at port 3000. 2. I enter mygameserver folder, run npm start, a plugin called Nodemon executes server.js, server.js runs on port 8080 which contains socket.io listeners/static endpoints for Express. (https://gist.github.com/sogko/b53d33d4f3b40d3b4b2e) The whole thing became a mess. I want to make sure NodeJS runs on port 80, loads index.html when I enter localhost:80/index.html. Questions 1. Should I ditch Browsersync and rely on Nodemon? What is Nodemon? Can I just rely on a basic NodeJS server instead? Can I host everything (game files, socket.io connections) on port 80? 2. How do you install a NodeJS as a production backend? Do you need to rely on web services such as Nginx? 3. Right now my game makes a socket connection on Phaser.update, which means it transfers data 60 times per second. Would that be overkill or this is how it is supposed to work? 4. Is it possible to "Observe" player.x and player.y data, and run an event whenever those attributes are changed? (e.g player.moving((player) => this.socket.emit("moving", player)); 5. When I develop monsters, should I develop every monster related information on backend? For example, "A monster cannot go out of world bounds in Phaser." if I configure it. But, a monster must be syncronized between all clients so it's data must be kept in backend. In this case, do I need to develop "A monster cannot go out of world bounds" feature on backend? How is it being done generally? First client hosts the monsters/AI and others just see what first client sees? Thanks alot.
  18. A multiplayer space combat game written in 48 hours with phaser, nodejs, and socket.io Transform your ship into three different configurations for speed, combat, or mining. Direct link Entry page with source
  19. 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); } }}
  20. Hello Guys, I am developing a html5 based mobile game, multiplayer. It will be a simple card game with lobby etc. I was wondering if Phaser is the right choice to develop the game or something else will be better for this purpose. As for multiplayer part i need to know which is a good service I can use out there. I need a service. I have heard that firebase is good, but i am not sure if it will be the best choice for this kind of game. Any suggestions for both front end and the server part are welcome. Thanks
  21. Hey all, have another game for you to check out It's just a quick little timing game to see what kind of simple yet fun real time interactions can be achieved using pixi, spine, node, cocoon, and socket.io. Hit start then press Go to make your shinobi run and Hit to make him slash. You have to slash your opponent. If you slash and miss, you lose. Good luck, it's actually decently hard. If you queue up within two seconds of someone else, you fight each other live! It's pretty fun if you play with people in your immediate vicinity. Google Play https://play.google.com/store/apps/details?id=com.chimera.chimerashinobishowdown Facebook https://apps.facebook.com/nobulljustshinobi/ The art is simple and there's almost 0 polish added. The point was to pump out a game as fast as possible that utilized these technologies. We will probably update the art and possibly add a persistent score and leaderboard. It's not super innovative or pretty, but that's the point. It is decently cute and fun *Screen shots are from phone*
  22. Hello! I've been using phaser and socket.io to create a multiplayer game for about 5 days now. However, a weird error is happening: 'players' is a key for a image that I'm using to show other players (it's not the same of your player). Because I'm a newbie with phaser, maybe I'm missing something very basic, but until now I don't have idea of what it is. Here is the start of my code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'kabar', {preload: preload, create: create, update: update});function preload(){ var loadingLabel = game.add.text(window.innerWidth / 2 - 85, window.innerHeight / 2 - 10, 'Loading...', {font: '30px Courier', fill: '#fff'}); game.load.image('player', 'assets/player/player.png'); game.load.image('players', 'assets/player/players.png'); game.load.image('bullet', 'assets/bullet1.png'); game.load.image('space', 'assets/space.gif'); game.load.start(); // I tried without this line too, didn't work }And here are both sockets where I load these images and the error happens: var socket = io(); socket.on('newPlayer', function (data){ var uID = data.uID; players[uID] = new EnemyPlayer(data.oPlayers[uID].id, data.oPlayers[uID].x, data.oPlayers[uID].y, data.oPlayers[uID].angle); players[uID].id = data.oPlayers[uID].id; players[uID] = game.add.sprite(0, 0, 'players'); players[uID].anchor.setTo(0.5, 0.5); game.physics.enable(players[uID], Phaser.Physics.ARCADE); players[uID].body.drag.set(0.2); players[uID].body.maxVelocity.setTo(400, 400); players[uID].body.collideWorldBounds = true; }); socket.on('update', function (data){ playerQuantity = data.playerQuantity if (userID == playerQuantity && userID > 1){ players = data.oPlayers; for (var i = 1; i < playerQuantity; i++){ if (i != userID){ players[i] = new EnemyPlayer(players[i].id, players[i].x, players[i].y, players[i].angle); players[i].id = players[i].id; players[i] = game.add.sprite(players[i].x, players[i].y, 'players'); players[i].anchor.setTo(0.5, 0.5); game.physics.enable(players[i], Phaser.Physics.ARCADE); players[i].body.drag.set(0.2); players[i].body.maxVelocity.setTo(400, 400); players[i].body.collideWorldBounds = true; players[i].position.x = players[i].x; players[i].position.y = players[i].y; players[i].angle = players[i].angle; } } } });(The socket 'New Player' is called for an existing player when a new player joins, while the socket 'Update' is called for the new player to draw all the other players) Could it be an error involving socket.io? Or is it something that I'm missing?
  23. It is regularly ask so I suggest that I use as server NodeJS + socket.IO. this therefore create a master server and workers according to the number of heart of the machine. This solution allows to distribute the load. Here is the Serveur.js var cluster = require('cluster'), _portSocket = 8080, _portRedis = 6379, _HostRedis = 'localhost'; if (cluster.isMaster) { var server = require('http').createServer(), socketIO = require('socket.io').listen(server), redis = require('socket.io-redis'); socketIO.adapter(redis({ host: _HostRedis, port: _portRedis })); var numberOfCPUs = require('os').cpus().length; for (var i = 0; i < numberOfCPUs; i++) { cluster.fork(); } cluster.on('fork', function(worker) { console.log('Travailleur %s créer', worker.id); }); cluster.on('online', function(worker) { console.log('Travailleur %s en ligne', worker.id); }); cluster.on('listening', function(worker, addr) { console.log('Travailleur %s écoute sur %s:%d', worker.id, addr.address, addr.port); }); cluster.on('disconnect', function(worker) { console.log('Travailleur %s déconnecter', worker.id); }); cluster.on('exit', function(worker, code, signal) { console.log('Travailleur %s mort (%s)', worker.id, signal || code); if (!worker.suicide) { console.log('Nouveau travailleur %s créer', worker.id); cluster.fork(); } }); } if (cluster.isWorker) { var http = require('http'); http.globalAgent.maxSockets = Infinity; var app = require('express')(), ent = require('ent'), fs = require('fs'), server = http.createServer(app).listen(_portSocket), socketIO = require('socket.io').listen(server), redis = require('socket.io-redis'); socketIO.adapter(redis({ host: _HostRedis, port: _portRedis })); app.get('/', function (req, res) { res.emitfile(__dirname + '/interface.php');}); socketIO.sockets.on('connection', function(socket, pseudo) { socket.setNoDelay(true); socket.on('nouveau_client', function(pseudo) { pseudo = ent.encode(pseudo); socket.pseudo = pseudo; try { socket.broadcast.to(socket.room).emit('nouveau_client', pseudo); } catch(e) { socket.to(socket.room).emit('nouveau_client', pseudo); } console.log('L\'utilisateur : '+socket.pseudo+' s\'est connecter'); }); socket.on('message', function(data) { socket.broadcast.to(socket.room).emit('dispatch', data); }); socket.on('exit', function(data) { socket.close();}); socket.on('room', function(newroom) { socket.room = newroom; socket.join(newroom); console.log('Le membre '+socket.pseudo+' a rejoint le domaine '+socket.room); socket.broadcast.to(socket.room).emit('dispatch', 'L\'utilisateur : '+socket.pseudo+' a rejoint le domaine : '+socket.room); }); }); } And to install Node: and install Redis server: and modules: The server runs. ------------------------ Client: <head> <script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script> </head> <body> <script> var socket = null; try { socket = io.connect(); console.log("socket: Ok!"); } catch(err) { console.error("Socket is out of service!"); } if(socket != null) { socket.emit('new_client', 'admin'); // use variable php (COOKIES, SESSION...) socket.on('message', function(data) { $('#zone_chat').prepend('' + data.pseudo + ': ' + data.message + '<br />'); }); socket.on('new_client', function(pseudo) { $('#zone_chat').prepend('<em>' + pseudo + ' a rejoint le chat !</em><br />'); }); socket.on('moveObjet', function(data) { mesh = scene.getMeshByName(data.name); mesh.position = new BABYLON.Vector3(data.position); mesh.rotation = new BABYLON.Vector3(data.rotation); }); } </script> </body> The client runs.
  24. Hi guys, I think we should create a plugin for real-time games with Phaser Framework, using Socket.io with Node.js or SignalR with ASP.NET. What do you think everyone? It would be great all work together and do it... sorry for my bad english hahaha Regards, Nicholls
  25. Hi everybody, I'm a web developer and I created a framework that enables users to play html5 games using their mobile devices as a controller. You can check out a demo at http://dillo.cc. It's really easy to use, so check it out It's an open-source project so feel free to contribute! You can find the source code on github https://github.com/wietsedevries/armadillo. If you have any comments or tips, feel free to contact me!