HighDPI support

netplayjs-client/src/defaultinput.ts

@@ -49,6 +49,7 @@ export class DefaultInput extends NetplayInput {
 
 export class DefaultInputReader {
   canvas: HTMLCanvasElement;
+  canvasSize: { width: number; height: number };
 
   keysPressed: { [key: string]: boolean } = {};
   keysHeld: { [key: string]: boolean } = {};
@@ -73,8 +74,8 @@ export class DefaultInputReader {
   getCanvasScale(): { x: number; y: number } {
     const rect = this.canvas.getBoundingClientRect();
     return {
-      x: this.canvas.width / rect.width,
-      y: this.canvas.height / rect.height,
+      x: this.canvasSize.width / rect.width,
+      y: this.canvasSize.height / rect.height,
     };
   }
 
@@ -94,11 +95,13 @@ export class DefaultInputReader {
   constructor(
     root: HTMLElement = document.body,
     canvas: HTMLCanvasElement,
+    canvasSize: { width: number; height: number },
     pointerLock: boolean = false,
     preventContextMenu: boolean = false,
     touchControls: { [name: string]: TouchControl } = {}
   ) {
     this.canvas = canvas;
+    this.canvasSize = canvasSize;
     this.touchControls = touchControls;
 
     root.addEventListener(

netplayjs-client/src/game.ts

@@ -21,6 +21,13 @@ export type GameClass = {
    */
   canvasSize: { width: number; height: number };
 
+  /**
+   * Should we scale up the canvas with the device pixel ratio?
+   * If enabled, it is up to the game code to draw correctly
+   * using window.devicePixelRatio.
+   */
+  highDPI?: boolean;
+
   /**
    * Whether or not we should lock the pointer when the user clicks on the
    * canvas. Use this for games like FPSs.

netplayjs-client/src/wrappers/gamewrapper.ts

@@ -52,8 +52,12 @@ export abstract class GameWrapper {
 
     // Create canvas for game.
     this.canvas = document.createElement("canvas");
-    this.canvas.width = gameClass.canvasSize.width;
-    this.canvas.height = gameClass.canvasSize.height;
+
+    const pixelRatio = (gameClass.highDPI && window.devicePixelRatio) ?
+      window.devicePixelRatio : 1;
+
+    this.canvas.width = gameClass.canvasSize.width * pixelRatio;
+    this.canvas.height = gameClass.canvasSize.height * pixelRatio;
 
     this.canvas.style.backgroundColor = "black";
     this.canvas.style.position = "absolute";
@@ -114,6 +118,7 @@ export abstract class GameWrapper {
     this.inputReader = new DefaultInputReader(
       document.body,
       this.canvas,
+      this.gameClass.canvasSize,
       this.gameClass.pointerLock || false,
       this.gameClass.preventContextMenu || false,
       this.gameClass.touchControls || {}

netplayjs-client/src/wrappers/localwrapper.ts

@@ -45,19 +45,26 @@ export class LocalWrapper {
     for (let i = 0; i < numPlayers; ++i) {
       // Create canvas for game.
       const canvas = document.createElement("canvas");
-      canvas.width = gameClass.canvasSize.width;
-      canvas.height = gameClass.canvasSize.height;
+
+      const pixelRatio = (gameClass.highDPI && window.devicePixelRatio) ?
+        window.devicePixelRatio : 1;
+
+      canvas.width = gameClass.canvasSize.width * pixelRatio;
+      canvas.height = gameClass.canvasSize.height * pixelRatio;
       canvas.tabIndex = 0;
 
       canvas.style.backgroundColor = "black";
       canvas.style.boxShadow = "0px 0px 10px black";
       canvas.style.margin = "5px";
+      canvas.style.width = `${gameClass.canvasSize.width}px`;
+      canvas.style.height = `${gameClass.canvasSize.height}px`;
       document.body.appendChild(canvas);
 
       // Create input reader.
       const inputReader = new DefaultInputReader(
         canvas,
         canvas,
+        this.gameClass.canvasSize,
         this.gameClass.pointerLock || false,
         this.gameClass.preventContextMenu || false,
         {}

netplayjs-demo/src/examples/fps.ts

@@ -44,6 +44,7 @@ const PLAYER_COLLIDER = new Capsule();
 export class PhysicsGame extends Game {
   static timestep = 1000 / 60;
   static canvasSize = { width: 600, height: 300 };
+  static highDPI = true;
 
   static octree = new Octree();
   static level: THREE.Object3D = new THREE.Object3D();

netplayjs-demo/src/examples/input-test.ts

@@ -10,10 +10,11 @@ import {
 
   export class InputTestGame extends Game {
     static timestep = 1000 / 5;
-    static canvasSize = { width: 600, height: 1000 };
+    static canvasSize = { width: 600, height: 600 };
     static deterministic = true;
     static preventContextMenu = true;
-
+    static highDPI = true;
+
     inputs: Map<NetplayPlayer, DefaultInput> = new Map();
 
     tick(playerInputs: Map<NetplayPlayer, DefaultInput>): void {
@@ -25,6 +26,10 @@ import {
     draw(canvas: HTMLCanvasElement) {
       // Fill in a black background.
       const ctx = canvas.getContext("2d")!;
+
+      ctx.resetTransform();
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
       ctx.fillStyle = "black";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 

netplayjs-demo/src/examples/pong.ts

@@ -37,6 +37,7 @@ function rectOverlap(
 export class Pong extends Game {
   static timestep = 1000 / 60;
   static canvasSize = { width: PONG_WIDTH, height: PONG_HEIGHT };
+  static highDPI = true;
 
   leftPaddle: number = PONG_HEIGHT / 2 - PADDLE_HEIGHT / 2;
   rightPaddle: number = PONG_HEIGHT / 2 - PADDLE_HEIGHT / 2;
@@ -161,6 +162,9 @@ export class Pong extends Game {
   draw(canvas: HTMLCanvasElement) {
     const ctx = canvas.getContext("2d")!;
 
+    ctx.resetTransform();
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
     ctx.fillStyle = "black";
     ctx.fillRect(0, 0, canvas.width, canvas.height);