Unreal Engine 4 勉強日記 #03 Unreal Engine 4.18.3のゲームをHTML5でブラウザ動作させる

f:id:diographics:20180214012447p:plain

どうもコロケーサトーです。

とりあえず本を読んで作ったサンプルゲームを公開するところまでやろう!

と思ったので、どうせだったらzipをDLしてもらうよりも、ブラウザで直接遊べた方が良いだろうということで、

今回はUnreal Engine 4のゲームをブラウザで動作させるとこまでやりたいと思ってます。

 

今回参考にしたサイト

unrealengine.hatenablog.com

とはいえ自分はサーバーとかに関しては全くの素人なので、苦戦するかな?と思ったのですが思ったよりは簡単でした。なのでHTML5ゲームを作成する方法を説明。

 

HTML5でゲームを公開する手順

f:id:diographics:20180213113148p:plain

 

 まずは、Unreal Engineでゲームをパッケージ化します。(ここら辺はいろいろなとこで解説されてると思うので、軽く流しますね)

ビルドコンフィギュレーション出荷にするのをお忘れなく。

 

パッケージ化したらまず、ローカルでゲームが動作するか確認しましょう。

今使ってるUnreal Engine 4のバージョンは4.18.3なので、特にインストールするものはありません。4.8以前はEmscriptenを導入する必要があったようですが・・・。

f:id:diographics:20180213113805p:plain

パッケージ化したフォルダーの中にあるHTML5LaunchHelper.exeをクリックして起動します。

f:id:diographics:20180213114243p:plain

起動すると↑のような画面が出てくるのでそのまま放置しときます。

この場合ポートは8000を使用してるみたいですね(デフォルトは8000)

これを起動した後、64bitのブラウザを開いて下のようにURLを打ちます。

[Localhost Address]/[ProjectName].html

 

今回の場合は

http://localhost:8000/Practice01-HTML5-Shipping.html

と打ち込むことでブラウザでのゲームの確認ができます。

 

ネット上で公開する

このままだと、ローカルでしか確認できないのでいろいろな人に遊んでもらえるように公開しましょう。ネット上に公開するためにはサーバーにアップロードしなきゃいけないのですが、ふつうのパンピーはサーバーなんて持ってないぞ!!!!!!

ということでレンタルサーバーを借りましょう。自分はStarServerを利用しました。ぶっちゃけどのレンタルサーバーサービスでもいいと思います。

www.star.ne.jpが、ここで注意点。無料のサービス/プランだとアップロードできるファイルの最大サイズが2MBまでだったりするので、ゲームがアップロードできなかったりします。なので、安くてもいいので有料プランを選んだ方がいいと思います(自分は月額250円のプランに申し込みました)

f:id:diographics:20180213115129p:plain

https://www.star.ne.jp/service/

ここら辺はサイトに従えば契約できるので説明は割愛します。

で、サーバーを無事借りることができたらサーバーにさっきパッケージ化したファイルをアップロードします。アップロードにはFTPソフトを使います。自分は安定と信頼のFFFTPを使用しました。

 

f:id:diographics:20180213115416p:plain

 今回のパッケージのフォルダ名は「Pub_Html5」にしました。

 このパッケージをそのまま丸ごとサーバーにアップロードし、htmlファイルの場所をURLにするとブラウザ上でゲームが遊べるようになります。

 

今回アップロードしたゲームは↓

http://rayshock.stars.ne.jp/Pub_Html5/HTML5/Practice01-HTML5-Shipping.html

(Chrome, FireFoxで動作します、Safariでは動作しませんでした)

 

このゲームなんですがいろいろ改善点があって

・GameOverになっても動ける

・GameOverのあとにクリア条件を満たすとClearの文字が上書きされる

・奈落に落ちたらもうどうしようもない

・BGMとSEがない

・ジャンプの使い道がない

・永遠に敵キャラから攻撃を受ける

・インターフェースがダサい

 

HTML5での公開についての改善点

・もっと読み込み早くしたい

・プレイヤーのインターフェースを改造したい

・ブログとかに埋め込めるようにしたい

 

という改善点が山盛り森祭りなので、ここらへんの改善を次回やっていきたいと思います~~~

 

Twitter (フォローしてくれ~~~)

twitter.com

今回のゲームのもとはこちら

作れる!学べる!Unreal Engine 4 ゲーム開発入門

作れる!学べる!Unreal Engine 4 ゲーム開発入門