画面高画質化

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

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

@@ -5,43 +5,74 @@
  */
 
 javascript:(function(){
-    const d = document;
-    /* 1. 全体的なUIのクッキリ度を上げる（2倍程度が安全） */
-    const UI_ZOOM = 2;
-
-    /* 2. ゲームコンテナ全体の文字レンダリングを最適化 */
-    const container = d.getElementById('game-container');
-    if(container) {
-        Object.assign(container.style, {
-            webkitFontSmoothing: 'antialiased',
-            mozOsxFontSmoothing: 'grayscale',
-            textRendering: 'optimizeLegibility'
-        });
+    const d=document, g=d.getElementById('game-container'), v=d.getElementById('gameCanvas');
+    if(!g||!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'
+    });
+
+    /* 2. 司令官が見つけた「ボケ防止」の魔法を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;
+            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;
+        }
+    `;
+    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;
     }
 
-    /* 3. 各UI要素の「解像度」だけを上げる（zoomを使用） */
-    /* zoomはscaleと違い、ブラウザがその倍率で文字を再描画します */
-    const fixUI = (selector) => {
-        const el = d.querySelector(selector);
-        if(!el) return;
-        Object.assign(el.style, {
-            zoom: UI_ZOOM,
-            /* zoomで大きくなった分、CSSの見た目上のサイズを半分にして相殺する */
-            width: (parseFloat(getComputedStyle(el).width) / UI_ZOOM) + 'px',
-            transformOrigin: 'center center'
-        });
+    /* 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); }
     };
-
-    /* 主要なUIに適用 */
-    ['#minimap', '.score-panel', '#leaderboard', '#mode-display'].forEach(fixUI);
-
-    /* 4. Canvas（ゲーム画面）のエッジを鋭くする */
-    const canvas = d.getElementById('gameCanvas');
-    if(canvas) {
-        /* アンチエイリアスを抑制し、PCモニターでパキッとさせる */
-        canvas.style.imageRendering = '-webkit-optimize-contrast';
-        canvas.style.imageRendering = 'crisp-edges';
+    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);
     }
 
-    alert('【UI高精細化・安定版】\nレイアウトを維持したまま、再描画密度を上げました。');
+    d.body.style.backgroundColor='#000';
+    window.removeEventListener('resize', window.resize);
+    alert('【統合フルスペックパッチ】\n回転・高解像度・ボケ防止をすべて適用しました！');
 })();

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

javascript:(function(){
    const d=document, g=d.getElementById('game-container'), v=d.getElementById('gameCanvas');
    if(!g||!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'
    });

    /* 2. 司令官が見つけた「ボケ防止」の魔法を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;
            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;
        }
    `;
    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回転・高解像度・ボケ防止をすべて適用しました！');
})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History