i have a multiplayer game that im working on but when i moved i got bigger instead off moving so i used background(); in draw and then the multiplayer aspect stopped working help i am using kinda messy code cus im just trying to make it work but here is the source code:
server.js code:
var express = require('express');
// Create the app
var app = express();
var players = [];
// Set up the server
// process.env.PORT is related to deploying on heroku
var server = app.listen(process.env.PORT || 3000, listen);
// This call back just tells us that the server has started
function listen() {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://' + host + ':' + port);
}
app.use(express.static('public'));
// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io')(server);
// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
// We are given a websocket object in our function
function (socket) {
players.push(socket.id);
console.log("We have a new client: " + socket.id);
console.log("players: " + players);
// When this user emits, client side: socket.emit('otherevent',some data);
socket.on('mouse',
function(data) {
// Data comes in as whatever was sent, including objects
//console.log("Received: 'mouse' " + data.x + " " + data.y);
// Send it to all other clients
socket.broadcast.emit('mouse', data);
// This is a way to send to everyone including sender
// io.sockets.emit('message', "this goes to everyone");
}
);
socket.on('disconnect', function() {
console.log("Client has disconnected");
});
}
);
io.sockets.on('404', function() {
console.log("404 error");
})
sketch.js code:
var socket;
var x;
var y;
var speed = 1;
var it = false;
function setup() {
createCanvas(600, 600);
background(0);
x = random(600);
y = random(600);
// Start a socket connection to the server
// Some day we would run this server somewhere else
socket = io.connect('http://localhost:3000');
// We make a named event called 'mouse' and write an
// anonymous callback function
socket.on('mouse',
// When we receive data
function(data) {
console.log("Got: " + data.x + " " + data.y);
// Draw a blue circle
fill(255);
noStroke();
ellipse(data.x, data.y, 200, 200);
}
);
}
function update() {
}
function draw() {
background(51);
show();
update();
}
function show() {
// Draw some white circles
fill(255);
noStroke();
ellipse(x, x, 200, 200);
// Send the mouse coordinates
sendmouse(x, y);
}
// Function for sending to the socket
function sendmouse(xpos, ypos) {
// We are sending!
// Make a little object with and y
var data = {
x: xpos,
y: ypos
};
// Send that object to the socket
socket.emit('mouse',data);
}
function keyPressed () {
if(keyCode == 87) {
y = y - 10;
} if(keyCode == 83) {
y = y + 10;
} if(keyCode == 65) {
x = x - 10;
} if(keyCode == 68) {
x = x + 10;
}
sendmouse();
}
I suspect that your problem is that you are not doing all your drawing in draw(). Look, you only draw the blue ellipses when the socket’s mouse callback function happens. These blue ellipses are going to get wiped out as soon as the next time draw() happens.
What you need to do is record the fact that you need a blue ellipse at some position (x,y), and then make use of that stored information in draw() to draw the ellipse.
You could store this information in a couple of arrays.
// At the global level:
var storedBlueEllipseXs = []
var storedBlueEllipseYs = []
Then add an ellipse to them when the socket callback happens:
// ...
// Draw a blue circle - NO! RECORD A BLUE CIRCLE!
// fill(255);
// noStroke();
// ellipse(data.x, data.y, 200, 200);
storedBlueEllipseXs.push( data.x );
storedBlueEllipseYs.push( data.y );
// Now the fact that a blue ellipse should be here is recorded.
// ...
Then make use of that information in draw():
// In draw():
background(51);
// Loop over all blue ellipses we need.
for( var i = 0; i < storedBlueEllipseYs.length; i++){
// Now draw them.
fill(0, 0, 255);
noStroke();
ellipse( storedBlueEllipseXs[i], storedBlueEllipseYs[i], 200, 200);
}
// ...
Attempt to make this change yourself and post your code again with the attempted change if you need more help.
Last, in socket.on() you need to do this: gData=data; and that’s it. Notice the function draw() will always draw an ellipse at the coordiantes stored in gData, and gData is updated every time it receives data from the server.
Notice you had a typo in your show() function. Try this code. Notice that I didnt test it, to give you fair watning.
I didnt create the global field as you already had x and y avaliable in your global scope.
Kf
var socket;
var x;
var y;
var speed = 1;
var it = false;
function setup() {
createCanvas(600, 600);
background(0);
fill(255);
noStroke();
//x = random(600);
//y = random(600);
// Start a socket connection to the server
// Some day we would run this server somewhere else
socket = io.connect('http://localhost:3000');
// We make a named event called 'mouse' and write an
// anonymous callback function
socket.on('mouse', function(data) { // When we receive data
x=data.x;
y=data.y;
console.log("Got: " + x + " " + y);
} );
}
function draw() {
background(51);
show();
}
function show() {
// Draw some white circles
fill(255);
noStroke();
ellipse(x, y, 200, 200);
// Send the mouse coordinates
sendmouse(x, y);
}
// Function for sending to the socket
function sendmouse(xpos, ypos) {
// We are sending!
// Make a little object with and y
var data = {
x: xpos,
y: ypos
};
// Send that object to the socket
socket.emit('mouse', data);
}
function keyPressed () {
if (keyCode == 87) {
y = y - 10;
}
if (keyCode == 83) {
y = y + 10;
}
if (keyCode == 65) {
x = x - 10;
}
if (keyCode == 68) {
x = x + 10;
}
sendmouse();
}
Yes, without running code it is hard to provide a proper solution. At least you see the point now or having a global access and to update the field only when it is refreshed (when you get a new message from the server)… now I can see the problem you are having… I think. You need to keep track of multiple players.
Get away from the computer and think about this:
You are a player and you connect to a server. Great.
The server accepts you and adds it to the roaster of players.
Now a second player joins the game. The server adds him to the roaster.
Now, you, when you get a signal, how do you know the coordinates the server is sending to you are from you and not from the second player? You think a unique id to each player would solve the problem?
Where would you assign this id?
How do clients keep track of other’s ids?
Sorry, I wont code the solution. Either you can check previous posts or try again. I have to tell you that it is better if you think about this first before you type any code. take pen and paper and do few iterations until you have clear your min requirements. You are using sockets… you need to handle multiple clients… this is part of designing a multiplayer game.