画面高画質化

by cutfloss 05/12 [2026/05/12 17:05:18]

ゲーム画面を高画質にし、PCなど大画面で遊んだ際のぼやけを小さくする

@@ -5,37 +5,41 @@
  */
 
 javascript:(function(){
-    const canvas = document.getElementById('gameCanvas');
-    if(!canvas) return;
-    const ctx = canvas.getContext('2d');
-
-    /* 1. 解像度の倍率設定（2倍で十分クッキリします。3以上は超重負荷） */
-    const dpr = 2; 
-
-    /* 2. 内部解像度を物理的に倍にする */
-    /* 元のサイズを記録 */
-    const rect = canvas.getBoundingClientRect();
-    const oldW = canvas.width;
-    const oldH = canvas.height;
-
-    /* キャンバスのドット数を増やす */
-    canvas.width = oldW * dpr;
-    canvas.height = oldH * dpr;
-
-    /* 3. 描画スケールを補正 */
-    /* これをしないと、すべてのオブジェクトが画面の左上に小さく固まってしまいます */
-    ctx.scale(dpr, dpr);
-
-    /* 4. フォントの平滑化設定（さらにクッキリさせる） */
-    ctx.imageSmoothingEnabled = false; 
-    ctx.textBaseline = 'middle';
-
-    /* 5. ゲーム側の自動リサイズイベントを上書きして維持する */
-    window.removeEventListener('resize', window.resize);
-    
-    /* 座標計算のズレを防ぐため、ゲーム内のグローバル変数も更新（あれば） */
-    if(typeof width !== 'undefined') window.width = canvas.width / dpr;
-    if(typeof height !== 'undefined') window.height = canvas.height / dpr;
+    const d=document;
+    /* 1. 拡大率の定義（PCなら2.0〜3.0が適正） */
+    const zoom = 2.5;
+
+    /* 2. UI要素を一括で「本物のサイズ」へ書き換える */
+    const rescale = (selector, baseWidth, baseHeight, baseFont) => {
+        const el = d.querySelector(selector);
+        if(!el) return;
+        Object.assign(el.style, {
+            width: (baseWidth * zoom) + 'px',
+            height: (baseHeight * zoom) + 'px',
+            fontSize: (baseFont * zoom) + 'px',
+            transform: 'rotate(-90deg)', /* 回転は維持 */
+            scale: '1', /* ここでscaleを1（拡大なし）にするのがクッキリの秘訣 */
+            borderWidth: (2 * zoom) + 'px'
+        });
+    };
+
+    /* 各パーツの物理サイズを底上げ（元サイズ × zoom） */
+    rescale('#minimap', 60, 60, 10);
+    rescale('.score-panel', 100, 40, 12);
+    rescale('#leaderboard', 120, 150, 11);
+    rescale('#mode-display', 200, 30, 14);
+
+    /* 3. ボタンや入力欄もクッキリさせる */
+    d.querySelectorAll('button, input, .modal-content').forEach(el => {
+        el.style.fontSize = (16 * zoom) + 'px';
+        el.style.padding = (8 * zoom) + 'px';
+    });
+
+    /* 4. Canvasのにじみ対策（レンダリングヒント） */
+    const canvas = d.getElementById('gameCanvas');
+    if(canvas) {
+        canvas.style.imageRendering = 'pixelated'; /* 補完によるボヤけを防止 */
+    }
 
-    alert('【高解像度化パッチ】適用完了！\n内部解像度を' + dpr + '倍に引き上げました。\n文字のぼやけが解消されているはずです。');
+    alert('【UI高精細化】適用！\n虫眼鏡拡大を廃止し、フォントそのものを巨大化しました。');
 })();

/*
 * @title 画面高画質化
 * @description ゲーム画面を高画質にし、PCなど大画面で遊んだ際のぼやけを小さくする
 * @private
 */

javascript:(function(){
    const d=document;
    /* 1. 拡大率の定義（PCなら2.0〜3.0が適正） */
    const zoom = 2.5;

    /* 2. UI要素を一括で「本物のサイズ」へ書き換える */
    const rescale = (selector, baseWidth, baseHeight, baseFont) => {
        const el = d.querySelector(selector);
        if(!el) return;
        Object.assign(el.style, {
            width: (baseWidth * zoom) + 'px',
            height: (baseHeight * zoom) + 'px',
            fontSize: (baseFont * zoom) + 'px',
            transform: 'rotate(-90deg)', /* 回転は維持 */
            scale: '1', /* ここでscaleを1（拡大なし）にするのがクッキリの秘訣 */
            borderWidth: (2 * zoom) + 'px'
        });
    };

    /* 各パーツの物理サイズを底上げ（元サイズ × zoom） */
    rescale('#minimap', 60, 60, 10);
    rescale('.score-panel', 100, 40, 12);
    rescale('#leaderboard', 120, 150, 11);
    rescale('#mode-display', 200, 30, 14);

    /* 3. ボタンや入力欄もクッキリさせる */
    d.querySelectorAll('button, input, .modal-content').forEach(el => {
        el.style.fontSize = (16 * zoom) + 'px';
        el.style.padding = (8 * zoom) + 'px';
    });

    /* 4. Canvasのにじみ対策（レンダリングヒント） */
    const canvas = d.getElementById('gameCanvas');
    if(canvas) {
        canvas.style.imageRendering = 'pixelated'; /* 補完によるボヤけを防止 */
    }

    alert('【UI高精細化】適用！\n虫眼鏡拡大を廃止し、フォントそのものを巨大化しました。');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

このページへの個別リンクです。

RAW

書かれたコードへの直接のリンクです。

Packed

文字列が圧縮された書かれたコードへのリンクです。

Userscript

Greasemonkey 等で利用する場合の .user.js へのリンクです。

Loader

@require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

Metadata

コード中にコメントで @xxx と書かれたメタデータの JSON です。

画面高画質化

History