I’ve made a multiplayer test. The server code is handled at https://repl.it/@phazrlazr/wicknet. It’s a platformer kinda thing and you can see other people running around. And um… I don’t really know what else to say.
networking-test.html (2.1 MB)
Oh, and also I forgot to mention since repl.it shuts down repls if they’ve been inactive for a while, the server may not be running. I think other people can start the server though. Repl.it’s supposed to wake up the server if there’s a request so if it says you could not connect, try it again after a few seconds.
Oh, and also I forgot to mention about this site: https://www.gabrielgambetta.com/client-server-game-architecture.html This is what I read to learn about how to make multiplayer games
UPDATE 1/15/2021
I added the ability to stand on other players which is cool. I also added text showing the status of the connection. And that’s basically it… Oh and here’s the code for the client networking clip. I don’t want to give the actual .wick file because it would then be very easy to hack. Even though you can get the actual Wick file from the contents of the HTML page.
Default script
if (!this.isClone) {
//////////////////
// NETWORK CODE //
//////////////////
window.network = {};
network.players = {};
network.myId = null;
network.socket = new WebSocket("wss://wicknet.phazrlazr.repl.co/"); //server domain
network.connected = false;
network.playerClip = this;
network.statusClip = connectionStatus;
connectionStatus.status = "Connecting...";
network.sendToSocket = function(data) {
network.socket.send(JSON.stringify(data));
};
network.socket.onopen = function() {
console.log("Websocket opened");
};
network.socket.onerror = function(err) {
console.error("Error opening socket", err);
network.statusClip.setText("Could not connect, please try again");
};
network.socket.onclose = function(ev) {
network.statusClip.setText("Connection closed because: " + ev.reason);
};
network.socket.onmessage = function(msg) {
var dat = JSON.parse(msg.data);
console.log(dat.type);
if (dat.type === "init") { //get information from server
console.log("Got init");
console.log(dat);
network.connected = true;
network.statusClip.setText("Connected!");
network.myId = dat.id; //get id
//create clips of players already in server
for (let playerDat of dat.players) {
let clip = network.playerClip.clone();
clip.x = playerDat.x;
clip.y = playerDat.y;
network.players[playerDat.id] = clip;
}
return;
}
if (!network.connected) return;
if (dat.type === "positions") { //new positions for every player
for (let playerDat of dat.positions) {
if (playerDat.id === network.myId) continue; //don't update self
//write clip tweening data for entity interpolation
let clip = network.players[playerDat.id];
clip.targetX = playerDat.x;
clip.targetY = playerDat.y;
clip.startX = clip.x;
clip.startY = clip.y;
var dx = clip.targetX - clip.x;
var dy = clip.targetY - clip.y;
var dist = Math.sqrt(dx * dx + dy * dy);
clip.targetReachTime = dat.dt;
clip.targetTime = Date.now();
clip.targetAlpha = 0;
}
return;
}
if (dat.type === "player_connected") {
//add new player clip
if (dat.id !== network.myId) {
let clip = network.playerClip.clone();
clip.x = 0;
clip.y = 0;
network.players[dat.id] = clip;
console.log("Player connected");
}
return;
}
if (dat.type === "player_disconnected") {
//remove player clip
network.players[dat.id].remove();
delete network.players[dat.id];
return;
}
};
var frameCount = 0;
onEvent('update', function () {
frameCount++;
//Every 15 frames, send player position data to server
if (network.socket.readyState === 1 && frameCount % 2 === 0) {
network.sendToSocket({
type: "position",
x: mainPlayer.x,
y: mainPlayer.y
});
}
});
} else {
////////////////
// CLONE CODE //
////////////////
new pkplat.MovingPlatformController(this);
pkplat.addActor(this);
this.targetX = 0; //self-explanatory...
this.targetY = 0;
this.startX = 0;
this.startY = 0;
this.targetReachTime = 0; //the amnt of time it should take to reach target
this.targetTime = 0; //when the interpolation started
this.targetAlpha = 0; //used for the this.lerp function
//linear interpolation function, gets a value between min and max
//based off of a (for alpha) which is a value between 0 and 1
this.lerp = function(min, max, a) {
if (a > 1) return max;
if (a < 0) return min;
return (max - min) * a + min;
};
this.lastTime = Date.now();
}
Update script
if (this.isClone) {
//get time since last update
var nowTime = Date.now();
var dt = (nowTime - this.lastTime) / 1000;
this.lastTime = nowTime;
//linear interpolation of position
this.targetAlpha += dt / this.targetReachTime;
var x = this.lerp(this.startX, this.targetX, this.targetAlpha);
var y = this.lerp(this.startY, this.targetY, this.targetAlpha);
this.controller.goTo(x, y); //so physics work
}
The code is fairly trivial. I will not give code for anything else because they’re only like 10 lines of code and are incredibly simple. I used my pkplat engine for this so yeah. Which is kinda why i made that engine in the first place, because I was going to make a networking test.