Unity: WebGL Add a Share Button
Creating and releasing a game is already a big achievement! But without strong media support it will most likely stay unnoticed to the masses. One of the easiest and cheapest ways to get some attention is to engage with the existing group of users and let them invite new ones. That can be achieved by adding a
Share button. In this tutorial I’ll show you how to add one to your WebGL game.
Spoiler alert — it is harder than it sounds.
I’m using Unity 2021.2.13. This tutorial will re-use the code from my previous one — Unity: Create your own Wordle in under 24 hours. Make sure to check it beforehand.
As always, project sources are available at GitHub, find the link at the end of the page.
Part 1. Preparation
We will start off by checking how the sharing functionality works in Wordle. We can see that the behavior is different for mobile and desktop devices:
- For desktop the results are only copied to clipboard
- For mobile the native browser Share popup is shown
There is no copying of results on the Mobile version of original Wordle. Nevertheless, I decided to keep it for our clone version.
At this point the scope of changes is clear, so let’s create a
Share button first. Just like in the original game, we will add the button on the
Then, we will create a public
Share method in the
Statistics script and attach it to the button:
Lastly, we will implement the
Share method. For now it will simply outprint the results in
Debug.Log. It will require both the final result line number and the colors of each line’s cells that will be used to match one of the following emojis: 🟩, 🟨, ⬜
Line script will be extended to provide the color of each cell:
Also, the previously created
ErrorPopup script has been renamed to
If you run the game now, finish a level and copy the results from the Unity console you will see the following:
Note! I encourage you to check the changeset at Github.
Now the groundwork is done, let’s see if Unity supports Clipboard functionality.
One of the first code snippets found on the Internet will be this one:
GUIUtility.systemCopyBuffer = valueToCopy;. Whilst it works fine for Editor (and presumably for Mobile) it doesn’t work for WebGL games.
Next result you will most likely stumble upon will be using a
Same story here — it works in Editor, but WebGL doesn’t support it.
And finally, you will find a couple of plugins that add Copy’n’Paste capabilities, but after looking at some of them I decided that it will be easier to write my own implementation.
In order to access js code from C# we will need to create a new js script with
jslib extension and place it under a
Plugins folder. Also, the file should have a predefined structure, such as:
Please, refer to the official documentation for more details.
Let’s create a new JS file —
share.jslib where we will declare a
CopyToClipboardAndShare function responsible for copying and sharing.
- As with everything else in the JS world, there are multiple ways to copy the data to the clipboard. In order to get the maximum coverage we will use modern Navigator Clipboard API with the fallback to
- In order to trigger the share popup on mobile devices we will use Navigator Share API. Identifying the mobile device is not an easy task and the approach here relies on the
Lastly, with the help of
DllImport we will call that method in the
If you run the game using the Build And Run button now and press the
Share button the text will be copied to the clipboard. And if you deploy the game to your server and run it from the mobile device you will see the share popup.
Well done finishing the tutorial! Now you know how to add a WebGL specific share button to your game.
Should you have any questions please leave them in the comments section below.
You can check it all in action in Categorle, a variant where you are guessing a word 4–7 letters long in a given category.
For the most comprehensive list of Wordle-like games and resources online be sure to check out this page.
If you like the content you read and want to support the author — thank you very much!
Here is my Ethereum wallet for tips: