【解決】PCでのゲーム表示サイズをブラウザサイズ依存にしたい

[論理イヌ]

ゲーム画面をWebページに埋め込みたいため、横816・縦612で作ったゲームを、iframeを使って縦横600サイズで表示させたいと考えています。

スマホで表示するとブラウザサイズに合わせてゲーム表示サイズを表示してくれますが、
PCで表示するとゲーム表示サイズが横816・縦612に固定され、ブラウザサイズを拡大・縮小してもゲーム表示サイズが変わってくれません。

PCの場合でも、スマホと同じようにブラウザサイズに依存した大きさにしたいと考えています。

ChromeのデベロッパーツールでUserAgentをスマホにすると理想の表示になります。
PC表示であってもUserAgentをスマホにすることってできるんでしょうか？
（core.jpあたりをいじる？）

素人なりに、jsのresizeイベントでリサイズするのはどうかと思ってやってみたのですが、id="GameCanvas"など指定してサイズ変更をやってみましたがうまくいきませんでした。

アドバイスいただけますと嬉しいです。よろしくお願いします。

[論理イヌ]

質問した論理イヌです。
現在の調査状況を共有します。

テストプレイ時のNW.jsはブラウザサイズ依存になっているので、そのあたりを調べたところ
rpg_core.jsにある「requestFullScreen」が実行されると、希望のゲーム画面になるんじゃないかと思いました。
（F4でフルスクリーンになるアレです）

しかし肝心の、「requestFullScreen」を実行する方法がわからず詰んでいます……。
（そもそもこの関数を実行すれば解決するのか不明）

引き続き調査しますが、何かお気づきの点がありましたらアドバイスいただけると嬉しいです。

ーーーー
解決しました。のちほど、解決方法を載せます。（2023/8/15）

[論理イヌ]

解決しました。

ブラウザサイズ依存になっているゲームのコードをコピペしただけですので、正解かわかっていません。
また、rpg_core.jsをいじっているので、場合によってはゲーム自体起動できなくなるかもしれないので、試す場合はバックアップを必ず取ってください。

rpg_core.js v1.6.2

①
＜修正前＞

コード: 全て選択

/**
 * @static
 * @method _defaultStretchMode
 * @private
 */
Graphics._defaultStretchMode = function() {
    return Utils.isNwjs() || Utils.isMobileDevice();
};

＜修正後＞

コード: 全て選択

/**
 * @static
 * @method _defaultStretchMode
 * @private
 */
Graphics._defaultStretchMode = function() {
    return true;
};

②
＜修正前＞

コード: 全て選択

/**
 * @static
 * @method _switchFullScreen
 * @private
 */
Graphics._switchFullScreen = function() {
    if (this._isFullScreen()) {
        this._requestFullScreen();
    } else {
        this._cancelFullScreen();
    }
};

＜修正後＞

コード: 全て選択

/**
 * @static
 * @method _switchFullScreen
 * @private
 */
Graphics._switchFullScreen = function() {
    if (this._isFullScreen()) {
        this._cancelFullScreen();
    } else {
        this._requestFullScreen();
    }
};

③
＜修正前＞

コード: 全て選択

/**
 * @static
 * @method _isFullScreen
 * @return {Boolean}
 * @private
 */
Graphics._isFullScreen = function() {
    return ((document.fullScreenElement && document.fullScreenElement !== null) ||
            (!document.mozFullScreen && !document.webkitFullscreenElement &&
             !document.msFullscreenElement));
};

＜修正後＞

コード: 全て選択

/**
 * @static
 * @method _isFullScreen
 * @return {Boolean}
 * @private
 */
Graphics._isFullScreen = function() {
    return document.fullScreenElement ||
           document.mozFullScreen || 
           document.webkitFullscreenElement ||
           document.msFullscreenElement;
};