I have this 2D tilemap game 13x13 viewport (169 tiles drawn on canvas at a time) of a 150x150 map. Each tile is 32x32px. Obviously I only update the 13x13 viewport...
I want to update a canvas in real-time as the world-map will be handled server-side. At least the logic... the drawning... should it be server-side or client-side?
Now, I am using Socket.IO for real-time data. Based on that current player's x and y, the canvas is drawn from where that person is on the map.
I can do this two ways:
(Server-side) Use node-canvas to draw the server-side via NodeJS and transmit back the new canvas. Is it possible? Because it seems I can only do it once via a PNG.
(Client-side) Transmit the 169 array of the new tileset (when player moves or action happens). Doing the logic server-side and draw it on the client-side from the array received from a callback.
Client-side problem: The problem here is that transmitting that large of an array does take seconds (2-3) so there is some lag.
Server-side problem: There is no continuous streaming of a canvas being drawn from the server that outputs to client... is there? Or am I not looking hard enough at node-canvas npm module.
I am not using any JavaScript game framework.
What are my best options here?