Fix #1: high DPI display blur

Use window.devicePixelRatio
ganlvtech · Feb 9, 2019 · b23378e · b23378e
1 parent 1cde584
commit b23378e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/game.ts b/src/game.ts
@@ -9,14 +9,16 @@ export default class CatchTheCatGame extends Phaser.Game {
     public readonly mainScene: MainScene;
 
     constructor(w: number, h: number, r: number, parent?: HTMLElement | string) {
+        r = r * window.devicePixelRatio;
         let scene = new MainScene(w, h, r);
         const config: GameConfig = {
             width: Math.floor((6.5 + 2 * w) * r),
-            height: Math.floor((6.5 + Math.sqrt(3) * h) * r),
+            height: Math.floor((6 + Math.sqrt(3) * h) * r),
             type: Phaser.AUTO,
             parent: parent,
             backgroundColor: 0xeeeeee,
             scene: scene,
+            zoom: 1 / window.devicePixelRatio,
         };
         super(config);
         this.mainScene = scene;

diff --git a/src/sprites/resetButton.ts b/src/sprites/resetButton.ts
@@ -4,10 +4,11 @@ import _ from "../i18n";
 export default class ResetButton extends Phaser.GameObjects.Text {
     constructor(scene: MainScene) {
         super(scene, 0, 0, _("重置"), {});
-        this.setFontSize(20);
         this.setColor("#000000");
-        this.setPadding(16, 16, 16, 16);
-        let y = (4 + Math.sqrt(3) * scene.h) * scene.r;
+        let r = scene.r;
+        this.setFontSize(r);
+        this.setPadding(r, r, r, r);
+        let y = (3 + Math.sqrt(3) * scene.h) * scene.r;
         this.setPosition(0, y);
         let shape = new Phaser.Geom.Rectangle(0, 0, this.width, this.height);
         this.setInteractive(shape, Phaser.Geom.Rectangle.Contains);

diff --git a/src/sprites/statusBar.ts b/src/sprites/statusBar.ts
@@ -2,11 +2,11 @@ import MainScene from "../scenes/mainScene";
 
 export default class StatusBar extends Phaser.GameObjects.Text {
     constructor(scene: MainScene) {
-        super(scene, 0, 0, "", {
-            fontSize: "20px",
-            fill: "#000000",
-        });
-        this.setPadding(16, 16, 16, 16);
+        super(scene, 0, 0, "", {});
+        this.setColor("#000000");
+        let r = scene.r;
+        this.setFontSize(r);
+        this.setPadding(r, r, r, r);
     }
 }