ページ 1 ／ 1
【解決】スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 02:59
by くも000
スマホを横向きにしてゲームを起動すると画面の上下に謎の余白があり、
ゲーム画面が少し小さく表示されます。
縦向きの際は左右に余白は無く、ぴったり表示されています。
MVでは横向きにすると上下に余白が無く
ちゃんと全画面表示になるので同じようにしたいのですが、可能でしょうか？
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 13:29
by ムノクラ
くも000 さんが書きました:スマホを横向きにしてゲームを起動すると画面の上下に謎の余白があり、
ゲーム画面が少し小さく表示されます。
縦向きの際は左右に余白は無く、ぴったり表示されています。
MVでは横向きにすると上下に余白が無く
ちゃんと全画面表示になるので同じようにしたいのですが、可能でしょうか？
IMG_6551-min.PNG
IMG_6550-min.PNG
自分も再現されましたが、縦向きでも左右に余白がありました。
Windows10 Crome では余白は両者ありませんでした。
再現環境
ゲームアツマールへアップロード
https://game.nicovideo.jp/atsumaru/
解像度：デフォルト（816x624）
iPhone6S
iOS 14.3
Safari
Chrome
RPGツクールMV v1.6.2
縦横とも余白なし
RPGツクールMZ v1.1.1
縦横とも余白あり
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 15:56
by くも000
ムノクラ様
再現テストありがとうございます。
縦にも余白出るのですね。
上下左右に余白が出るようになっているのでしょうか……。
縦向きで余白の出ていないスクショです。
どうやらアツマールに投稿したものは左右にも余白が出るようです。
私の方の試した環境を書くのを失念しておりましたので
こちらも載せておきます。
実行環境
ゲームアツマールへのアップロード
ローカルサーバー（？）を使用したブラウザ起動
解像度
816x624
1280x720
バージョン
MV v1.6.2
MZ v1.1.1（それ以下の全てのバージョンはローカルサーバーでのみ確認）
端末
iPhoneSE（ios13.6.1）
iPhoneSE2世代（ios13.6）
ブラウザ
safari
chrome
Windows10のchromeで起動した際はMVのほうと変わりありません。
画面サイズが異なる2つの端末を並べると
ゲーム画面の大きさが違っていたため、
余白の長さは固定単位では無いのかなと思っています。
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 16:09
by ムノクラ
くも000 さんが書きました:ムノクラ様
再現テストありがとうございます。
縦にも余白出るのですね。
上下左右に余白が出るようになっているのでしょうか……。
a.jpg
縦向きで余白の出ていないスクショです。
どうやらアツマールに投稿したものは左右にも余白が出るようです。
私の方の試した環境を書くのを失念しておりましたので
こちらも載せておきます。
実行環境
ゲームアツマールへのアップロード
ローカルサーバー（？）を使用したブラウザ起動
解像度
816x624
1280x720
バージョン
MV v1.6.2
MZ v1.1.1（それ以下の全てのバージョンはローカルサーバーでのみ確認）
端末
iPhoneSE（ios13.6.1）
iPhoneSE2世代（ios13.6）
ブラウザ
safari
chrome
Windows10のchromeで起動した際はMVのほうと変わりありません。
画面サイズが異なる2つの端末を並べると
ゲーム画面の大きさが違っていたため、
余白の長さは固定単位では無いのかなと思っています。
iOSのバージョンで動作が変わるということは、ブラウザがpixiのバージョンによって挙動が変わるのに関係しているのかも？
Android端末だとどうなるのか？とか気になりますね。
RPGツクールMV pixi.js v4.5.4
RPGツクールMZ pixi.js v5.2.4
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 16:51
by ムノクラ
下記はおそらく、RPGツクールMZで作成されたものだと思いますが、
https://game.nicovideo.jp/atsumaru/games/gm18286
死蔵していたAndroidで動作させてみました。
Android 4.4.2
Chrome 77.0.3865.92
ゲームアツマールにアップされた作品で確認
縦全画面：左右に空白
MV 余白なし
MZ 縦横とも余白あり
となりました。
やはりpixiのバージョンと動作が関係しているような気がしますが、サーバー環境でも差が出ているのか…
よくわからないですねぇ…
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 18:12
by くろうど
こんばんは。
これ、たぶん、原因はMZのコアスクリプトです。
rmmz_core.js
の
831行目から
コード: 全て選択
Graphics._stretchHeight = function() {
if (Utils.isMobileDevice()) {
// [Note] Mobile browsers often have special operations at the top and
// bottom of the screen.
const rate = Utils.isLocal() ? 1.0 : 0.9;
return document.documentElement.clientHeight * rate;
} else {
return window.innerHeight;
}
};
っていうのがあるのですが、
ここで、0.9を掛けているんですよね。
なんのためなのかは分からないんですが。
試しに rate を無くしてみたら、余白が消えました。
コアスクリプトを直接いじらず、プラグイン化して、ご確認ください。
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 19:06
by くろうど
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 19:13
by くも000
＞＞ムノクラ様
私はandroidを所持していないのでテスト助かります。
ありがとうございます！
＞＞くろうど様
試したところ余白が無くなりました！
プラグインまでありがとうございます。
確かにモバイル環境かそうじゃないかで分けられてますね。
スマホブラウザでは画面の上の方ギリギリをタップすると
隠れているバーが出てきて邪魔をするので、
それの対策なんでしょうか。
MZからデフォルトで付いたメニューボタンが右上ですし……。
それにしても1割はちょっと取りすぎなような。
rmmz_core.jsは難しくて触れないところだったので助かりました！
ありがとうございます！
この件は解決済みとさせていただきます。
Re: スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 19:21
by ムノクラ
くろうどさん、流石（いつもスマホ向けで作ってますよね）です！
この余白をなくすと、デフォルトのタッチUIとか使いにくくなったりしますか？
主観的な印象で結構ですので、教えて下さい。
Re: 【解決】スマホでの画面表示の余白を消したい
Posted: 2021年2月12日(金) 20:00
by くろうど
私の方の使い勝手の話をすると、
Android 10でジェスチャーナビゲーションというのが追加されまして、
画面の右端または左端から内側にスワイプすると
戻るボタンの処理になる……というモノなのですが、
スマホ画面いっぱいいっぱいに広がると、
画面端のマップ移動をしている時に
誤操作でブラウザバック（ゲーム終了）が発生するかも。
でも、この話は縦持ちの場合ですね。
横持ちで余白が横にある場合はこの誤操作は無いと思います。
（私は縦長派なので自分のゲームについては気になりますが、
そういや、この視点でのテストしてないなぁ）
しかも、縦持ちの場合、
元から横方向には余白が無いので、
誤操作する可能性は変わらないです……。
なので、Androidについては特に影響なさそうです。