画面高画質化

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

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

@@ -5,41 +5,43 @@
  */
 
 javascript:(function(){
-    const d=document;
-    /* 1. 拡大率の定義（PCなら2.0〜3.0が適正） */
-    const zoom = 2.5;
+    const d = document;
+    /* 1. 全体的なUIのクッキリ度を上げる（2倍程度が安全） */
+    const UI_ZOOM = 2;
+
+    /* 2. ゲームコンテナ全体の文字レンダリングを最適化 */
+    const container = d.getElementById('game-container');
+    if(container) {
+        Object.assign(container.style, {
+            webkitFontSmoothing: 'antialiased',
+            mozOsxFontSmoothing: 'grayscale',
+            textRendering: 'optimizeLegibility'
+        });
+    }
 
-    /* 2. UI要素を一括で「本物のサイズ」へ書き換える */
-    const rescale = (selector, baseWidth, baseHeight, baseFont) => {
+    /* 3. 各UI要素の「解像度」だけを上げる（zoomを使用） */
+    /* zoomはscaleと違い、ブラウザがその倍率で文字を再描画します */
+    const fixUI = (selector) => {
         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: UI_ZOOM,
+            /* zoomで大きくなった分、CSSの見た目上のサイズを半分にして相殺する */
+            width: (parseFloat(getComputedStyle(el).width) / UI_ZOOM) + 'px',
+            transformOrigin: 'center center'
         });
     };
 
-    /* 各パーツの物理サイズを底上げ（元サイズ × 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';
-    });
+    /* 主要なUIに適用 */
+    ['#minimap', '.score-panel', '#leaderboard', '#mode-display'].forEach(fixUI);
 
-    /* 4. Canvasのにじみ対策（レンダリングヒント） */
+    /* 4. Canvas（ゲーム画面）のエッジを鋭くする */
     const canvas = d.getElementById('gameCanvas');
     if(canvas) {
-        canvas.style.imageRendering = 'pixelated'; /* 補完によるボヤけを防止 */
+        /* アンチエイリアスを抑制し、PCモニターでパキッとさせる */
+        canvas.style.imageRendering = '-webkit-optimize-contrast';
+        canvas.style.imageRendering = 'crisp-edges';
     }
 
-    alert('【UI高精細化】適用！\n虫眼鏡拡大を廃止し、フォントそのものを巨大化しました。');
+    alert('【UI高精細化・安定版】\nレイアウトを維持したまま、再描画密度を上げました。');
 })();

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

javascript:(function(){
    const d = document;
    /* 1. 全体的なUIのクッキリ度を上げる（2倍程度が安全） */
    const UI_ZOOM = 2;

    /* 2. ゲームコンテナ全体の文字レンダリングを最適化 */
    const container = d.getElementById('game-container');
    if(container) {
        Object.assign(container.style, {
            webkitFontSmoothing: 'antialiased',
            mozOsxFontSmoothing: 'grayscale',
            textRendering: 'optimizeLegibility'
        });
    }

    /* 3. 各UI要素の「解像度」だけを上げる（zoomを使用） */
    /* zoomはscaleと違い、ブラウザがその倍率で文字を再描画します */
    const fixUI = (selector) => {
        const el = d.querySelector(selector);
        if(!el) return;
        Object.assign(el.style, {
            zoom: UI_ZOOM,
            /* zoomで大きくなった分、CSSの見た目上のサイズを半分にして相殺する */
            width: (parseFloat(getComputedStyle(el).width) / UI_ZOOM) + 'px',
            transformOrigin: 'center center'
        });
    };

    /* 主要なUIに適用 */
    ['#minimap', '.score-panel', '#leaderboard', '#mode-display'].forEach(fixUI);

    /* 4. Canvas（ゲーム画面）のエッジを鋭くする */
    const canvas = d.getElementById('gameCanvas');
    if(canvas) {
        /* アンチエイリアスを抑制し、PCモニターでパキッとさせる */
        canvas.style.imageRendering = '-webkit-optimize-contrast';
        canvas.style.imageRendering = 'crisp-edges';
    }

    alert('【UI高精細化・安定版】\nレイアウトを維持したまま、再描画密度を上げました。');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History