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

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

この記事は、G's Achademyのアドベントカレンダー企画で作成しました。  
[https://qiita.com/advent-calendar/2024/gsacademy](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ビルドサポートもダウンロードするようにしてください。
![Snapshot.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/3b8053da-255c-82c6-d27d-928bfcedb59c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/33f4b8df-24ca-9dbd-cbe8-3292ceeb911b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/2a2b547e-96b5-a535-2f85-5990c5e3627b.png)

---

## Unityプロジェクトの新規作成
1. Projects⇒New Projectから、今回は「3D（Built-in Render Pipeline）」を選択して作成します。
![Snapshot_3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/7b6a802f-f959-d379-5641-1c6c9d777649.png)
2. CreateProjectを押すと、プロジェクトが立ち上がります。

---

## ビルド設定

1. File⇒**Build Setting**を選択
2. WebGLを選択し、**Switch Platform**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/b41891da-693d-dfc1-59ff-5f3c19baf4c4.png)

---

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

UnityでWindow⇒PackaegeManagerから該当アセットをダウンロード、インポートを行ってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/9fbc019e-60a8-1500-7206-563bcf5b9140.png)

---

## シーンの作成
1. **Query-Chan-SD**をプレハブからシーンにドラッグ＆ドロップ
![Snapshot_8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/5be325de-1b54-e4bf-3a87-7746f319ed83.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/24e9d411-940e-b915-1389-da55edf408fd.png)

---


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

```csharp
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);
        }
    }
}
```

2. 実行ボタンを押し、WASDキーで移動してみましょう。スペースキーで飛行モードに切り替え可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/78e9711c-7b9f-4df9-ef5a-fac827348bde.png)
![Snapshot_13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/e510d24c-237d-3beb-c045-14fec46ec3f1.png)

---

## ビルド
1. キーボードで操作できたら、ビルドを行います。
2. **File**から**Build And Run**を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/a0aa4590-5326-fc9d-bd67-6736b27879e3.png)

3. 適当な名前のフォルダを作成し、実行
![Snapshot_14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/98780030-8068-05ba-e64c-0cbc7d201222.png)

4. ビルドが完了すれば指定のフォルダにビルドファイルが出力され、ブラウザが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/d238f743-b970-fd4f-90a9-1161b8707e7e.png)

![Snapshot_16.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950285/7b963ce5-2892-d738-e61b-bb43cad91f58.png)

---

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

---

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


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