のののーと

何か作った時のメモ書き

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>

GitHub側で設定

ローカルで試してみて上手く表示出来たらpushしてGitHub Pagesの設定をする。 リポジトリのトップページにSettingsというタブをクリックして、ある程度スクロールすると、 GitHub Pagesの項目が見えてくる。

f:id:nonoui:20180202194023p:plain

ここのSourceの項目を対象のbranchに変えてSaveすれば数分後ぐらいに無事に反映されるはず。 私の場合はmaster branchで。

f:id:nonoui:20180202194225p:plain

以上!

普通にunityroomで公開した方がいいと思うけど、自作ゲーム作品集が出来上がっていくのも、なかなか乙なものだ。 すぐ友人に見せられるのは便利かも。

余談

週末は忙しそうなので、これをその4として(週末とは)。