Creating JS Plugin for Unity WebGL

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.

WebGL plugin 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!

Using our custom plugin
Using our custom plugin

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! πŸ€“

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments