I've made HTML5 games before and have done smooth animations using this feature of HTML5 animate(highResTimestamp)
It works really well and creates smooth animations.
However, I've only made local games. I am working on making an online game server and using nodejs. I was following a tutorial and instead of using animate(highResTimestamp)
took keep track of the frame rate they made nodejs send a signal to the client every so often to update the position of each character. As seen below,
setInterval(function() {
var pack = [];
for(var i in SOCKET_LIST) {
var socket = SOCKET_LIST[i];
pack.push({
x:socket.x,
y:socket.y
});
}
for(var i in SOCKET_LIST) {
var socket = SOCKET_LIST[i];
socket.emit('newPositions', pack);
}
}, 1000/25);
I've added a simple method that detects a keyboard keydown and will send a signal to the server saying to increase x or y. Then the client is listening for the message newPositions
and when it recieves it, it clears the canvas and draws all the characters in their new posisitons.
This works, however, it is not smooth, it is very edgy feeling. Is there a way around this? Is there a better way to make a nodejs game server? Should the server be controlling the frame rate or should I be using animate(highResTimestamp)
to control the frame rate?