Unityで作ったWebGLゲームをブログなどに割と簡単に埋め込む方法【SIMMER.io、GitHub】

WebGL製のゲームをブログに埋め込もうと、GitHubを使って四苦八苦しながらも何とか成功したものの、直後にSIMMER.ioという埋め込みが可能なゲームアップロードサイトを見つけてしまう。

この記事ではSIMMER.ioとGitHubを使ったWebGLゲームの埋め込み方法を書いておきます。

この記事はUnity製のWebGLを既にビルドしてある人向けです

SIMMER.io

  

WebGL製のゲームを簡単にアップロードできるサイトです。

日本語の情報が全くありませんが、自分が調べた限りでは、恐らく危険なサイトではないと思われます。

ですが、一応使用は自己責任でお願いします。

使い方

・SIMMER.ioにアクセスし、右上の「SIGN IN / SIGN UP」から登録します。gmailがあれば簡単にできます。

・右上のアップロードボタンを押し、ビルドしたゲームのフォルダをドラッグ&ドロップ、手順に沿って必要な情報を入力

・埋め込むときは「Embed Your Game」の部分にあるコードをコピーして貼り付ければいいだけ（ゲームの編集ページにあります）

非常に簡単ですが、埋め込んだゲームをフルスクリーンにする方法が分からない。

もし知っている方がいれば教えて下さい

GitHub 

 

コードを共有するサイトですが、WebGLのゲームを公開することもできます。

注意点として無課金アカウントだと、アップロードしたWebGLのファイルが誰でもダウンロードできる状態になります。

ただ自分はWebGLについて詳しく知らないので、それがまずいことがどうかはわかりません。有識者の方が居れば教えて下さい

使い方

・GitHubにアクセスし、右上の「SIGN UP」から登録します

・GitHub Desktopをダウンロードし、インストールします

・どこかにフォルダを作成します。名前は適当に決めて下さい（今回はchargeshotにしています）

・GitHub Desktopを開き設定を済ませたら、左上の「File」から「New repository...」を選択します。

名前を決め、「Local path」は先ほどのフォルダを選択します。

それ以外の項目は各自適切に設定して下さい（自分は良く分かりません）。

全て済んだら「Create repository」をクリックしてください

・フォルダの中に「doc」というフォルダを作成します。このようになります

・「Publish repositoy」をクリックします。無課金の場合は「Keep this code private」のチェックを外しておきます

・ビルドしたWebGLのファイルを先ほどの「doc」フォルダにいれます。

画像のようになったら、左下のSummaryに何か入力し、「Commit to main」をクリックします。

・「Push origin」をクリックして処理が終わるまで待ちます

・上の「Current branch」をクリックし、「master」という名前のブランチを作成します

・「Publich branch」をクリックします

・GitHubに戻り、先ほどのrepositoryを開き、右上の「Setting」をクリックします

・「Pages」を選択し、Branchの部分をこのように設定します

・しばらくするとこのようにリンクが出てきます（どういうタイミングで出るのかは良く分かりません）。

リンクをクリックして動作確認します。

上手くいっていれば完了です。

埋め込むときは下記のようなコードを入れます（一例）

<iframe src="埋め込むリンク" width="640px"  height="360px" frameborder="0" scrolling="no" allowfullscreen></iframe>

これで割と簡単にブログなどにゲームを埋め込めますが、やはりサーバーをレンタルするのが良いかもしれません。

これらの方法はテストや動作確認に使用するのが良いと思われます