Help us understand the problem. What is going on with this article?

UnityのWebGLで外部JavaScriptライブラリを使う

More than 1 year has passed since last update.

概要

UnityのWebGLプラットフォームで、FirebaseやStripeといった外部サービスのJavaScriptライブラリを使いたかったので、そのときに必要だった手順をまとめました。

WebGLTemplatesの用意

公式ページにあるように
Assets/WebGLTemplates/テンプレート名/
に以下のファイルを作成します。
使いたいライブラリも記述します。

index.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <!--使いたいライブラリを追加-->
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
    </script>
  </head>

  <body>
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>  
</html>

C#←→JavaScriptの連携について

C#とブラウザのJavaScriptと連携する方法も公式ページにあります。
軽く手順説明します。

C#→JavaScript

Assets/Plugins/
以下にこのようなファイルを作成します。

test.jslib
mergeInto(LibraryManager.library, {
  Hello: function () {
    //外部ライブラリを使った処理
  },
});

そして以下のようなコードを書き、WebGLでビルドすると
C#からtest.jslibのHello関数を通して、外部ライブラリの処理呼ぶことができます。

NewBehaviourScript.cs
using UnityEngine;
using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Hello();

    void Start()
    {
        Hello();
    }
}

JavaScript→C#

話が脱線しますがこちらも
WebGLTemplatesのindex.htmlでこのように書きます。

index.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
    gameInstance.SendMessage('MyGameObject', 'MyFunction', 5);
    </script>
  </head>

  <body>
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>  
</html>

公式ページに明記されてないと思いますが、以下のように書く必要がありました。

    gameInstance.SendMessage('MyGameObject', 'MyFunction', 5)

ちょっと工夫

jslibにコードを書いて動作確認をするには、毎回プロジェクトをビルドする必要があります。(よね?)
結構時間がかかって大変だったので、私はWebGLTemplatesにJavaScriptファイルを作成して
ビルド後に一緒に吐き出されるそのファイルを編集して確認していました。

また、index.htmlにボタンを追加し、jslibからは実行せずに、そのボタンによってJavaScriptの処理が実行されるようにしました

動作的には
  1. シーンに応じてC#→jslibでボタンを有効化無効化 (タイトル画面でログインボタンを有効にするとか)
  2. ボタンでJavaScriptを実行
  3. JavaScriptの処理結果をC#に渡す

という感じです。

記事を書いたときの環境

Unity 2018 3.8f1

void_vtuber
VRChatでスポーツ系のゲームワールドを作っている
https://twitter.com/void_vtuber
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした