u3d js交互 Android,Unity WebGL通過jslibPlugin與android溝通

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

最終目的為

- Unity WebGL通過jslib Plugin跟Web交互

- Unity WebGL通過jslib Plugin跟android溝通

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

11mergeInto(LibraryManager.library, {

Hello: function (){

window.alert("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內的兩個function1

2

3

4

5

6

7

8

9

10

11

12

13

14using System.Collections;

using System.Collections.Generic;

using System.Runtime.InteropServices;

using UnityEngine;

public class : 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

23public class : 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

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">

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent">

2. AndroidManifest.xml 加入網路許可1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

package="com.nuwa.unity.unitywebview">

//加這一行而已

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">

3. MainActivity內接入webView1

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

29public 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