GitHub PagesでwebGL用にビルドしたものを公開

週末開発その4。このUnityで作ったゲームをwebGL用にビルドしたけど、ネット上で起動できないという質問に対する解決策として、GitHub Pagesを使って公開する手法があげられていた。なるほどーって思ったので自分でもやってみる。

teratail.com

完成ページ

こんな感じ。画面上部にゲーム画面配置して、その下に補足を載せる。

f:id:nonoui:20180202193344p:plain

要点

githubのリポジトリにビルドしたファイル群をpush
ボックスレイアウトでページを構成。ゲームの補足を記述

以下、私の場合

とりあえずGithubにリポジトリ作ってローカルからpushできる状態にする。ゲームもwebGL用にビルドできた状態にする。

ディレクトリ構造

ディレクトリ構造はこんな感じにした。root直下のindex.htmlをトップページとして扱う。そして、各ゲームのindex.htmlのリンクを貼っておく。

root (リポジトリ名)
  |
  |-- index.html
  |-- css (スタイルシート群)
  |-- img (画像群)
  |--BasicCardBattle (webGLでビルドしたゲームのファイル)
              |-- Build
              |-- TemplateData
              |-- index.html (ゲームページ)

ゲームページに付け足す

ビルド後のファイルにはBuildファイルとTemplateDataファイルとindex.htmlがある。index.htmlはだいたいこんな感じ。主にhead部分とbody部分に分かれている。

f:id:nonoui:20180202200701p:plain

このbody部分に操作方法と補足を付け加える。ボックスレイアウトで構成したいので、divタグにclassをつけておく。

<body>
    <div class="main-box box">
      <div class="webgl-content">
        省略
      </div>
    </div>

    <div class="side-box box">
      <div class="rule-box box">
        <h2> 操作方法 </h2>
        <ul>
          <li> マウスクリック </li>
          <li> カードまたはキャラクターにマウスオーバーで情報が表示される </li>
        </ul>
      </div>
    
      <div class="introduction-box box">
        <h2> 紹介 </h2>
        基本的なカードバトル。先にライフを0にした方が勝ち。

        <h2> ルール </h2>
        <ul>
          <li> 1ターンに1枚カードを選びます </li>
          <li> コスト(カード右下の数字)の低いカードを出したプレイヤ―からカードをプレイします </li>
          <li> 同コストの場合、旗があるプレイヤーが優先されます(旗は移動します) </li>
          <li> カードを使用するとカードのレベルが上がります </li>
        </ul>

        <h2> COMの種類 </h2>
        COMの性格が「決断強い」or「柔軟性」で思考パターンを変えました(ランダム選出)

      </div>

        <img src="../img/license_logo.png">
        このコンテンツは、『ユニティちゃんライセンス』（<a href="http://unity-chan.com/contents/guideline/" target="_blank"> http://unity-chan.com/contents/guideline/</a>）で提供されています。
    </div>
  </body>

イメージとしてはこんな感じ。

f:id:nonoui:20180202193613p:plain

次に、cssを適応させるため、head部分に次の一文を添えた。

<link rel="stylesheet" href="../css/game-page-layout.css">

style.css

TemplateDataの中にはstyle.cssがある。このwebgl-contentのclassセレクタの一文をコメントアウトした。positionプロパティをabsoluteにしていたため、ゲーム画面の固定をここで指定していると思ったため(多分)。

/*.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}*/

画面の装飾

ボックスレイアウトをつくる。ここの記事がとても参考になりました。

qiita.com

.box {
  box-sizing: border-box;
}

/*boxのデザイン*/
.rule-box, .introduction-box {
  float: left;
  height: 350px;
  width: 49%;
  margin: 5px;
  padding: 1px 1px 3px 10px;
  background: rgb(250, 250, 250);
  border-top: solid 10px rgb(168, 231, 40);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
  font-size: 12px;
}

body {
  padding: 0px auto;
}

h2 {
  font-size: 20px;
}

トップページにリンクを貼る

トップページのindex.htmlにリンクを貼る。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>自作ゲーム集</title>
  </head>
  <body>
    <a href="BasicCardBattle/index.html" target="_blank"> BasicCardBattle</a>
  </body>
</html>