UnityでポケモンGoもどきを作りたい（２）ルーレットアプリを作成してNetlifyで公開
前回はWindows10にUnity 2019.2.0f1をインストールしました。
いきなりポケモンGoもどきのゲームを作成するのはハードルが高いので、まずは以下の本の『ルーレットゲーム』を写経してみたいと思います。以下の本は、Unity初めての人に非常にお勧めです。
開発環境
Windows 10 Pro 1803
Unity Hub 2.1.0
Unity 2019.2.0f1
Unityのインストール方法についてはこちらに記載させていただきました。
どんなゲームを作ろうとしているのか
画面をタップするとルーレットがまわり、自然に減速して止まる。止まったところで大吉か吉か判定というごく簡単なゲームとします。
ゲームを作る流れ
Unityの教科書によると、Unityでゲームを作る流れは、以下のように考えるとよいそうです。
- 画面上のオブジェクト（今回は、『ルーレット』と『針』）をすべて書き出す
- オブジェクト（今回は、『ルーレット』）を動かすためのコントローラスクリプトを決める
- オブジェクトを自動生成するためのジェネレータスクリプトを決める（今回は不要）
- UIを更新するための監督スクリプトを用意する（今回は不要）
- スクリプトを作る流れを考える
その後、以下のように実装していくそうです。
- プロジェクトの作成
- オブジェクトの配置
- スクリプトの作成
- スクリプトのアタッチ
新規Unityプロジェクトの作成
UnityHubを起動し、左上の『プロジェクト』をクリックし、画面右上の『新規作成』をクリックし、『 2019.2.0f1 』をクリック。
2D を選択し、プロジェクト名は『Roulette』として、作成 をクリックします。
しばらく待った後、
以下のようなUnityの画面がやっと出てきました。
プロジェクトに素材を追加
Unityの教科書のサポートページを参考に、ルーレットの画像(560×560 pxくらいの大きさ)と、針の画像 (58×81 pxくらいの大きさ) をPowerPointなどを用いて作成し、pngファイルで保存します。
白い部分を透明にしたい（透過pngファイルにしたい）ので、こちらのサイトを利用しました。（←このサイトすごく便利です！）
以下の２つの画像を作成しました。
この２つの画像を、Unityの『プロジェクトタブ』にドラッグ＆ドロップします。
以下のようになります。
WEBアプリ用に設定する
まずは、WEBで公開したいと考えています。（ファイルが重くなったらAndroidアプリにしようかと考えています。）
File > Build Settings をクリック。
WebGL を選択状態にしたのち、画面左下のPlayer Settings… をクリックし、
Resolution and Presentation をクリックしてひろげて、Default Canvas widthを720に変更し、
Default Canvas Heightを1080に変更します。
その後、このウィンドウを閉じます。
Switch Platform をクリックして、少し待ったのち、Build Settingsのウィンドウを閉じます。
画面サイズの設定
Gameタブを選択し、Aspectのドロップダウンリストを開き、＋ を押して、720 x 1080 として、OK をクリックします。
シーンを保存
ProjectタブのScenesフォルダをダブルクリックして開き、
SampleScene の名前を、GameScene に変更します。
Ctrl + S で保存しておきます。
シーンにオブジェクトを配置する
ProjectタブのAssetsの画面から、ルーレットの画像を、Sceneタブ（GameタブからSceneタブにしておきます）にドラッグ＆ドロップします。
（ここで、縦長の画面なので、ついでに、SceneタブとGameタブを横並びにしておきました。）
すると、以下のようになります。画面右側の『Inspectorタブ』のTransformのところのPositonを0,0,0 にしておきます。
次に、針の画像をSceneタブにドラッグ＆ドロップして、位置を図のように調整します。
次に、背景の色を青から白に変更します。画面左側の『Hierarchyタブ』の、Main Camera をクリックしたのち、画面右側の『Inspectorタブ』の Camera の Background の右横の色をクリックします。
Colorウィンドウが出てくるので、下の方のHex Colorを、FFFFFF （Fを6個）に変更します。
ルーレットのスクリプトを作成する
『ルーレットをクリックしたら、ルーレットが回り出すプログラム』を作成します。
画面左下の『Projectタブ』の中を右クリックすると、以下のような画面が出てくるので、『Create』＞『C# Script』の順にクリックします。
NewBehaviourScriptという名前のファイルが作成されるので、名前をRouletteControllerに変更します。
このRouletteControllerをダブルクリックすると、VisualStudioが起動します。
以下のような画面になります。サインインしてもよいですが、面倒なので、今回は『後で行う』をクリックしました。
RouletteControllerが開かれるので、以下のように変更します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class RouletteCOntroller : MonoBehaviour
{
float rotSpeed = 0; // 回転速度
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
// マウスが押されたら回転速度を設定する
if(Input.GetMouseButtonDown(0))
{
this.rotSpeed = 10;
}
// 回転速度分、ルーレットを回転させる
transform.Rotate(0, 0, this.rotSpeed);
}
}
これだけではルーレットをクリックしてもルーレットは動きません。RouletteControllerをrouletteオブジェクトに『アタッチ』する必要があります。
スクリプトをルーレットに『アタッチ』する
『Projectタブ』内のRouletteControllerを、『Hierarchyタブ』内のrouletteオブジェクトにドラッグ＆ドロップします。
（この操作を、RouletteControllerをrouletteオブジェクトに『アタッチする』と呼びます。）
なんかエラーが出てアタッチできませんでした。
VisualStudioで見てみると、5行目の、RouletteControllerと書くべきところを、
ROuletteController と、記載していたのが原因のようです。訂正して保存（Ctrl + S）したのち、再度、アタッチします。
今度は、rouletteオブジェクトを選択すると、画面右側の『Inspectorタブ』にRouletteController(Script)と表示されるので、ちゃんとアタッチできたようです。
画面真ん中上の『再生』ボタンをクリックし、その後、『Gameタブ』をクリックすると、ルーレットが回転します。
ゲームっぽくなってきました。もう一度『再生ボタン』を押すと、画面が止まります。
ルーレットの回転が止まるようにする
RouletteControllerを編集して、ルーレットが減速して止まるようにします。
// ルーレットを減速させる（1フレームごとに、スピードを0.96倍にする。）
this.rotSpeed *= 0.96f;
再生ボタンをおして、Gemeタブのルーレットをクリックすると、少し動いて、止まるようになりました。
WebGLで書き出す
このゲームをインターネットで公開してみます。
File > Build And Run をクリック
フォルダ名はなんでもよいですが、今回は、1/ というフォルダを作成し、1/ を選択して、『フォルダーの選択』をクリックし、その後、Enterを押しました。
（参考： https://blog.naichilab.com/entry/2017/04/29/125527 ）
だいぶ時間がかかりますが、他のことをしながら待ちます
なんかすごく大きくなってしまいましたが、なんとかブラウザ上で動きました。
Netlifyにアップロード（デプロイ？）
https://www.netlify.com/にログインして、1/ フォルダ内のものをすべてアップロードします。
アカウントを新しく作成してもよいですし、GitHubアカウントを持っていれば、それでログインしてもよいです。
ログイン後に、一番下へ行きます。
先ほどの、1/ フォルダを右クリック ＞ 送る ＞ Zip(圧縮)フォルダー をクリックして、ZIPファイルを作成します。
出来上がった1.zip を、先ほどのNetlifyの
「 Want to deploy a new site without connecting to Git?
Drag and drop your site folder here 」
にドラッグ＆ドロップします。
すると、すぐに、以下のような画面になります。
画面がでかすぎですが、公開できました！
https://happy-curran-69ea53.netlify.com/
次回は、このアプリをVue.jsを用いて、PWA(Progressive Web App)化して、オフラインでも遊べるようにしたいと思います。
ソースコードとDEMOサイト
ソースコード
https://github.com/adash333/unity-roulette
DEMOサイト
https://happy-curran-69ea53.netlify.com/
参考：
https://www.cg-method.com/entry/unity-gitignore-setting/ （UnityをGit管理するときの.gitignoreファイル）
参考文献
Unityやるなら、まずはこの本が絶対にお勧めです。