画面高画質化

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

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

@@ -3,43 +3,48 @@
  * @description ゲーム画面を高画質にし、PCなど大画面で遊んだ際のぼやけを小さくする
  * @private
  */
-
 javascript:(function(){
-    const d=document, v=d.getElementById('gameCanvas');
-    if(!v) return;
+    const d=document, v=d.getElementById('gameCanvas'), g=d.getElementById('game-container');
+    if(!v || !g) return;
+
+    /* 1. にじみの原因「scale」を完全に除去し、ブラウザの再描画「zoom」に切り替える */
+    /* 2.0以上の数値にするとPCでもクッキリします */
+    const zoomLevel = 2.0; 
+
+    /* コンテナの変形をリセットし、zoomで巨大化させる */
+    Object.assign(g.style, {
+        transform: 'none',
+        zoom: zoomLevel,
+        margin: '0 auto',
+        display: 'block'
+    });
 
-    /* 1. Canvas（戦場と文字）を高解像度化 */
-    const dpr = 2; /* 2倍の密度で描画 */
+    /* 2. Canvas自体の解像度もzoomに合わせて倍増させる */
+    const dpr = window.devicePixelRatio || 1;
     if(!window._hiResApplied){
         const w = v.width, h = v.height;
-        v.width = w * dpr;
+        v.width = w * zoomLevel * dpr;
         v.height = h * dpr;
-        /* 見た目のサイズは維持したまま、中身のドットを細かくする */
         v.style.width = w + 'px';
         v.style.height = h + 'px';
-        v.getContext('2d').scale(dpr, dpr);
+        v.getContext('2d').scale(zoomLevel * dpr, dpr);
         window._hiResApplied = true;
     }
 
-    /* 2. 司令官提案の「GPUレンダリング」を全UIに適用してボケを消す */
+    /* 3. 文字のレンダリング設定を上書き */
     const style = d.createElement('style');
     style.innerHTML = `
         #game-container * {
             -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
             text-rendering: optimizeLegibility;
-            /* GPUを強制的に使わせてクッキリさせる魔法 */
-            transform: translateZ(0);
-            backface-visibility: hidden;
+            /* 小さなサイズで描画されるのを防ぐ */
             image-rendering: -webkit-optimize-contrast;
         }
-        /* Canvas自体のボケ（バイリニア補間）を防止 */
         #gameCanvas {
-            image-rendering: crisp-edges;
-            image-rendering: pixelated;
+            image-rendering: auto; /* zoom時はautoの方が滑らかかつクッキリします */
         }
     `;
     d.head.appendChild(style);
 
-    alert('【高画質化パッチ：Single】\n・Canvas内部解像度を2倍に向上\n・UIのGPUレンダリングを有効化しました。');
+    alert('【高画質化：再描画モード】\n拡大（scale）を廃止し、再描画（zoom）を適用しました。');
 })();

/*
 * @title 画面高画質化
 * @description ゲーム画面を高画質にし、PCなど大画面で遊んだ際のぼやけを小さくする
 * @private
 */
javascript:(function(){
    const d=document, v=d.getElementById('gameCanvas'), g=d.getElementById('game-container');
    if(!v || !g) return;

    /* 1. にじみの原因「scale」を完全に除去し、ブラウザの再描画「zoom」に切り替える */
    /* 2.0以上の数値にするとPCでもクッキリします */
    const zoomLevel = 2.0; 

    /* コンテナの変形をリセットし、zoomで巨大化させる */
    Object.assign(g.style, {
        transform: 'none',
        zoom: zoomLevel,
        margin: '0 auto',
        display: 'block'
    });

    /* 2. Canvas自体の解像度もzoomに合わせて倍増させる */
    const dpr = window.devicePixelRatio || 1;
    if(!window._hiResApplied){
        const w = v.width, h = v.height;
        v.width = w * zoomLevel * dpr;
        v.height = h * dpr;
        v.style.width = w + 'px';
        v.style.height = h + 'px';
        v.getContext('2d').scale(zoomLevel * dpr, dpr);
        window._hiResApplied = true;
    }

    /* 3. 文字のレンダリング設定を上書き */
    const style = d.createElement('style');
    style.innerHTML = `
        #game-container * {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            /* 小さなサイズで描画されるのを防ぐ */
            image-rendering: -webkit-optimize-contrast;
        }
        #gameCanvas {
            image-rendering: auto; /* zoom時はautoの方が滑らかかつクッキリします */
        }
    `;
    d.head.appendChild(style);

    alert('【高画質化：再描画モード】\n拡大（scale）を廃止し、再描画（zoom）を適用しました。');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History