So I have a working online multiplayer “game” (not that you can do much) but I am looking to have it work like @pumpkinhead’s multiplayer game in the way of, if the server isn’t open that after so long it will open automatically. I feel like this might have more to do with replit (where the server is handled).
Server code: https://replit.com/@5omeone3lse/wickServerTesting#index.js
Wick file code (its just all in a single frame)
const playerPathJson = `["Group",{"applyMatrix":false,"matrix":[1,0,0,1,343.77053,212.29476],"pivot":[0,0],"children":[["Layer",{"applyMatrix":true,"children":[["Path",{"name":"9e72d4ae-0b71-46ad-972b-31197d27b9f2","applyMatrix":true,"segments":[[[-30,0],[0,16.5686],[0,-16.5686]],[[0,-30],[-16.5783,0],[16.5783,0]],[[30,0],[0,-16.5686],[0,16.5686]],[[0,30],[16.5783,0],[-16.5783,0]]],"closed":true,"fillColor":[0.45098,0.45098,0.45098,1],"strokeColor":[0,0,0],"strokeCap":"round"}],["Path",{"name":"37faefa2-a9cf-4bcd-b7e5-501d8f3707bd","applyMatrix":true,"segments":[[[5.28729,-10.82032],[0,2.7698],[0,-2.7698]],[[10.30246,-15.83548],[-2.7698,0],[2.7698,0]],[[15.31762,-10.82032],[0,-2.7698],[0,2.7698]],[[10.30246,-5.80516],[2.7698,0],[-2.7698,0]]],"closed":true,"fillColor":[1,1,1,1],"strokeColor":[0,0,0],"strokeWidth":0,"strokeCap":"round"}],["Path",{"name":"bcc1d915-c24b-4a92-9992-3e63793ea21e","applyMatrix":true,"segments":[[[8.29639,-12.82032],[0,1.10792],[0,-1.10792]],[[10.30246,-14.82638],[-1.10792,0],[1.10792,0]],[[12.30852,-12.82032],[0,-1.10792],[0,1.10792]],[[10.30246,-10.81426],[1.10792,0],[-1.10792,0]]],"closed":true,"fillColor":[0,0,0,1],"strokeColor":[0,0,0],"strokeWidth":0,"strokeCap":"round"}],["Path",{"name":"ebb956a0-2561-4a33-be1c-10b1bab46835","applyMatrix":true,"segments":[[[-15.89192,-10.82032],[0,2.7698],[0,-2.7698]],[[-10.87675,-15.83548],[-2.7698,0],[2.7698,0]],[[-5.86159,-10.82032],[0,-2.7698],[0,2.7698]],[[-10.87675,-5.80516],[2.7698,0],[-2.7698,0]]],"closed":true,"fillColor":[1,1,1,1],"strokeColor":[0,0,0],"strokeWidth":0,"strokeCap":"round"}],["Path",{"name":"1840c337-a4b1-4519-8196-44c41b272d6a","applyMatrix":true,"segments":[[[-12.88282,-12.82032],[0,1.10792],[0,-1.10792]],[[-10.87675,-14.82638],[-1.10792,0],[1.10792,0]],[[-8.87069,-12.82032],[0,-1.10792],[0,1.10792]],[[-10.87675,-10.81426],[1.10792,0],[-1.10792,0]]],"closed":true,"fillColor":[0,0,0,1],"strokeColor":[0,0,0],"strokeWidth":0,"strokeCap":"round"}]]}]]}]`;
window.wick_project = project;
window.addObj = (path) => {
let wickpath = new Wick.Path({path:path,project:wick_project});
wick_project.addObjects([wickpath]);
return wickpath;
};
window.server = {};
window.client = {};
client.character = {};
let playerObj = new paper.Group();
playerObj = playerObj.importJSON(playerPathJson).clone();
playerObj = addObj(playerObj);
client.character.wickpath = playerObj;
client.character.path = playerObj.view.item;
client.character.path.position = [360,240];
server.players = {};
client.id = null;
server.socket = new WebSocket("server"); //server domain (not actual server domain)
client.connected = false;
server.sendToSocket = function(data) {
server.socket.send(JSON.stringify(data));
};
server.socket.onopen = function() {
console.log("Websocket opened");
};
server.socket.onerror = function(err) {
console.error("Error opening socket", err);
};
server.socket.onclose = function(ev) {
console.log("Connection closed because: " + ev.reason);
};
server.socket.onmessage = function(msg) {
var dat = JSON.parse(msg.data);
if (dat.type === "init") { //get information from server
client.connected = true;
client.id = dat.id; //get id
//create clips of players already in server
for (let playerDat of dat.data.players) {
server.players[playerDat.id] = {};
let paperGroup = new paper.Group();
paperGroup = paperGroup.importJSON(playerPathJson).clone();
let path = addObj(paperGroup);
path.view.item.position = [360,240];
server.players[playerDat.id].wickpath = path;
server.players[playerDat.id].path = path.view.item;
server.players[playerDat.id].path.position = [playerDat.x,playerDat.y];
server.players[playerDat.id].path.rotation = playerDat.rotation;
}
return;
}
if (!client.connected) return;
if (dat.type === "update") { //new positions for every player
for (let playerDat of dat.data) {
if (playerDat.id === client.id) continue; //don't update self
server.players[playerDat.id].path.position = [playerDat.x,playerDat.y];
server.players[playerDat.id].path.rotation = playerDat.rotation;
}
return;
}
if (dat.type === "player_connected") {
//add new player
if (dat.id !== client.id) {
let paperGroup = new paper.Group();
paperGroup = paperGroup.importJSON(playerPathJson).clone();
let path = addObj(paperGroup);
console.log(path);
path.view.item.position = [360,240];
server.players[dat.id] = {};
server.players[dat.id].wickpath = path;
server.players[dat.id].path = path.view.item;
console.log("Player connected");
}
return;
}
if (dat.type === "player_disconnected") {
//remove player
server.players[dat.id].wickpath.remove();
delete server.players[dat.id];
return;
}
};
let dataSendTimer = 0;
onEvent('update', function () {
let dx = (client.character.path.position.x - mouseX);
let dy = (client.character.path.position.y - mouseY);
if (dx > 0) {
client.character.path.rotation = (Math.atan(dy/dx)*180/Math.PI)-90;
} else {
client.character.path.rotation = (Math.atan(dy/dx)*180/Math.PI)+90;
}
client.character.path.position.x = Math.min(Math.max(0+client.character.path.bounds.width/2,client.character.path.position.x),project.width-client.character.path.bounds.width/2);
client.character.path.position.y = Math.min(Math.max(0+client.character.path.bounds.height/2,client.character.path.position.y),project.height-client.character.path.bounds.height/2);
if (client.connected === true) {
dataSendTimer++;
if (dataSendTimer >= 2) {
dataSendTimer = 0;
server.sendToSocket({
type: "update",
x: client.character.path.position.x,
y: client.character.path.position.y,
rotation: client.character.path.rotation
});
}
}
});
onEvent('keydown', function () {
if (key === "w" ) {
client.character.path.position.y -= 4;
}
if (key === "a" ) {
client.character.path.position.x -= 4;
}
if (key === "s" ) {
client.character.path.position.y += 4;
}
if (key === "d" ) {
client.character.path.position.x += 4;
}
});