画面高画質化

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

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

@@ -9,6 +9,7 @@
 
     const dpr = 2.0; 
 
+    /* 1. Canvas（戦場）の高密度化 */
     if(!window._hiResApplied){
         const w = v.width, h = v.height;
         v.width = w * dpr;
@@ -19,18 +20,25 @@
         window._hiResApplied = true;
     }
 
+    /* 2. ブラウザの自動計算機能（margin: auto）を使って中央に寄せる */
     Object.assign(g.style, {
         zoom: dpr,
         transform: `scale(${1/dpr})`,
-        transformOrigin: 'top left', 
-        position: 'absolute',
+        transformOrigin: 'top center', /* 起点を中央上に変更 */
+        position: 'relative', /* absoluteから変更してmarginを有効化 */
         top: '0',
-        /* zoom(dpr)がかかっているため、分母にdprを掛けて計算を補正します */
-        left: `calc((100vw * ${1/dpr} - ${v.style.width}) / 2)`,
-        width: (100 * dpr) + '%', 
-        height: (100 * dpr) + '%'
+        left: '0',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        width: v.style.width, /* 幅をCanvasと一致させて余白を計算させる */
+        height: 'auto'
     });
 
+    /* 全体背景を黒にして、ズレを目立たなくする */
+    d.body.style.backgroundColor = '#000';
+    d.body.style.margin = '0';
+    d.body.style.overflowX = 'hidden';
+
     const style = d.createElement('style');
     style.innerHTML = `
         #game-container * {
@@ -41,5 +49,5 @@
     `;
     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;

    const dpr = 2.0; 

    /* 1. 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;
    }

    /* 2. ブラウザの自動計算機能（margin: auto）を使って中央に寄せる */
    Object.assign(g.style, {
        zoom: dpr,
        transform: `scale(${1/dpr})`,
        transformOrigin: 'top center', /* 起点を中央上に変更 */
        position: 'relative', /* absoluteから変更してmarginを有効化 */
        top: '0',
        left: '0',
        marginLeft: 'auto',
        marginRight: 'auto',
        width: v.style.width, /* 幅をCanvasと一致させて余白を計算させる */
        height: 'auto'
    });

    /* 全体背景を黒にして、ズレを目立たなくする */
    d.body.style.backgroundColor = '#000';
    d.body.style.margin = '0';
    d.body.style.overflowX = 'hidden';

    const style = d.createElement('style');
    style.innerHTML = `
        #game-container * {
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0); 
            backface-visibility: hidden;
        }
    `;
    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