画面高画質化

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

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

@@ -7,52 +7,48 @@
     const d=document, v=d.getElementById('gameCanvas'), g=d.getElementById('game-container');
     if(!v || !g) return;
 
-    /* 1. 解像度の設定（2.0 = 4倍密度） */
+    /* 1. 解像度の倍率（2.0 = 4倍の密度） */
     const dpr = 2.0; 
 
-    /* 2. 外枠（body）の設定：中身を中央に寄せる土台を作る */
-    Object.assign(d.body.style, {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'flex-start', /* 上端は固定して判定のズレを防ぐ */
-        backgroundColor: '#000',
-        margin: '0',
-        overflow: 'hidden'
-    });
-
-    /* 3. ゲームコンテナの設定 */
-    /* 左詰め基準を保ちつつ、高密度化して縮小 */
+    /* 2. UI（HTML要素）の「高密度化」 */
+    /* zoomで密度を上げつつ、scaleで見た目の大きさを元の100%に戻す */
     Object.assign(g.style, {
         zoom: dpr,
         transform: `scale(${1/dpr})`,
-        transformOrigin: 'top left',
-        position: 'relative', /* fixedから変更してflexに従わせる */
-        width: v.width + 'px',
-        height: v.height + 'px'
+        transformOrigin: 'top left', /* 左上を基準に縮小して位置を固定 */
+        width: (100 / (1/dpr)) + '%', /* 縮小分を計算して幅を維持 */
+        height: (100 / (1/dpr)) + '%',
+        position: 'absolute',
+        top: '0',
+        left: '100'
     });
 
-    /* 4. Canvas（戦場）の高密度化 */
+    /* 3. Canvas（戦場）の「高密度化」 */
     if(!window._hiResApplied){
         const w = v.width, h = v.height;
+        /* 物理的なドット数を増やす */
         v.width = w * dpr;
         v.height = h * dpr;
+        /* 見た目のサイズを固定 */
         v.style.width = w + 'px';
         v.style.height = h + 'px';
         v.getContext('2d').scale(dpr, dpr);
         window._hiResApplied = true;
     }
 
-    /* 5. 仕上げのボケ防止 */
+    /* 4. 司令官の「ボケ防止ヒント」も組み込んで仕上げ */
     const style = d.createElement('style');
     style.innerHTML = `
         #game-container * {
             -webkit-font-smoothing: antialiased;
-            transform: translateZ(0);
+            transform: translateZ(0); /* GPUレンダリング強制 */
             backface-visibility: hidden;
         }
-        #gameCanvas { image-rendering: -webkit-optimize-contrast; }
+        #gameCanvas {
+            image-rendering: -webkit-optimize-contrast;
+        }
     `;
     d.head.appendChild(style);
 
-    alert('【高画質化：中央配置・判定維持版】\nクッキリ表示のまま、画面中央へ整列しました！');
+    alert('【高画質化：レティーナモード】\nサイズを維持したまま、解像度を凝縮しました！');
 })();

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

    /* 1. 解像度の倍率（2.0 = 4倍の密度） */
    const dpr = 2.0; 

    /* 2. UI（HTML要素）の「高密度化」 */
    /* zoomで密度を上げつつ、scaleで見た目の大きさを元の100%に戻す */
    Object.assign(g.style, {
        zoom: dpr,
        transform: `scale(${1/dpr})`,
        transformOrigin: 'top left', /* 左上を基準に縮小して位置を固定 */
        width: (100 / (1/dpr)) + '%', /* 縮小分を計算して幅を維持 */
        height: (100 / (1/dpr)) + '%',
        position: 'absolute',
        top: '0',
        left: '100'
    });

    /* 3. Canvas（戦場）の「高密度化」 */
    if(!window._hiResApplied){
        const w = v.width, h = v.height;
        /* 物理的なドット数を増やす */
        v.width = w * dpr;
        v.height = h * dpr;
        /* 見た目のサイズを固定 */
        v.style.width = w + 'px';
        v.style.height = h + 'px';
        v.getContext('2d').scale(dpr, dpr);
        window._hiResApplied = true;
    }

    /* 4. 司令官の「ボケ防止ヒント」も組み込んで仕上げ */
    const style = d.createElement('style');
    style.innerHTML = `
        #game-container * {
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0); /* GPUレンダリング強制 */
            backface-visibility: hidden;
        }
        #gameCanvas {
            image-rendering: -webkit-optimize-contrast;
        }
    `;
    d.head.appendChild(style);

    alert('【高画質化：レティーナモード】\nサイズを維持したまま、解像度を凝縮しました！');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History