【解決済】設定を変更できるプラグインが複数ある場合

[しぇん]

導入しているプラグインの二つで画面サイズの変更ができるようなのですが
●Community_Basic
●YEP_CoreEngine
の二つを入れた状態で（Community_Basicが一番上に来るように入れています）
ゲーム画面のサイズを1120×630に変更したいと思い、試しにメニュー画面の背景画像（1120×630）を用意しました。

結果的に
Community_Basic はデフォルトサイズ（816×624）のまま
YEP_CoreEngineでサイズを1120×630にすると理想通りの画面に見えるのですが

試しにCommunity_Basicの方も1120×630サイズに変更すると、ゲームを開いているウィンドウ自体のサイズがゲーム画面（1120×630）よりも大きく表示され、画像のない部分が黒くなっています。



どうして同じ設定をしたのにこのようになるのかわからないので、
もしわかる方がいらっしゃればお教え頂きたいです。


複数のプラグインで設定を変更できるもの（フォントのサイズなど）でも同じにしているのに理想と違うことになるのが多々あったので…

[トリアコンタン]

こんにちは！

当該現象が発生する原因ですが「window.resizeBy」という関数による挙動です。
この関数はウィンドウのサイズを相対的に変えるもので、結論から言うとこの関数が複数プラグインから同一タイミングで実行されると、問題の現象が発生する可能性があります。

競合を回避するには、いずれかのプラグインに競合対策用のコードを追加する必要がありますが、ひとまず理想通りの画面で表示できているのであれば、このままでも実害はないかと思います。

複数のプラグインで設定を変更できるもの（フォントのサイズなど）でも同じにしているのに理想と違うことになるのが多々あったので…

なお、おそらく上記とは直接は関係ないかと思います。


ここからは少し技術的な話になります。
興味がありましたら参考にしていただければと思います。

画面サイズを変えるプラグインでは多くの場合、現在の画面サイズ（window.innerWidth等で取得できます）を基準に調整しています。
ですがこの値はwindow.resizeByの実行直後には反映されません。（当該関数の実行が非同期のため）
なので、複数のプラグインで同一タイミングで実行されると、実際の画面サイズがおかしくなってしまうケースがあります。

コード: 全て選択

console.log(window.innerWidth); // 元のサイズ
window.resizeBy(100, 0); // ウィンドウの横幅を100大きくする
console.log(window.innerWidth); // 元のサイズと変わってない
setTimeout(function() {
    console.log(window.innerWidth); // 時間が経てば元のサイズより100大きい値になり変更が反映される
}, 1000);

[しぇん]

トリアコンタンさん返答ありがとうございます！
原因もわからずに作業を進めるのはモヤモヤしていたので…お教えいただいてすっきりしました！

技術面のお話もしていただいてありがとうございます
今後プラグイン関連も触っていきたいのですごく参考になります
本当にありがとうございました！