In the last post, I’ve made a template for Unity WebGL build. The natural step now is to create a JavaScript plugin for that platform!
If you have experience in writing some JS code, this won’t be that hard for you. But if you haven’t got a chance to do so, I’ll explain each step. ?
Without further ado, let’s jump into creating it!
Prep work ?
The first thing we have to do is to create two files. The first one will contain our JS code, and the second one will be a wrapper for C#.
We should create both of them inside the Plugins > WebGL folder.
Let’s start with the JavaScript! We can call the file however we like, but we have to put a specific extension to it, which is “.jslib”.
Now, inside the file, we have to add our functionality. Unity, when building, will merge it with the build files.
So that’s why we have to use this file structure.
// Creating functions for the Unity mergeInto(LibraryManager.library, { // Code will go here... });
In JS, we can’t provide types for the variables and functions. In this example, we also have to define the object in the JSON format.
// Creating functions for the Unity mergeInto(LibraryManager.library, { // Function example CallFunction: function () { // Show a message as an alert window.alert("You called a function from this plugin!"); }, // Function with the text param PassTextParam: function (text) { // Convert bytes to the text var convertedText = Pointer_stringify(text); // Show a message as an alert window.alert("You've passed the text: " + convertedText); }, // Function with the number param PassNumberParam: function (number) { // Show a message as an alert window.alert("The number is: " + number); }, // Function returning text value GetTextValue: function () { // Define text value var textToPass = "You got this text from the plugin"; // Create a buffer to convert text to bytes var bufferSize = lengthBytesUTF8(textToPass) + 1; var buffer = _malloc(bufferSize); // Convert text stringToUTF8(textToPass, buffer, bufferSize); // Return text value return buffer; }, // Function returning number value GetNumberValue: function () { // Return number value return 2020; } });
Time for the C# side on our plugin!
Here, we are just exposing JS functions for the rest of our project. Just keep in mind having the same function and method names. ?
using System.Runtime.InteropServices; /// <summary> /// Class with a JS Plugin functions for WebGL. /// </summary> public static class WebGLPluginJS { // Importing "CallFunction" [DllImport("__Internal")] public static extern void CallFunction(); // Importing "PassTextParam" [DllImport("__Internal")] public static extern void PassTextParam(string text); // Importing "PassNumberParam" [DllImport("__Internal")] public static extern void PassNumberParam(int number); // Importing "GetTextValue" [DllImport("__Internal")] public static extern string GetTextValue(); // Importing "GetNumberValue" [DllImport("__Internal")] public static extern int GetNumberValue(); }
And we don’t have to do anything more with it. ?
Dealing with the text ?
Let’s take a closer look at functions handling text values.
When we receive a text inside the plugin, we will get an array of bytes, which might be hard to read for non-programmers… ?
To make it more readable, we will have to use the “Pointer_stringify()” function. That will convert that into the text.
// Function with the text param PassTextParam: function (text) { // Convert bytes to the text var convertedText = Pointer_stringify(text); // Show a message as an alert window.alert("You've passed the text: " + convertedText); },
The same goes for passing value back to Unity. We have to create a buffer and convert a text into a UTF8 byte array.
// Function returning text value GetTextValue: function () { // Define text value var textToPass = "You got this text from the plugin"; // Create a buffer to convert text to bytes var bufferSize = lengthBytesUTF8(textToPass) + 1; var buffer = _malloc(bufferSize); // Convert text stringToUTF8(textToPass, buffer, bufferSize); // Return text value return buffer; },
That’s because of how Unity is handling the strings. Luckily, this won’t be a case with numbers. ?
Result ?
With the plugin ready, we just need to slap some UI on top and build the whole thing!
How do you like it? Let me know in the comment section below! ?
If you know someone that might need this, share it with him! I would really appreciate that! ?
And if you are interested in getting emails when I release a new post, sign up for the newsletter!
The whole project is available at my public repository. ?
Hope to see you next time! ?
thanks a lot!
Instead calling window.alert function.i want to call some custom function residing in index.html..how shoul i handle the code in this case