Implement resolution scaling HTML5 canvas

Question

I'm building an hmtl5 real time game using socket.IO and node.js. If you've heard of the classic game "pong", I'm going for that. When you consider the gameplay for this game, it becomes apparent that resolution scaling is something I'll have to implement. I'm running one instance of the game on the server (no graphics rendering, only physics), and of course once for every client. Each client's canvas is the size of the browser window so could be any resolution.

What I'm wondering is how I should keep track of positions, velocities, etc. in the core game code. Should I use percentages and then multiply them by the respective screen sizes? Like x = 0.5 to store a position halfway across the screen? What's the best/standard way of doing this? Thanks so much.

Answer 1

You have an authoritative server. That server has no screen, so it doesn't make sense to use pixel-measurements in your game mechanics code. So you should make up a coordinate system which works for you. There are countless ways to handle this. The upper left corner of the play area could be 0.0:0.0 while the lower right is 1.0:1.0. Or the origin could be in the center with the play area stretching from -1.0:-1.0 to 1.0:1.0. It really doesn't matter that much where you put the origin as long as it seems plausible for you.

When the clients visualize the game, they need to convert the game-coordinates to screen-coordinates. You can that quite elegantly by setting context.scale and context.translate so the visual coordinate system is the same as your logical.