画面高画質化

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

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

@@ -5,74 +5,41 @@
  */
 
 javascript:(function(){
-    const d=document, g=d.getElementById('game-container'), v=d.getElementById('gameCanvas');
-    if(!g||!v)return;
+    const d=document, v=d.getElementById('gameCanvas');
+    if(!v) return;
 
-    /* 1. 全体レイアウト（回転・比率維持） */
-    const w=v.width, h=v.height, s=Math.min(window.innerWidth/h, window.innerHeight/w)*0.96;
-    Object.assign(g.style, {
-        position:'fixed', top:'50%', left:'50%', width:w+'px', height:h+'px',
-        maxWidth:'none', maxHeight:'none', zIndex:'9999',
-        transform: `translate(-50%, -50%) rotate(90deg) scale(${s})`,
-        transformOrigin: 'center'
-    });
+    /* 1. Canvas（戦場と文字）を高解像度化 */
+    const dpr = 2; /* 2倍の密度で描画 */
+    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. 司令官が見つけた「ボケ防止」の魔法をUIに適用 */
+    /* 2. 司令官提案の「GPUレンダリング」を全UIに適用してボケを消す */
     const style = d.createElement('style');
     style.innerHTML = `
         #game-container * {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             text-rendering: optimizeLegibility;
-            /* GPUを使って描画をシャープにする司令官のコード */
-            transform-style: preserve-3d;
+            /* GPUを強制的に使わせてクッキリさせる魔法 */
+            transform: translateZ(0);
             backface-visibility: hidden;
             image-rendering: -webkit-optimize-contrast;
         }
-        /* UI要素を逆回転させつつ、ボケを抑制 */
-        .ui-element-custom {
-            position: absolute !important;
-            transform: rotate(-90deg) translateZ(0); /* ここでGPUを叩く */
-            transform-origin: center center;
+        /* Canvas自体のボケ（バイリニア補間）を防止 */
+        #gameCanvas {
+            image-rendering: crisp-edges;
+            image-rendering: pixelated;
         }
     `;
     d.head.appendChild(style);
 
-    /* 3. Canvas（戦場）の高解像度化（2倍） */
-    const dpr = 2;
-    if(!window._hiResApplied){
-        v.width = w * dpr;
-        v.height = h * dpr;
-        v.getContext('2d').scale(dpr, dpr);
-        window._hiResApplied = true;
-    }
-
-    /* 4. 各UIを逆回転して配置（見た目上の右上へ） */
-    const r=(id,st)=> {
-        const e=d.getElementById(id)||d.querySelector(id);
-        if(e){ e.classList.add('ui-element-custom'); Object.assign(e.style, st); }
-    };
-    r('minimap', {width:'130px',height:'130px',top:'20px',left:'20px'});
-    r('.score-panel', {top:'20px',left:'160px',scale:'0.8'});
-    r('leaderboard', {top:'20px',left:'300px',scale:'0.8'});
-    r('mode-display', {top:'50%',left:'15px',width:h+'px',transform:'translate(-50%,0) rotate(-90deg) translateZ(0)'});
-
-    /* 5. 名前水平維持 & 操作補正 & ブースト判定（これまでの成果を統合） */
-    if(!window._hooked){
-        window._hooked=true;
-        /* 操作補正 */
-        const _o=window.sendInput; window.sendInput=()=>{const x=inputState.dx,y=inputState.dy; inputState.dx=y; inputState.dy=-x; _o(); inputState.dx=x; inputState.dy=y;};
-        /* 名前水平 */
-        const _f=CanvasRenderingContext2D.prototype.fillText;
-        CanvasRenderingContext2D.prototype.fillText=function(t,x,y,m){
-            if(Math.abs(x)<45&&Math.abs(y)<45&&!t.includes('%')){this.save();this.rotate(-Math.PI/2);_f.call(this,t,-y,x,m);this.restore();}
-            else _f.apply(this,arguments);
-        };
-        /* 画面下タップでブースト */
-        v.addEventListener('mousedown',e=>{if(e.clientY>window.innerHeight*0.7)triggerBoost();},true);
-    }
-
-    d.body.style.backgroundColor='#000';
-    window.removeEventListener('resize', window.resize);
-    alert('【統合フルスペックパッチ】\n回転・高解像度・ボケ防止をすべて適用しました！');
+    alert('【高画質化パッチ：Single】\n・Canvas内部解像度を2倍に向上\n・UIのGPUレンダリングを有効化しました。');
 })();

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

javascript:(function(){
    const d=document, v=d.getElementById('gameCanvas');
    if(!v) return;

    /* 1. Canvas（戦場と文字）を高解像度化 */
    const dpr = 2; /* 2倍の密度で描画 */
    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. 司令官提案の「GPUレンダリング」を全UIに適用してボケを消す */
    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;
        }
    `;
    d.head.appendChild(style);

    alert('【高画質化パッチ：Single】\n・Canvas内部解像度を2倍に向上\n・UIのGPUレンダリングを有効化しました。');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History