2019年8月23日TwitterFacebookGoogle+LinkedInPocket前回は、ルーレットアプリを作成してNetlifyで公開しました。これでは、オンラインでないとゲームが動作しません。Netlifyで公開してみたいと思います。PWAという形式でWEB公開すれば、Androidスマホで、まるでAndroidアプリのようにインストールして、オフラインでゲームをプレイすることができるようになります。Playストアに申請せずに、アプリのようなものを公開することができます。和希)今回は、以下の本の『寸止めゲーム』を作成し、さらに、それを、こちらのサイトの通りに、Vue.jsのPWAに組み込んで、Vue.jsアプリとしてNetlifyで公開したいと思います。1.37.1Unityのインストール方法についてはこちらに記載させていただきました。インストールと、Node.jsのインストールについてはこちらが参考になります(私の場合)。(nvm-windowsが面倒であれば、最初は、Nodejsのサイトからインストールするのが簡単です。Windowsのインストールはこちらが参考になります。今回構築した環境@vue/cliどんなゲームを作ろうとしているのかUnityの教科書を参考に、以下のような寸止めゲームを作ります。UnityゲームアプリをVue.jsでPWA化する流れこちらを参考に、以下のような流れでやってみたいと思います。使ってシンプルにはじめてみる(@5670002019年07月09日に更新)ゲームを作る流れUnityの教科書によると、Unityでゲームを作る流れは、以下のように考えるとよいそうです。Interface)』)をすべて書き出すオブジェクト(今回は、『車』)を動かすためのコントローラスクリプトを決めるオブジェクトを自動生成するためのジェネレータスクリプトを決める(今回は不要)UIを更新するための監督スクリプトを用意する(今回は、車とフラグの距離を表示するUIを更新)スクリプトを作る流れを考えるその後、以下のように実装していくそうです。監督の作成@vue/cliのインストール突然ですが、UnityゲームをWEBで公開して、それをオフラインでも遊べるようにするために、Vue.jsというJavaScriptのフレームワークを用いますので、そのために、@vue/cliというものを自分のパソコンにインストールします。インストールと、Node.jsのインストールは行っているものとします。(インストール方法についてはこちらが参考になります。私の場合はこちらのようにインストールしました)。VisualStudioCodeもこちらからインストール済みとします。Code』をクリックして、VisualStudioCodeで開きます。vue-cli』としておきます。インストールされました。以下のコードを入力して、『vue-pwa-unity-swipecar』という名前の、Vue.jsアプリを作成します。(ここまでが重要で、以降は、Enterを連続して押しました。filesNVue.jsアプリが作成されるまで、10分ほど待ちます。これで、新規Vue.jsアプリ(PWA化済み)ができました。一回VisualStudioCodeを閉じてから、C:/vue/vue-pwa-unity-swipecar/フォルダを、VisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力して、Vue.jsアプリが起動するのを確認します。mode)が開きます。して、一旦、サーバを停止できます。Vue.jsアプリにvue-unity-webglプラグインをインストールVue.jsアプリでUnityのWebGLを表示するために、以下のコードを入力して、プラグインをインストールします。このアプリにインストールされました。いう名前の新規Unityプロジェクトを作成します。UnityHubを起動し、画面右上の方の、『新規作成』>『2019.2.0f1』をクリック。なっていますが、2018より新しければvue-unity-webglは使用できるようです。Unityのインストール方法についてはこちらに記載させていただきました。』として、『作成』をクリックします。以下のような画面になります。Unityのフォルダに、Unity用の.gitignoreを作成VisualStudioCode上で、Unityのフォルダ(C:/unity/vue-pwa-unity-swipecar/SwipeCar/)に、Unity用の.gitignoreを作成し、こちらのコードをコピペします。以下、しばらく、Unity上で、寸止めゲームを作っていきます。プロジェクトに素材を追加Unity5の教科書のサポートページを参考に、地面ground、車car、フラグflagの画像をPowerPointなどを用いて作成し、『ペイント』などの画像ソフトに貼りつけて、pngファイルで保存します。白い部分を透明にしたい(透過pngファイルにしたい)ので、こちらのサイトを利用しました。(←このサイトすごく便利です!)以下の3つの画像を作成しました。ground.pngcar.pngflag.pngまた、必須ではありませんが、UTAUで音声ファイルcar_se.wavも作成しておきます。(UTAUのインストールなどについてはこちらへ。)この3つの画像と1個の音声ファイルを、Unityの『Projectタブ』にドラッグ&ドロップします。以下のようになります。WEBアプリ用に設定するUnityゲームをWebアプリとして書き出すための設定を行います。