【Unity】Unityで3D野球盤をつくろう日記 34日目:WebGLのゲームを自分のサーバー(VPS)にアップロードする

投稿日:2019年5月25日
最終更新日:2019年5月25日

(日記のまとめページはこちら:https://wakky.tech/unity-baseball-game/

前回はunityroomにWebGLでビルドしたゲームをアップロードして、他の人がゲームを遊べるようにした。ただ、自分でサーバーを契約してwebサイトを運用している人は、自分のページでもゲームを遊んでもらいたい! と思うこともあると思う。そこで今回は、WebGLでビルドしたゲームを、私が契約しているさくらのVPSにアップロードして、Wordpressで作っているブログの中に埋め込んでみたいと思う。

 

WebGLでビルドしたゲームをサーバーにアップロードする

まず、前回WebGLでビルドしたゲームを、FTPソフト(私はFileZillaを使っている)などでサーバーにアップロードする。どこにアップロードするのが最適なのかイマイチわかっていないが、私はvar/www/html/wp-content/uploads/の以下にwebglというディレクトリをつくり、そこにゲームをアップロードするようにしている。ここに、WebGLで出力してローカルに保存したファイル一式を「Yakyuban」というフォルダに入れて、フォルダごとサーバーのwebglディレクトリにアップロードする。

これで準備は完了。

 

WordPressの記事内からWebGLのindex.htmlにリンクを張る

タイトルのまんまだが、ゲームを張り付けたいWordpressの記事の中に、以下のようにiframeを使ってゲームを張り付ける。リンク先は、先ほどアップロードしたWebGLのYakyubanフォルダの中に入っているindex.htmlファイルを指定する。

<iframe src=”https://wakky.tech/wp-content/uploads/webgl/Yakyuban/index.html” width=”960″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>

しかし、これで埋め込んでみたところ、微妙に下の画面が見切れている。そもそもUnity WebGLの表示はいらないので、UnityのWebGLのSettingで消しても良いけどビルドし直すのが面倒。今回は力技でheightを縮めて、下を完璧に見切らせるようにする。

<iframe src=”https://wakky.tech/wp-content/uploads/webgl/Yakyuban/index.html” align=”top” width=”960″ height=”570″ frameborder=”0″ scrolling=”no”></iframe>

これで試したみたところ何となくうまくいっているように見えるが、実は横が少し見切れている。このあたりの画枠の最適化については、また調べて方法を書きたいと思う。ちなみに埋め込んだゲームは以下から遊べます。

https://wakky.tech/nostalgic-baseball-game

また、スマートフォン(Android)への移植についても同時に検討していきたいと思う。

 


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください