【解決済み】画面サイズの変更について

[月宮りお]

お知恵をお借りしたく質問に参りました。

スマホでの操作性をよくするため仮想パッドを導入することにしました。画面の幅を816から1440に変更し、仮想パッドのプラグインを入れました。さらに、左右に黒いピクチャを表示し、クリック/タップした際に中身のないイベントが起動するようにしました。(つまり触れても何も起こらないようにしました)

ここまでは問題なく導入できて動作も問題ないのですが、環境によってはこの仮想パッドが邪魔だと思う人もいるかも知れないと考え、設定でＯＦＦにできるようにすることを検討しています。仮想パッドを消すことは何とかできそうです。左右の黒いピクチャを消すことも勿論できそうです。あとは画面の幅を816に戻すことができればゴールなのですが、そこで行き詰っています。色々調べて、

Graphics.resize(816, 624);

これで画面の幅を変更できそうだと分かったのですが、上の画像の状態からこれを実行するとこう(↓)なりました。

画面が細くなって主人公が立っている位置が右へ移動して、自分でもちょっと何が起こったのかよく分からなかったので、左右の黒ピクチャと仮想パッドを非表示にして

こういう(↑)状態で試してみました。Graphics.resize(816, 624);を実行すると、

こう(↑)なりました。つまり、幅は1440のまま変わってくれず、左右に黒い部分が追加され、中央の「見えている範囲の幅」だけが816になっていたのです。さらに左側に追加された黒帯の分だけマップ(主人公含む)が右へ移動しています。

元々の幅816に戻って欲しいのですがどうすればよいのでしょう？

[basu]

こんにちは。
画面サイズの変更についてですが、恐らくGraphicsの再設定だけではなくWindowやBoxSizeの再設定も必要だと思います。

画面のサイズ設定は以下のScene_Bootで行われています。

コード: 全て選択

Scene_Boot.prototype.resizeScreen = function() {
    const screenWidth = $dataSystem.advanced.screenWidth;
    const screenHeight = $dataSystem.advanced.screenHeight;
    Graphics.resize(screenWidth, screenHeight);
    Graphics.defaultScale = this.screenScale();
    this.adjustBoxSize();
    this.adjustWindow();
};

Scene_Boot.prototype.adjustBoxSize = function() {
    const uiAreaWidth = $dataSystem.advanced.uiAreaWidth;
    const uiAreaHeight = $dataSystem.advanced.uiAreaHeight;
    const boxMargin = 4;
    Graphics.boxWidth = uiAreaWidth - boxMargin * 2;
    Graphics.boxHeight = uiAreaHeight - boxMargin * 2;
};

Scene_Boot.prototype.adjustWindow = function() {
    if (Utils.isNwjs()) {
        const scale = this.screenScale();
        const xDelta = Graphics.width * scale - window.innerWidth;
        const yDelta = Graphics.height * scale - window.innerHeight;
        window.moveBy(-xDelta / 2, -yDelta / 2);
        window.resizeBy(xDelta, yDelta);
    }
};

上記のコードを参考に画面サイズを変更するスクリプトを作成してみました。
下記のスクリプトをイベントに設定をすれば画面のサイズを再設定できますが、強引にサイズを変更するため場所移動などでマップを再描画しないとメニューボタンが消えたり、キャラの位置が中央からずれたりします。
他にも不具合が生じる可能性があります。(戦闘やショップなど)

コード: 全て選択

const width = 816;
const height = 624;
Graphics.resize(width, height);
const boxMargin = 4;
Graphics.boxWidth = width - boxMargin * 2;
Graphics.boxHeight = height - boxMargin * 2;
const xDelta = Graphics.width * Graphics.defaultScale - window.innerWidth;
const yDelta = Graphics.height * Graphics.defaultScale - window.innerHeight;
window.moveBy(-xDelta / 2, -yDelta / 2);
window.resizeBy(xDelta, yDelta);

■イベント内容(※下記のイベントは一例です)
画面のフェードアウト
スクリプト
場所移動(現在地)
画面のフェードイン

強引にサイズを変えているので上記のコードを利用する場合は自己責任でお願いします。

よろしくお願いします。

[月宮りお]

ありがとうございます！
無事に幅を縮めたり伸ばしたりできるようになりました。
キャラの位置がずれるのは、同じ位置に場所移動させて解消してみます。
行き詰っていたので本当に助かりました。ありがとうございます！