画面高画質化

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

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

/*
 * @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;

})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

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

RAW

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

Packed

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

Userscript

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

Loader

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

Metadata

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

画面高画質化

History