画面高画質化

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

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

@@ -4,50 +4,37 @@
  * @private
  */
 javascript:(function(){
-    const d=document, v=d.getElementById('gameCanvas'), g=d.getElementById('game-container');
-    if(!v || !g) return;
+    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 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ブラウザの自動レイアウトで中央配置を最適化しました。');
+    alert('【高解像度化パッチ】適用完了！\n内部解像度を' + dpr + '倍に引き上げました。\n文字のぼやけが解消されているはずです。');
 })();

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

    alert('【高解像度化パッチ】適用完了！\n内部解像度を' + dpr + '倍に引き上げました。\n文字のぼやけが解消されているはずです。');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History