タイルサイズに合わせて画面サイズを最適化するプラグイン

WIP_H2A_TileOptimizedScreen.js

/*:ja
 * @plugindesc [WIP] タイルサイズに合わせて画面サイズを最適化
 *
 * @target MZ
 * @author Had2Apps
 * @url https://github.com/katai5plate/RPGMakerPlugins
 *
 * @param _scaleWidth
 * @text 横拡大倍率
 * @type number
 * @default 2
 * @param _scaleHeight
 * @text 縦拡大倍率
 * @type number
 * @default 2
 *
 * @help
 * [使い方]
 * 1. システム2 の 画面の幅/高さ を「1ドット1ピクセルの拡大前のゲーム画面サイズ」になるよう設定する
 * 2. プラグインパラメーターで拡大倍率を指定する(指定しない場合は自動判別)
 *
 * [既知の問題]
 * - メニュー表示がバグる
 *
 * [未確認]
 * - 戦闘などマップとタイトル以外の画面の挙動
 *
 * [注意]
 * このプラグインを使用するとシステム2で設定したUIエリアの幅/高さが反映されなくなります。
 *
 * Copyright (c) 2022 Had2Apps
 * This software is released under the MIT License.
 *
 * Version: v0.5.0
 * RPG Maker MZ Version: v1.5.0
 */
(() => {
  const pluginName = document.currentScript.src.match(/^.*\/(.*).js$/)[1];
  const { _scaleWidth, _scaleHeight } = PluginManager.parameters(pluginName);

  // 1ドット1ピクセルの拡大前のゲーム画面サイズ
  const originalWidth = () =>
    $dataSystem ? $dataSystem.advanced.screenWidth : 0;
  const originalHeight = () =>
    $dataSystem ? $dataSystem.advanced.screenHeight : 0;
  // マップのズーム倍率
  const zoomWidth = () => ($gameMap ? 48 / $gameMap.tileWidth() : 0);
  const zoomHeight = () => ($gameMap ? 48 / $gameMap.tileHeight() : 0);
  // 拡大率
  const scaleWidth = () => +_scaleWidth || zoomWidth();
  const scaleHeight = () => +_scaleHeight || zoomHeight();
  // 拡大後のゲームウィンドウのサイズ
  const windowWidth = () => originalWidth() * scaleWidth();
  const windowHeight = () => originalHeight() * scaleHeight();
  // UIのズーム倍率
  const uiZoomWidth = () => windowWidth() / originalWidth();
  const uiZoomHeight = () => windowHeight() / originalHeight();

  // スクリーンを強制リサイズ
  Scene_Boot.prototype.resizeScreen = function () {
    Graphics.resize(originalWidth(), originalHeight()); // 変更
    this.adjustBoxSize();
    this.adjustWindow();
    // ぼやけ対策
    Graphics.app.view.style.imageRendering = "pixelated";
  };

  // キャンバスサイズを変更
  const centerElement = Graphics._centerElement;
  Graphics._centerElement = function (element) {
    centerElement.apply(this, arguments);
    try {
      element.style.width = windowWidth() + "px";
      element.style.height = windowHeight() + "px";
    } catch (error) {}
  };

  // UIを強制リサイズ
  Scene_Boot.prototype.adjustBoxSize = function () {
    const boxMargin = 4;
    Graphics.boxWidth = windowWidth() - boxMargin * 2;
    Graphics.boxHeight = windowHeight() - boxMargin * 2;
  };

  // タッチ可能範囲を反映
  Graphics.isInsideCanvas = function (x, y) {
    return x >= 0 && x < windowWidth() && y >= 0 && y < windowHeight();
  };

  // this._realScale による判定を除去しタッチ座標を修正
  Graphics.pageToCanvasX = function (x) {
    if (this._canvas) {
      const left = this._canvas.offsetLeft;
      return Math.round(x - left); // this._realScale で割らない
    } else {
      return 0;
    }
  };
  Graphics.pageToCanvasY = function (y) {
    if (this._canvas) {
      const top = this._canvas.offsetTop;
      return Math.round(y - top); // this._realScale で割らない
    } else {
      return 0;
    }
  };

  // NW.jsのリサイズ
  Scene_Boot.prototype.adjustWindow = function () {
    if (Utils.isNwjs()) {
      const xDelta = windowWidth() - window.innerWidth; // 変更
      const yDelta = windowHeight() - window.innerHeight; // 変更
      window.moveBy(-xDelta / 2, -yDelta / 2);
      window.resizeBy(xDelta, yDelta);
    }
  };

  // ウィンドウのスケールを変更
  const initWindowLayer = WindowLayer.prototype.initialize;
  WindowLayer.prototype.initialize = function () {
    initWindowLayer.apply(this);
    this.scale.set(1 / uiZoomWidth(), 1 / uiZoomHeight());
  };

  // ウィンドウの左上座標を調整
  Scene_Base.prototype.createWindowLayer = function () {
    this._windowLayer = new WindowLayer();
    const margin = 4;
    this._windowLayer.x = margin / uiZoomWidth();
    this._windowLayer.y = margin / uiZoomHeight();
    this.addChild(this._windowLayer);
  };

  // タッチ移動の位置を修正
  Game_Map.prototype.canvasToMapX = function (x) {
    const tileWidth = this.tileWidth() * uiZoomWidth(); // ここを変更
    const originX = this._displayX * tileWidth;
    const mapX = Math.floor((originX + x) / tileWidth);
    return this.roundX(mapX);
  };
  Game_Map.prototype.canvasToMapY = function (y) {
    const tileHeight = this.tileHeight() * uiZoomHeight(); // ここを変更
    const originY = this._displayY * tileHeight;
    const mapY = Math.floor((originY + y) / tileHeight);
    return this.roundY(mapY);
  };

  // タイトルテキストを縮小
  Scene_Title.prototype.drawGameTitle = function () {
    const x = 20;
    const y = Graphics.height / 4;
    const maxWidth = Graphics.width - x * 2;
    const text = $dataSystem.gameTitle;
    const bitmap = this._gameTitleSprite.bitmap;
    bitmap.fontFace = $gameSystem.mainFontFace();
    bitmap.outlineColor = "black";
    bitmap.outlineWidth = 8;
    bitmap.fontSize = 72 / zoomWidth(); // ここだけ変更
    bitmap.drawText(text, x, y, maxWidth, 48, "center");
  };

  // タイルが小さいと歩行グラフィックが上にズレすぎるので修正
  const shiftY = Game_CharacterBase.prototype.shiftY;
  Game_CharacterBase.prototype.shiftY = function () {
    return shiftY.apply(this) / zoomHeight();
  };

  // 640px 以下になるとウィンドウがバグるので修正
  Graphics._updateErrorPrinter = function () {
    const width = this.width * this._realScale;
    const height = 100 * this._realScale;
    this._errorPrinter.style.width = width + "px";
    this._errorPrinter.style.height = height + "px";
  };
})();