TECHNOLOGY
- FRONT END

2024.06.27

2024.06.28

【Unity】Unityを使用したWebコンテンツの作成

こんにちは！6月1日からマーベリックスの一員になり、少しずつ仕事と生活に慣れてきた内野澤です。

私の前職は「ゲームプログラマー」です。
ゲームのキャラクターをプレイヤーの操作に合わせて動くようにしたり、敵のAIを作成したり、プレイヤーがアイテムを選択するUI(ユーザーインターフェイス)を作成したりとガリガリとコーディングをしてきました。

今回はそんな「ゲームプログラマー」だった技術を「Webエンジニア」として活かせないか考え
ゲームエンジンである「Unity」を使用した「Webコンテンツ」の作成についてご紹介します。

Unityとは

Unityはユニティ・テクノロジーズ社が提供するゲーム開発プラットフォームで、2D・3Dゲームを簡単に作成できます。
使いやすさと多機能で知られ、幅広いプロジェクトに利用されています。
また、初心者でも扱いやすく、無料で活用できる点も魅力です。

Unityのセットアップ

・Unityアカウントを作成する

https://unity.com/ja
Unityの公式ページにアクセスし、右上の人型のアイコンから「Unity ID を作成」を選択して
メールアドレスや名前を入力してUnityIDを作成してください。

・Unityをインストールする

UnityIDを作成してサインインした後、上記画像の真ん中にあるダウンロードから「Unity Hub」をダウンロードして、インストールします。

「UnityHub」はバージョン別のUnityソフトウェアを一括管理するマネージャソフトウェアです。
インストールの際の設定がある場合は、すべてデフォルトで大丈夫です。

「Install Unity Editor」ボタンをクリックして、インストールします。
これで、UnityEditorがインストールできました！

UnityEditorでwebで表示したいコンテンツを作成

では、早速web上で表示したいコンテンツをUnityEditorで作成してみましょう！

・NewProjectを作成する

UnityHubを開き、NewProjectをクリック

最初に使用するテンプレートを選択します。
今回は、「3D(Built-in Render Pipeline)を使用しましょう！

UnityEditorが開いたら左の「Hierarchy」エリアで右クリックして
以下の手順でオブジェクトを追加してみてください。

3D Object -> Plane で床を追加
3D Object -> Cube で立方体を追加

床と立方体の位置を調整しておきます

HierarchyのPlaneを選択し、Positionを(0, 0, 0)に設定
CubeのPositionを(0, 1, 0)に設定
PlaneのPositionを(0, 0, 0)に設定

フィールドに平面と立方体を綺麗に並べることができました。
それでは、このアプリケーションを一旦Webページとして確認して見ましょう。

Webページで確認してみる

File -> BuildSettingを開きます

開いたウィンドウで以下の順番にビルドをしてみましょう！

①Add Open Scenesを使用して、開いているSceneをBuild対象に加えます。
②PlatformをWebGLに変更します
③Switch Platformボタンをクリックして、プラットフォームをWebGLに変更します

しばらく待つと、プラットフォームの切り替えが終わり、「Build And Run」が実行可能になります！
では、Build And Runを実行して見ましょう。
クリックすると、保存先を聞かれますので適当な保存先を指定してくださいね。
ビルドが終わると、自動的にローカルサーバーが起動し、ページが確認できます！

無事、Webページが開いたでしょうか？
UnityEditorで作成した画面がWebページ上で確認ができるようになりました！！

UnityコンテンツとWebページの連携

それでは、WebとUnityで作成したコンテンツを連携してみましょう〜！

連携するには？

Unity 側からWeb側のJavaScript を呼び出す方法は、以下の関数を使ってJavaScriptコードを起動することができます。

Application.ExternalCall();
Application.ExternalEval();

一方、ブラウザからJavaScriptを使ってUnity側のメソッドを呼び出すには、以下のコードを使用できます。

unityInstance.SendMessage ('MyGameObject', 'MyFunction', 'foobar');

こちらを使用して、WebページからUnityアプリケーションへの連携をしてみましょう。
ビルド結果を保存した箇所を確認すると、index.htmlが格納されています。

開いてみると、Unityアプリケーションを埋め込むコードが記載されていますね。
ここに、ボタンなどを設定してUnity側のコードを呼び出すようにすれば
WebページからUnityアプリケーションの操作が可能になりそうです！

Unity側にCubeの色を変更する関数を用意する

Assetsウィンドウで、右クリック→Create→Folderで新しいフォルダを作成します。
フォルダの名前は「Materials」にしてください。

Materialsフォルダに入り、右クリック→Create→MaterialでCubeに適用するマテリアルを作成します。
マテリアルとは、オブジェクトの色等の表示の設定を行う素材のようなものです。
マテリアルの名前は「CubeMaterial」とします。

CubeにCubeMaterialを適用します！
ドラッグ＆ドロップでCubeMaterialをCubeに渡してください。
これで、Cubeの色を変更できるようになりました！

Webページから呼び出すUnity側の処理を実装する

いよいよ、コーディングです。
CubeオブジェクトにC#スクリプトを設定して色を変更する部分を作成します！

Scriptsフォルダを作成する

Assetsウィンドウで右クリック→Create→Folder
を実行し、新しいフォルダを作成し名前を「Scripts」としてください。

Cubeの色を変更するスクリプトを作成

Scriptsフォルダ内に入り、右クリック→Create→C# Script
を選択しスクリプトを作成します。
名前を「CubeColorChange」としてください。

CubeColorChange.csを開き
public class CubeColorChange
以下を下記のプログラムに書き換えてみてくださいね。

public class CubeColorChange : MonoBehaviour
{
    private MeshRenderer meshRenderer;

    // Start is called before the first frame update
    void Start()
    {
        meshRenderer = GetComponent<MeshRenderer>();
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ChangeColor(string str){
        if(str.CompareTo("red") == 0){
            meshRenderer.material.SetColor("_Color", new Color(255, 0, 0, 1));
        } else if( str.CompareTo("blue") == 0){
            meshRenderer.material.SetColor("_Color", new Color(0, 0, 255, 1));
        } else if( str.CompareTo("green") == 0){
            meshRenderer.material.SetColor("_Color", new Color(0, 255, 0, 1));
        }
    }
}

作成したCubeChangeColor.csをCubeへドラッグ＆ドロップして、スクリプトをオブジェクトに設定します。

これで、Unity側の準備は完了です！
HTML側の実装を行いましょう。

HTML側にボタンを用意して、Unityアプリ側のCubeの色を変更する

さぁ〜WebページからUnityアプリケーションを操作できるのか
わくわくしてきましたね！今回は簡単に実装を行なってみます。

index.htmlを開いて10行目の<body >の下に以下のボタンテーブルを追加します。

<tr>
  <th><button type="button" id="btn_red" onClick='changeCubeColor("red")'>赤に変更</button></th>
  <th><button type="button" id="btn_green" onClick='changeCubeColor("green")'>緑に変更</button></th>
  <th><button type="button" id="btn_blue" onClick='changeCubeColor("blue")'>青に変更</button></th>
</tr>

script部分にボタンイベントを受け取る関数を追加します。

<script>
...
var myUnityInstance = null;
function changeCubeColor(msg){
    myUnityInstance.SendMessage("Cube", "ChangeColor", msg);
}
...
</script>

index.htmlの下部の方に以下と同様なコードがあるため
ここで、myUnityInstanceにUnityアプリのインスタンスを渡します。
コピペしても問題ありません！

     script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                myUnityInstance = unityInstance;

                loadingBar.style.display = "none";
                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                };
              }).catch((message) => {
                alert(message);
              });
            };

何をやっているのか？

index.htmlが開くと、createUnityInstanceが呼ばれUnityアプリケーションが起動します。
その開いたアプリケーションのインスタンスをmyUnityInstanceで保持しています。
用意したボタンをクリックするとchangeCubeColor関数が呼ばれ
myUnityInstance.SendMessageで、Cubeオブジェクトに追加したCubeColorChange.csのChangeColor関数にmsgを引数として実行しているという流れになります。

動作確認してみよう

ついに動作確認です！
Unityのメニューから、File->Build And Runを実行すると
完成したWebページが開きます

ボタンをクリックすると、アプリ内のCubeの色が変わります！

最後に

いかがでしたでしょうか？
今回はUnityとWebコンテンツの連携方法をご紹介しました。

Unityで作成できるコンテンツは主にゲームですが
例えば3Dビューアなども作ることができるので
Webからユーザが選択した情報をUnityに送信して、
Unity側でその情報を元に服や家具などのモデルを表示したり
可能性は色々広がりますね！

今回は簡単な連携を試してみました。
さらに高度な連携も可能なので、また続きを書いてみようと思います！

それではまた！