GameMaker

GameMaker Studio 2のHTML5出力でスマホのブラウザサイズにリサイズする方法

GameMaker Studio 2 Webで出力した低解像度(320x480)のゲームをスマホブラウザで動かすと、なんか思った表示画面と違ったので処理を入れてみました。
制作に慣れた人なら不要な情報かもしれませんが、同じことでお悩みのかたがひょっとしたらいるかもしれませんのでまとめておきます。(あと、自分が忘れないように)

開発環境
IDE:GameMaker Studio 2 Ver2.1.4
出力:GameMaker Studio 2 Web(HTML5)
※ゲームのRoomサイズは縦480px 横320px

想定していた画面とデフォルト出力の結果

こうなると思ってた(完成図)
risou.png
ゲームの解像度比率を保持したまま、ブラウザの画面いっぱいに拡大して、上下左右中央にゲーム画面を表示されると思っていました。

GameMaker Studio 2でのHTML5デフォルト出力結果
genjitsu.png
なんか、ブラウザ画面の左上にゲーム画面が寄ってしまいました。
※GameMaker Studio 2でのHTML5デフォルト出力結果

色々調べてみた結果、HTML5出力したゲームをブラウザ画面にフィットしたサイズで表示するには、画面のスケーリング処理を入れないといけないらしいです。

参考資料
YoYoGames 公式ブログ記事 SCALING FOR HTML5

スケーリング処理組込概要

  • フルスクリーン化スクリプト"canvas_fullscreen"を作成する
  • スクリーン処理オブジェクト"obj_screenMgr"を作成する
  • リサイズによる入力(マウス・タップ)座標の補正
  • "obj_screenMgr"をRoomのCreation Codeで組み込む

フルスクリーン化スクリプト"canvas_fullscreen"を作成する

リソースバーの"Script"に新規スクリプト"canvas_fullscreen"を作成します。
なお、YoYoGames 公式ブログ記事 "SCALING FOR HTML5"に記載されていた"FULLSCREEN SCALING"のスクリプトをそのまま使用したところ、画面比率も無視して画面いっぱいに表示されてしまったので、ルームの縦横比率を維持するようにスクリプトを修正しています。

canvas_fullscreen.gml
/// canvas_fullscreen(base, browser_width, browser_height)
// argument0 = base value for scaling
// argument1 = the current browser width
// argument2 = the current browser height

//◆◆追加部分 開始◆◆
base_width = room_width;
base_height = room_height;
var aspect_room = (room_width / room_height);
//◆◆追加部分 終了◆◆

view_wport[0] = argument1;
view_hport[0] = argument2;

window_set_size(argument1, argument2);
window_center();

/*◆◆今回は使わないのでコメントアウト◆◆
var aspect = (argument1 / argument2);
*/

if (aspect < 1)
{
    view_hview[0] = argument0;
    view_wview[0] = (argument0 * aspect_room);//◆◆修正箇所 ルームのアスペクト比をかける◆◆

}
else
{
    view_hview[0] = (argument0 / aspect_room);//◆◆修正箇所 ルームのアスペクト比をかける◆◆
    view_wview[0] = argument0;

}

surface_resize(application_surface, view_wview[0], view_hview[0]);

スクリーン処理オブジェクト"obj_screenMgr"を作成する

リソースバーの"Objects"に新規オブジェクト"obj_screenMgr"を作成して、オブジェクト内に2つのEventスクリプトを作成します。
こちらも基本的にYoYoGames 公式ブログ記事 "SCALING FOR HTML5"に記載されているものを利用したのですが、後述する座標系の問題を解消するための補正値を出す箇所を追加しています。

Create

Create_0.gml
if(room_width <= room_height) base_size = room_width; //ベースサイズ(短辺)のサイズを保存
else{base_size = room_height;}

width = browser_width;//ブラウザのサイズwidthを保存
height = browser_height;//ブラウザのサイズheightを保存
//◆◆追加部分 開始◆◆
gw = room_width;
gh = room_height;
adjust_w =  gw / width;//ブラウザサイズによる入力座標のwidth調整値
adjust_h = gh / height;//ブラウザサイズによる入力座標のheight調整値
//◆◆追加部分 終了◆◆
canvas_fullscreen(base_size, width, height);//スクリプトcanvas_fullscreenを使用

Step

Step_0.gml
//ブラウザサイズが保存したサイズと違ってたら表示比率変更処理
if (browser_width != width || browser_height != height)
{
    width = browser_width;//現在のブラウザのサイズwidthを保存
    height = browser_height;//現在のブラウザのサイズheightを保存
    //◆◆追加部分 開始◆◆
    gw = room_width;
    gh = room_height;
    adjust_w =  gw / width;//ブラウザサイズによる入力座標のwidth調整値
    adjust_h = gh / height;//ブラウザサイズによる入力座標のheight調整値
    //◆◆追加部分 終了◆◆
    canvas_fullscreen(base_size, width, height);//改めてスクリプトcanvas_fullscreenを使用
}

リサイズによる入力(マウス・タップ)座標の補正

単純に画面をリサイズしただけだと、タップやマウスクリックなどの座標がおかしくなってしまいます。タップやマウスの座標をゲームで利用する際は"obj_screenMgr"で算出している補正値を利用します。

例:マウス座標を取得するとき

sample.gml
//obj_screenMgr.adjust_w、obj_screenMgr.adjust_hをxとy座標にそれぞれかけて補正
wx = mouse_x * obj_screenMgr.adjust_w;
wy = mouse_y * obj_screenMgr.adjust_h;

"obj_screenMgr"をRoomのCreation Codeで組み込む

Room読み込み時に"obj_screenMgr"をインスタンスとして組み込むようにします。
Roomの"Creation Code"に以下のスクリプトを書き込みます。

RoomCreationCode.gml
instance_create_layer(0,0,"Background",obj_screenMgr);

インスタンスの作成先レイヤーは適当なレイヤーを指定してください。


以上でHTML5で出力、実行するとゲーム画面がアスペクト比を保持したままブラウザサイズいっぱいに拡大されて表示されます。