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();
}
please help
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.
1 Like
ok ill try this right now!
it kinda works when i open localhost:3000 and i move it works but when i look from my other window it has just become longer
Well, that’s because you are recording all the positions the mouse has moved to.
If you only need the last position, you don’t need arrays to store the values - you just need a couple of variables!
can u maybe give me a example i am not the best
i really cant fix this i’ve been trying for 4 days please can u send a example
Need to implement changes in the sketch.js file. The simple way is to use a global variable:
var gData; //Global scope
Then you need to move the lines from socket.on() to draw():
fill(255);
noStroke();
ellipse(data.x, data.y, 200, 200);
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.
Kf
Im so sorry for the trubble maybe it is cus im tired or it is cus i changed alot off it to try to fix it but can u provide full source code
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();
}
the multiplayer aspect stopped working
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.
Kf
1 Like