RPGツクールMZ 013 見ながら聞くだけで学んだ気になる初心者講座（web経由でスマホに表示してみる編）

2020/10/15

とりあえず、ひととおりのマップ作成手順を理解した（のか？）ので、学習テンション継続のために、web経由でスマホで表示してみます。

スマホで表示するときのサイズとしては、今回は、縦画面メインで、ドット感だしつつ、操作しやすいキャラの大きさを考え、かつ、画面スクロールしない設定でも使いたいので、以下の設定にします。

１、マップの設定
幅　７タイル　　高さ　１１タイル

２、解像度
データベース ⇒　システム２
画面の幅　336　　画面の高さ　528
UIエリアの幅　336　　UIエリアの高さ　528

とりあえず、この先学習続けていくときの画面サイズはこのサイズで続けます。
この設定で、こんなサイズ感です。

ちなみに表示させるには、もちろん、web公開できるサーバーへデータをアップロードします。
用意するデータは、今回は、手っ取り早く以下の手順で書き出します。
ファイル ⇒　デプロイメント ⇒　プラットフォーム（ウェブブラウザ）⇒　オプション（未使用ファイルを除外するにチェック）
これで、OKしましょう。

出力場所に、Projectフォルダが出力されるので、そのフォルダをwebサーバーへアップロードします。
サーバーによって違いはあると思いますが、
xserverだと、public_html というフォルダに、ProjectフォルダをコピーすればOKです。
ブラウザで接続するときは、
契約しているドメイン名＋Projectフォルダ名になります。
例えば、自分で契約しているドメイン名が rpgtkoolmz.com で、Projectフォルダ名が project1なら、
rpgtkoolmz.com/project1
これをスマホのブラウザに入力するとゲーム画面が表示されます。
そのままだと、暗号化されていない接続画面になるので、他の人に紹介する場合は、サイト対応が必要ですが、httpの後に、sを加えて、https:// でリンクを作りましょう。

パソコンのブラウザで、chrome なら、
Ctrl + Shift + F5
で、ハード再読み込み
それでも、あれ？更新できてないやん！って時は、
F12を押して、右側にデベロッパーツールを表示した状態で、
chrome 左上にある更新ボタンを長押し ⇒　キャッシュの消去とハード再読み込み
です。
これで、スマホ上で、意図しない画面や状況なら、RPGツクール上での設定が間違っているってことですね。

----- べんりあつめ。-----

ちなみに、スマホのブラウザのアドレス欄に入力するのが手間なら、パソコン上の chrome や firefox などのブラウザで入力して表示確認をしてから、画面表示しているQRコード作成のプラグインなどを導入して、スマホのカメラでQRコード読み取りして誘導した方が楽ですね。
あとは「ホーム画面に追加」しておけばOKですね。

また、作ってはスマホで確認、作ってはスマホで確認する場合は、スマホのキャッシュ機能が邪魔して、更新できているかどうかが不明なので、確実にキャッシュを削除してから表示させます。
iPhone だと、
設定 ⇒　safari ⇒　履歴とWebサイトのデータを消去
ですね。
念のため、起動中の画面も消してから、再度試してみましょう。

スマホのブラウザで表示させた場合と、ホーム画面に保存しておいて、そのアイコンから表示させた場合では、画面表示サイズが異なります。
ブラウザでそのまま表示している場合は、上のアドレスバーや下のツール類が表示され、画面表示領域がせまいですが、ホーム画面に追加したアイコンから表示させると、最大サイズで遊べるので、ブラウザで表示させた後は、ぜひ、「ホーム画面に追加」してから、ホーム画面のアイコンから遊びましょう！
この現象は、Androidも同様です。

パソコン上のブラウザでは非常に小さいのですが、iPhone7クラスのスマホでは、それなりに表示されるので、これで良しとします。
あとから、画面拡大のプラグインなどを導入して、調整しましょう。
メニュー画面も表示されない部分があるから、どのみち改良必須ですね。

とりあえずは、テンション維持のための、画面サイズとスマホの表示確認でした。
スマホで動かすだけでも、ワクワク感は違いますね。
さらに「ホーム画面に追加」で、ホームにアイコン追加しておくと、アプリ感が増すので、かなりテンション維持にはつながりますよ。

今回は、これで！
次回は、このホーム画面に追加されたときのアプリアイコンをオリジナルに変えてみます！
それではまたまた！