Search the Community

Hello everyone You know the character guessing game that is usually played with friends, right? You know, the game which we write the characters on paper and then stick them on our forehead. During the pandemic process, in order to be able to play this game remotely with my friends, I have developed the Browser version of the Who Am I game. Link: https://play-whoami.com/ Technologies I used while developing this game: NodeJs for Backend, Ionic for Frontend (AngularJS Framework), HTML, and SCSS for Style. And of course, Socket.io to ensure the connection between the players. Below you can see screenshots of the game. Thanks in advance for the feedback!

Emoji War Inspired by the card game "Egyptian Ratscrew", we created "Emoji War". Emoji War is a browser game, where your only way to win is by screwing your friends. Different cards, abilities, and a lot of luck will help you to achieve that! Please note that this game is on open alpha state, so please be forgiving regarding small bugs. EmojiWar.net I would appreciate your reviews and thoughts. Thanks!

we have a turn game and we use socket.io so it can be multiplayer, we came up with the idea of making it as an instantaneous game on facebook, then we investigate and we found this link https://developers.facebook.com/docs/games/instant-games/guides/play-friends y con este https://developers.facebook.com/docs/games/instant- the problem is that we have no idea how to implement it with socket.io

Planning to develop 1 realtime multiplayer game, which would target Facebook Instant Games with further possibility to extend this into Cordova-wrapped Android/iOS app. The FPS must be rather high, as half second of a delay in the could influence the final battle result. Therefore, for the backend wondering between Firebase, Socket.io or Colyseus and looking for an opinion of someone experienced with that topic what would perform best for this scenario.

Hello everybody! I'm new to this site and am quite new to HTML5 game development as a whole. I have watched a few tutorials here and there, and came here in search of help from somebody with more experience than myself to help with my current issue. Currently I am working on a game to run alongside my website (connected to the game in a way). I have gotten a player object that tweens to the position a player clicks on within the canvas to work, but it seems only to work with one person connected only, otherwise the most recently connected player has all control to the position of said player object rather then creating one for themselves. I have tried a couple things (first being to include the image position within the socket.on function) but that only caused the player to be positioned where they clicked without any tweening being done. Here's the code for the client: var socket = io(); var ctx1 = document.getElementById("ctx"); var ctx = document.getElementById("ctx").getContext("2d"); img = new Image(); img.src = "FrontpageGuy.png"; img.xpo = 250; img.ypo = 250; socket.on('newPos',function(data){ ctx.clearRect(0,0,1024,576); for(var i = 0 ; i < data.length; i++){ TweenMax.to(img, 1 ,{ xpo:data[i].x, ypo:data[i].y, repeat:0, }); ctx.drawImage(img, img.xpo, img.ypo); } }); function clickDetector(event) { var xVal = event.clientX; var yVal = event.clientY; console.log("click X:" + xVal + ", click Y:" + yVal); socket.emit('movePlayer', {x:xVal, y:yVal}); } ctx1.addEventListener('click', clickDetector, false);

Please bear with me, I am completely new to game networking. Any help and improvise in this question will be appreciated!!! I have been playing around with BJS (babylon.js) for a while now, wanting to make a real-time multiplayer game. I have been searching around the web about game networking, and read this: https://github.com/gafferongames/gafferongames/blob/master/content/post/what_every_programmer_needs_to_know_about_game_networking.md It gave me a clear idea of how should I go ahead. But in all the forums, I hear people saying game networking is very hard, not to waste time on it rn, and stuff. So I thought to give it a try. I used node.js for server with socket.io to communicate to the client back and forth. What I did was, when I receive the server's update about the location, I would compare that to the location of the client (which was predicted, or more like comprehended on the client side) to check whether the difference was under 0.1 (or any number). If it was not, I would redirect the player back to location sent by the server. (there is still some minor jitter in the gameplay) After doing the above, I felt it like a piece of cake. I felt on top of the world! But, I was still trying to figure out what people really meant by "hard". So after bit of more research, I found out nengi.js, a game networking engine for node.js. I noticed people comparing socket.io and nengi.js. Aren't they two different things? socket.io is used for bidirectional communication between client and server, and nengi.js is a game networking engine! This has created a huge confusion in my head. Could anyone please help me with this? Also, please clarify whether the process I did above for client prediction is correct or not? If you need anymore details/info, please let me know! Thanks a lot for reading through! Thanks in advance!

I am creating a game and want user logins. I am using Node, socket, and MySQL. What do I need so that when a user log's in they don't need to login again?

Hi, I'm wondering how to avoid simultaneous mousedown events. I have a canvas drawn on screen. When a player clicks events take place based on where the player clicked on the screen. If two players click the canvas at the exact same time, they should both be alerted with a message that no simultaneous moves are allowed. I used an array to capture the move, however it seems to only register the move after the check and not before. Is there a simple way to capture which clients clicked at the same time? //Listen for player click event chainlinks.onmousedown = function(event) { var totCT; //update current player turn on client for (var i = 0; i < remotePlayers.length; i++) { if (remotePlayers[i].id == socket.id) { remotePlayers[i].currentTurn = true; } } //update current player turn on server for (var i in cPlayers) { if (cPlayers[i].id == socket.id){ cPlayers[i].currentTurn = true; } } socket.emit('update-currentTurn', {remotePlayers: remotePlayers, cPlayers:cPlayers}); if (totCT > 1) { //Simultaneous move happened - show invalid message } else { //All good to go ahead with the click event } } Thanks!

I have problems writing a multiplayer game with phaser 3 and socket.io I’ll explain it using a simple example: 2 players P1 and P2, try to kill each other using bullets B1 and B2. Scenario A: Use Pure Javascript and socket.io, without any game engine. A1. The socket.io server calculates the position of all players and bullets, and send these information to all players for every 30ms. A2. Each player send [inputs] to the server on real time basis. Of course, those inputs may arrive the server later then expected. A3. Each player show objects in screen only according to the information provided by the server, without calculating the objects’ position on the client side. A4. The game runs without any BIG problem since the Unique Game State is only calculated on the server side. A5. However, without using game engine, I need to calculate the [Physics] of all objects by myself on the server side. Scenario B: Use Javascript with phaser 3 and socket.io B1. At time 0.000 second, the server ask both players start the game at the same time. B2. At time 0.030 and 0.040, both players start the game accordingly. (As you can see, the network of player P1 is faster) B3. At time 0.200, player P1 fires a bullet B1 and starts to update screen using the phaser 3 engine’s [Physics]. B4. At time 0.280 (here the server takes 10ms to transfer this action from P1 to P2), P2 gets this action from the server, and starts to update screen using the game engine’s [Physics]. (You may probably notice that at this moment, the screens of P1 and P2 are different!) B5. Suppose the bullet B1 is able to hit P2 at time 1.000. At time 0.950, P2 moves away from the bullet and continues playing the game. B6. As you may already figure out, the action that P2 moves away, arrives P1 at time 1.030, at that time, P1 already win the game! At this moment, in P1’s screen, P1 win the game, but in P2’s screen, P2 is still playing the game! It seems that phaser 3 is not suitable for multiplayer games. Did I miss anything? Thanks in advance for your help.

Hello! We made an IO game called PirateBattle.io and you can play it here: http://piratebattle.io/ Mobile app version here: https://play.google.com/store/apps/details?id=com.jettigames.piratebattle IOS coming soon You are a pirate ship and you shall collect coins and shoot other ships. Coins are used to upgrade your boat. Controls: Use mouse to move Use left click to shoot Use space to boost Use 1, 2, 3 and 4 to upgrade your ship if you have enough money This game is made using Phaser, socketIO, NodeJS backend and Nginx for serving the static files. PLAY IT HERE: http://piratebattle.io/

My game is build for 6 players. Each player loads the game in a browser is assigned a unique room that displays a personal card and is represented by an avatar. The game works well, the images all load, however for some reason as more players access the game, some images may disappear. The player is actually still logged into the game and can even play the game, however their avatar image may have disappeared or their personal card may have disappeared. There is no consistency to which image may vanish and it doesn't always happen, but in most cases it does. Would anyone know why this may be? Thanks!

Hi there! I'm relatively new...ok very new to coding with phaser and I'm having a tough time finding tutorials that can help guide me through a few of the basics for what I'm looking for. I've been trying to use this tutorial: How to make a multiplayer online game with Phaser, Socket.io and Node.js And this one: How to create a multiplayer game with Phaser, Node, Socket.io and Express. However, it seems that both tutorials were made using Phaser2 and there are a few fundamental differences that don't function well using the newer code. The biggest part I'm having trouble with is the differences between game states in the old Phaser and how they are different from the scenes the new version uses. game.state.add('Game',Game); game.state.start('Game'); These functions specifically seem to break my game every time I try and use them. Is the new phaser designed to be run entirely through the index.html file? Or is there a way to execute most of my game's code in a separate game.js file? Currently I have at least a functioning game where I can move around on a map, but the entire thing is contained inside a single index.html file. You can see my game's code here: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Top Down Multiplayer Test Game</title> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var config = { type: Phaser.Auto, width: 960, height: 960, physics: { default: 'arcade', arcade: { debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var blocked; var game = new Phaser.Game(config); function preload () { //assets to use in the loading screen this.load.image('preloadbar', 'assets/images/preloader-bar.png'); //load game assets this.load.image('level1', 'assets/tilemaps/level1.png'); this.load.image('gameTiles', 'assets/images/Outside_A2.png'); this.load.image('gameTiles', 'assets/images/Outside_B.png'); this.load.image('emptypot', 'assets/images/emptypot.png'); this.load.image('filledbucket', 'assets/images/filledbucket'); this.load.image('player', 'assets/images/player.png'); this.load.image('doorleft', 'assets/images/doorleft.png'); this.load.image('doorright', 'assets/images/doorright.png'); this.load.image('tent', 'assets/images/tent.png'); this.load.image('sign', 'assets/images/sign.png'); this.load.image('campfire', 'assets/images/campfire.png'); this.load.image('woodpile', 'assets/images/woodpile.png'); this.load.image('tree', 'assets/images/tree.png'); this.load.image('rock', 'assets/images/rock.png'); this.load.image('grapes', 'assets/images/grapes.png'); this.load.image('log', 'assets/images/log.png'); this.load.spritesheet('dude', 'assets/spritesheets/dude.png',{frameWidth: 32, frameHeight: 48}); } function create () { this.add.image(480, 480, 'level1'); blocked = this.physics.add.staticGroup(); blocked.create(456, 216, 'sign'); blocked.create(648, 168, 'woodpile'); blocked.create(648, 216, 'campfire'); blocked.create(744, 168, 'tent'); blocked.create(840, 216, 'filledbucket'); blocked.create(600, 400, 'rock'); blocked.create(648, 448, 'rock'); blocked.create(600, 448, 'grapes'); blocked.create(214, 720, 'tree'); blocked.create(214, 552, 'tree'); blocked.create(214, 384, 'tree'); blocked.create(214, 286, 'log'); blocked.create(214, 192, 'tree'); blocked.create(358, 192, 'tree'); player = this.physics.add.sprite(480, 480, 'dude'); player.setBounce(0.2); player.setCollideWorldBounds(true); cursors = this.input.keyboard.createCursorKeys(); this.physics.add.collider(player, blocked); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3}), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }) this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); } function update () { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true) } else if (cursors.up.isDown) { player.setVelocityY(-160); player.anims.play('right', true) } else if (cursors.down.isDown) { player.setVelocityY(160); player.anims.play('left', true) } else{ player.setVelocityX(0); player.setVelocityY(0); player.anims.play('turn'); } } </script> </body> </html> I'm also having a few issues adapting what I see in these tutorials around using a server to keep track of my player's position and report back locations. Some examples start with something as basic as referencing socket.io in my code as a source. In all the tutorials I can find they say to use this line of code in my index.html file: <script src="/socket.io/socket.io.js"></script> However this doesn't work, as you can see at the top of my game file above, I had to reference the full file path, going in through the node_modules folder and finding the socket.io.js file. Am I doing something wrong? Or am I supposed to reference the full file path and the tutorial is not accurate? Finally when trying to implement some of the code in the tutorials into the game file itself to tell the game to ask the server when a new client is connected, I get an error saying the code is invalid. I'm not sure if this is because I am putting the code in the incorrect place, or if it's because the code doesn't work in Phaser3 the way it did in version 2. Client.askNewPlayer(); The tutorial says to put this "at the end of game.create()" however because I don't have game states, I have nothing I can find as the equivalent. Just for the sake of testing it out, I tried placing this code inside the "function create ()" of my game if only because of the word create, and then also in the "function update ()" of my game because I figured this is where the game is always looping and checking for updates. But both gave me errors saying that "client is not defined" Again I'm sure you can probably tell this is my first time doing this sort of thing with real code, I've been messing around with RPG maker before this, but I really think I can get the hang of it if I can just get a few pointers or tips to get me going in the right direction! Any help or advice would be greatly appreciated!

It seems that to send a private message to a player, you are supposed to use socket.to(socket.id).emit. I need to emit an image to a specific player so am using this concept, however it doesn't seem to work. Would anyone know how to emit an image to a specific client? Thanks!

I want to design a multiplayer phaser game that has a lobby, you can review your information or talk with friends via chat while you are waiting until you are matched with another player (is a fight game, pokemon style). -How do I get this? should I develop everything like a normal socket.io/chat project and then start the game when you find a match? -Should I start the game instance since the beginning, and the lobby would be a state, the fight another state and then back to the lobby? I'm very new to this but I'm excited to start developing, I'll appreciate any guidance, thanks

So basically I have a big project ongoing. Instead of having nested constructors that passed down all the game data such as renderer, resources and so on, I decided in my Game.js file to make it static and then require that in every other file and directly get the required data through there. It is quite a big project, so I am not going to include files, instead I'll be linking to my git repository. The issue is that nothing gets rendered on the screen and no errors are shown at all. I've tried 2 different browsers aswell. I've tried with both the CanvasRenderer and WebGLRenderer yet the same error still occurs. And I've checked the PIXI Container that gets rendered, and it does contain children of other DisplayObjects. https://github.com/marcus-sa/StormEngine/tree/dev/client

Join the Super Asteroid Battle! Bring your friends to fight the asteroids, collect ore, upgrade your spaceship, and shoot for the high score in this now multiplayer version of the classic Asteroids game. Built as a collaboration between Elisabeth Seite and Jackson Sui. We used the phaser.io framework and socket.io for multiplayer. We think the game turned out very well and hope you enjoy it! Try playing it here! Github Link

Hi, Infinitris.io - A massively multiplayer online falling block puzzle game, created using the Phaser game engine. Controls: Arrow keys and spacebar. Current Features: Instant join - only specify your nickname and you're ready to play. Multiplayer. No player limit. Dynamically sized grid with horizontal wrapping. Mistake detection. Sabotage other players by dropping on them. Phase shift into gaps directly below you (hold the down key while your block is being placed). Ingame chat [Enter]. Scoreboard. 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

Hello! I have been making this small puzzle prototype-game on my free time. It is called Numeropeli online. (Numeropeli means numbergame in Finnish.) I'm pretty sure there are real name for this type of game, (like chess, GO, backgammon) but i haven't found the one using google, so that's why the name of the game is kinda dumb. It is using node.js on backend, and it's using socket.io to connect to the server. It currently supports playing against random people, invite/host -game and playing against AI. I have been having fun playing with friends, it is kinda addicting too. The idea is, that players play in turns. The first player chooses the tile where the game begins. At each round, the players has to choose a tile from the line that the opponent has chosen. When you select a tile on your turn, the opponent must choose the next tile from the same column where the last picked tile were. The player with the most points wins. The next version contains: UX and UI updates, maybe whole rework (It feels bit wrong still) bug fixes (I'm pretty sure there are still bugs :D) Sounds (maybe) Stats system (wins, losses, avg, best points, game history, etc.) Leave button for games, if you dont want to play. Support for 5x5 tile games. Translations for other languages. Maybe make this an Windows Phone/Android application I would like to know what you guys think about it, are there some bad things, what should i change in the web design? Can you see any bugs? It looks like this on mobile Try it!

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.

What am I doing wrong here. Normal movement is fine, but when boost is applied, there is rubber banding at the end. I'm using client/server model to implement movement. pseudo code: Client sends inputs to server Client process inputs and displays locally Server receives inputs and calculates where client should be Server emit client coordinates Client receives update and applies coordinates Client reapply all inputs made after the last server update Player class: https://github.com/GodsVictory/SuperOnRoad/blob/wip/public/js/player.js Server code: https://github.com/GodsVictory/SuperOnRoad/blob/wip/server.js

Currently, when a client moves, the inputs are processed on both the client and the server which use the same calculation to process the movement. When the client receives an update from the server, the servers position will override the clients position. I would hope that the client and the server would calculate the same positions, but that is not the case. I believe timing is the culprit. What is the best practice when syncing movement? Current flow: Source: https://github.com/GodsVictory/SuperOnRoad

I've created a few HTML5 games and want to push myself further and try to make a multiplayer game. It got me thinking about monitising .io games and how other people monitise their multiplayer games, if at all. It would be nice if the multiplayer game I made covered it's own expenses. I've not seen any adverts for something like slither.io and video ads would just ruin the flow of the game. So I wanted to ask the community: how do you monitise your multiplayer games?

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

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

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.