[GameMaker: Studio] スマホブラウザのセーフフレーム

スマホなら各エクスポーターで出力したらいいよね?

…というもっともな話はおいといて、今回はあえてHTML5出力したゲームをスマホのブラウザで遊ぶ場合の画面についてちょっと検証してみました。


最近はデバイスに関係なく画面=16:9(もしくはそれに近いワイド表示)というのが当たり前になっているので、横なら16:9、縦なら9:16をベースにしておけばほとんどの場合そこそこ画面にフィットしてくれます。

しかしこれはアプリの場合で、スマホの主要なブラウザでは画面の上下にアドレスバーやタブバー等がオーバーレイ表示されてしまいます。

gms_sp_html5_test_2

実際どのくらいの量が隠されているのか、ちょっと調べてみました。

対象としたブラウザは、AndroidChromeWindows10MobileEDGEiOSSafariです。
これはそれぞれ標準搭載されているブラウザなので、少なくともこれらを基準にしておけば誰でも使えるんじゃないかと思います。


gms_sp_html5_test_1

PCは横画面=1280×720、縦画面=720×1280にしてあります。
一番外の囲いは全体、一つ内側の紫の囲いは-16px、その内側の赤い囲いは-32pxです。

各スマホブラウザは横画面、縦画面それぞれ横サイズは一番外側の囲いまで見えているので、横幅でフィットしていることがわかります。


さて、問題の縦です。

今回試した中で一番縦を広く使えたのはKATANA01EDGEでした。隠されている範囲は上下それぞれ、横画面は0.07%、縦画面は0.04%でした。ピクセル数にして約50pxです。

逆に一番狭かったのはiPhone5cSafariの横画面で、上下それぞれ0.14%、約100pxです。

SHV311Chromeは横画面は0.09%、約63px、縦画面は0.10%、約130pxでした。


横画面の場合は上下それぞれ0.14%、縦画面の場合は0.10%をセーフフレームと考えておけば良さそうです。

ただし、roomのピクセル数を基準にするとうまくいかないので、ブラウザの縦サイズからの相対値で計算するといいかもしれません。
ブラウザの縦サイズはdisplay_get_height()命令で取得できます。
display_get_height()はブラウザ以外ではディスプレイサイズが返るので、os_browser != browser_not_a_browserの場合だけ採用してください。

この隠される範囲には、タッチが必要なオブジェクトやスイッチ、UIやステータス表示等をするとプレイに支障をきたすことになります。

アドレスバーやタブバーは触れるとブラウザに制御が移ってしまうので、タッチさせる範囲はこれよりももっと狭くしておいた方が無難です。


セーフフレームを考えずに、最初から縦サイズを削って1280×512や720×1024のように作るという手もありますが、ブラウザによっては上下の表示位置がセンタリングされずに上寄せになり、結局上の一部が隠れてしまうということもあるようです。

そういったケースを考慮するとセーフフレームを設ける方が汎用性は高そうです。


一つ重要なことを忘れてました。

スマホブラウザをターゲットに含める場合、ゲームCanvas以外の要素を一切含めてはいけません。
たとえば操作説明等の文字や広告等です。

ゲームCanvas以外の描画要素があると正しく画面に収まらなくなり、場合によってはゲームの操作が不可能になってしまいます。
描画要素はすべてゲーム内に含めましょう。

GM:Sから出力されたindex.htmlの中で編集しても良いのはmetaタグのviewport設定と、titleだけです。

viewportは以下の設定で上手くいくようです(全環境で保証するものではありませんが…)

横画面 : 1280x720の場合
<meta name ="viewport" content="width=1280, 
 minimum-scale=0.1, maximum-scale=10.0, 
 user-scalable=0, shrink-to-fit=yes" />
縦画面 : 720x1280の場合
<meta name ="viewport" content="width=720, 
 minimum-scale=0.1, maximum-scale=10.0, 
 user-scalable=0, shrink-to-fit=yes" />

なお、今回の結果は手持ちの3端末のみのもので、機種やOS、ブラウザのバージョン等で異なる結果になると思います。

お手持ちの端末がどんな感じになるかは、こちらで試してみてください。

http://labo.emilycharlotte.jp/gms_sp_test1/