Unity WebGL通過jslibPlugin與android溝通

發表於 分類於 評論數：
文章字數： 4.7k 所需閱讀時間 ≈ 8 分鐘

最終目的為
- Unity WebGL通過jslib Plugin跟Web交互
- Unity WebGL通過jslib Plugin跟android溝通

第一部分 - Unity WebGL通過jslib Plugin跟Web交互

1. 創建jslib


[WebGL:Interacting with browser scripting](https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html)

通過官方文件可以得知，可以使用在Plguins底下建立.jslib的庫來跟網頁的溝通，jslib是javascript語言，之間的溝通也是透過javascript

這部分直接在Asset/Plugins資料夾底下建一個text檔將後綴名改成.jslib就完成了

text檔的內容：

1
2
3
4
5
6
7
8
9
10
11
mergeInto(LibraryManager.library, {

    Hello: function () {
    window.alert("Hello, world!");  //跳出視窗通知 - Hello,world
  },

  HelloString: function (str) {
    android.ShowString(Pointer_stringify(str)); //使用Pointer_stringify方法轉換unity傳遞過來的字符串
  },

});

第一個function “Hello: function”是為了實現與WebAPI交互，內容也很簡單，只是使用了WebAPI中的window.alert
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/alert

第二個function是為了實現WebGL通過jslib Plugin跟android溝通
需要定義一個對象與android交互，下一步就會在android端製作相同的對象
“android”為自訂義物件，也可以取名為其他的，只要不要跟webAPI有相同就好
“ShowString”為自訂義的方法，將會對應在android端的方法

2. 在unity內創建WebviewTest.cs分別對應jslib內的兩個function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class WebviewTest : MonoBehaviour {

    [DllImport("__Internal")]
    private static extern void Hello(); //分別對應第一點所製作的function

    [DllImport("__Internal")]
    private static extern void HelloString(string str);

}

然後建立兩個按鈕當介面來呼叫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
public class WebviewTest : MonoBehaviour {
    
     
    [DllImport("__Internal")]
    private static extern void HelloString(string str);

    [DllImport("__Internal")]
    private static extern void Hello();


    public string SendString = "HelloString - yo";
    public void HelloStringBtnClicked()
    {
        Debug.Log("call-js-HelloString(" + SendString + ")");
        HelloString(SendString);
    }
    
    public void HelloBtnClicked()
    {
        Debug.Log("call-js-Hello()");
        Hello();
    }
}

這樣第一個效果
Unity WebGL通過jslib Plugin跟Web交互
就完成了，將專案輸出成WebGL，直接用網頁開的話，就可以使用第一個按鈕[Hello] 達到

第二部分 - Unity WebGL通過jslib Plugin跟android溝通


這個實作情境是想要在android的webview上開啟unity輸出的webGL檔，並且unity內的東西可以傳遞資訊給android， 這邊用按下unity內的按鈕後，會跑出android的訊息視窗來當範例

webGL遊戲上傳到網路空間，
這邊用 https://cheesegames.net/ 來當測試的空間

1. 創建一個空的ANDROID專案

這邊就不詳細說創建過程，就一般怎麼創android專案就怎麼創，創建完後要修改activity_main.xml，在這之中加入WebView的控件，或本來就有專案內來就有Webview控件則跳過這邊。

修改完後目前activity_main.xml長得像這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xmlversion="1.0"encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<WebViewxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>

</android.support.constraint.ConstraintLayout>

2. AndroidManifest.xml 加入網路許可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xmlversion="1.0"encoding="utf-8"?>
<manifestxmlns:android="http://schemas.android.com/apk/res/android"
package="com.nuwa.unity.unitywebview">

<uses-permissionandroid:name="android.permission.INTERNET"/> //加這一行而已
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activityandroid:name=".MainActivity">
<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>

<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>

3. MainActivity內接入webView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class MainActivity extends AppCompatActivity {


private WebView webview;

@Override
protected void  onCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView webview = (WebView)findViewById(R.id.web_view);
webview.getSettings().setJavaScriptEnabled(true);//設定此WebView支援Javascript
webview.setWebViewClient(newWebViewClient());//不調用系統瀏覽器


webview.addJavascriptInterface(newJSBridge(),"android");//第一個參數是javascript對應java的物件，第二個則是js中要呼叫該物件的方法就是通過這個來呼叫，也就是對應一開始的寫的jslib內的android.ShowString(Pointer_stringify(str));的android對象
webview.loadUrl("https://cheesegames.net/games/2747/index.php?gameDataId=2747"); //這邊的網址就是最上面說的"上傳WebGL遊戲"的網址


    public class JSBridge{
  
      @JavascriptInterface
      //從Unity端可以呼叫到的function，ShowString對應一開始的jslib內的android.ShowString(Pointer_stringify(str));
      public void ShowString(Stringmessage){
      Toast.makeText(getApplicationContext(),"通過Natvie傳遞的Toast:"+message,Toast.LENGTH_LONG).show();
      } 
    }
  }
}

輸出後，在android上面打開後，在UNITY遊戲內按下按鈕就會跑出android的訊息啦~

附上源碼 ： github

UnityWebGL2WebApi

UnityWebGL2WebView