Unityで作ったプロジェクトをサーバーにデプロイする

Unityで作成したプロジェクトをWebで動かしてみた

この記事は、G's Achademyのアドベントカレンダー企画で作成しました。
https://qiita.com/advent-calendar/2024/gsacademy

きっかけ

私はVRアプリを主に作成していましたが、G'sアカデミーのワークでさくらのレンタルサーバーを使用したので、せっかくなのでUnityで作成したプロジェクトをWebで動かしてみようと思い、試してみました。簡単にゲームでデータを扱う場合、他の手段が多くある（と思う）ので、この記事は主にG’sアカデミー受講者向けかもしれません。

概要

Unityで簡単な操作ができるプロジェクトを作成し、それをサーバーにアップしWebブラウザで動作させます。
Unityの操作は初学者向けに説明しています。

前提条件

• Webサーバーを契約している
• FileZillaを使用して一度はサーバー上のファイルをブラウザで表示したことがある

---

作るもの

Webブラウザ(Microsoft Edge等)でキャラクターを操作できるもの

---

Unityのダウンロード

Unity HubをPCにインストールし、Unityエディタ（LTS）をダウンロード。その際WebGLビルドサポートもダウンロードするようにしてください。

---

Unityプロジェクトの新規作成

1. Projects⇒New Projectから、今回は「3D（Built-in Render Pipeline）」を選択して作成します。
   
2. CreateProjectを押すと、プロジェクトが立ち上がります。

---

ビルド設定

1. File⇒Build Settingを選択
2. WebGLを選択し、Switch Platformを選択
   

---

使用アセットのインポート

今回はこちらの無料の3Dモデルアセットを使用します。
https://assetstore.unity.com/packages/3d/characters/query-chan-model-sd-35616
サイトからアセットをUnityに追加します。

UnityでWindow⇒PackaegeManagerから該当アセットをダウンロード、インポートを行ってください。

---

シーンの作成

1. Query-Chan-SDをプレハブからシーンにドラッグ＆ドロップ
   

2. カメラの位置を調整
   GameウィンドウにQuery-Chanが写るよう、MainCameraの位置を調整します。

---

キーボード操作スクリプトの作成

1. 以下のスクリプトを新規作成し、Query-Chan-SDにアタッチ。
   （Unity上でNewScriptで作成しても、QueryChanInputController.csを作成してUnityのプロジェクトに入れてもかまいません）
   Query-chanには、アニメーションを制御するスクリプトがついているので、それをキーボードから起動するスクリプトです。（Claude生成）

using UnityEngine;

public class QueryChanInputController : MonoBehaviour
{
    private QuerySDMecanimController animController;
    private float moveSpeed = 5f;
    private bool isFlying = false;

    void Start()
    {
        animController = GetComponent<QuerySDMecanimController>();
    }

    void Update()
    {
        // 地上モードと飛行モードの切り替え
        if (Input.GetKeyDown(KeyCode.Space))
        {
            isFlying = !isFlying;
            if (isFlying)
            {
                animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_FLY_IDLE);
            }
            else
            {
                animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_IDLE);
            }
        }

        // 移動処理
        float horizontal = Input.GetAxis("Horizontal");
        float vertical = Input.GetAxis("Vertical");
        Vector3 movement = new Vector3(horizontal, 0, vertical);

        if (movement.magnitude > 0.1f)
        {
            // 移動方向を向く
            transform.rotation = Quaternion.LookRotation(movement);

            // 移動
            transform.position += movement * moveSpeed * Time.deltaTime;

            // アニメーション設定
            if (!isFlying)
            {
                if (Input.GetKey(KeyCode.LeftShift))
                {
                    animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_RUN);
                }
                else
                {
                    animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_WALK);
                }
            }
            else
            {
                if (horizontal > 0)
                    animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_FLY_RIGHT);
                else if (horizontal < 0)
                    animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_FLY_LEFT);
                else
                    animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_FLY_STRAIGHT);
            }
        }
        else
        {
            // 待機アニメーション
            if (isFlying)
                animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_FLY_IDLE);
            else
                animController.ChangeAnimation(QuerySDMecanimController.QueryChanSDAnimationType.NORMAL_IDLE);
        }
    }
}

1. 実行ボタンを押し、WASDキーで移動してみましょう。スペースキーで飛行モードに切り替え可能になります。
   
   

---

ビルド

1. キーボードで操作できたら、ビルドを行います。

2. FileからBuild And Runを選択
   

3. 適当な名前のフォルダを作成し、実行
   

4. ビルドが完了すれば指定のフォルダにビルドファイルが出力され、ブラウザが立ち上がります。
   

---

レンタルサーバーへのアップロード、動作確認

1. FileZillaを起動しサーバー接続
2. 任意のフォルダを作成
3. 先ほどビルド時に作成したフォルダの内容を全てコピー
4. ファイルを配置したディレクトリのパスをブラウザで入力
5. プロジェクトが読み込まれます。

---

まとめ

案外簡単にUnityで作成したプロジェクトをWebにアップできたと思います。
ただサンプルゲームをWeb表示するだけなら、別のサービスを利用した方が早いと思います。実際にこの利用ケースがどれほどあるかはわかりませんが…
自分のサーバーで動作させることができたので満足ですｗ

私は以前VRアプリしか作れませんでしたが、このキャンプでWebサービスを作れるようになりました。
https://gsacademy.jp/system/