Integrating Unity WebGL Build with ProtoPie Connect Web-Embed Layer
A comprehensive and detailed guide on integrating Unity WebGL build with ProtoPie Connect using web-embed layer.
![Jubilee Mayanja](https://cdn.sanity.io/images/qyzm5ged/blog/d80f7cd3ce39e2672c98ed9bdba6617a35bee931-2367x2800.jpg/Jubilee.jpg)
![Integrate Unity with ProtoPie Connect](https://cdn.sanity.io/images/qyzm5ged/blog/00a91b4aa28a74c1c1771f9e6f0b6215461cdb4b-2138x1200.jpg/Thumbnail-v1-(1).jpg)
Discover the robust capabilities of ProtoPie Connect, an essential prototyping tool for designers and developers alike. This guide details how to integrate Unity WebGL build files seamlessly with ProtoPie Connect, allowing you to refine user interfaces and optimize menu flows effortlessly.
Follow these clear, step-by-step instructions to embed your Unity WebGL builds into ProtoPie Connect using the Web-Embed layer. Embark on this transformative journey and take your design workflow to the next level.
Disclaimer: This tutorial requires using ProtoPie Connect Enterprise. For more information on ProtoPie Connect, please contact ProtoPie sales. Also, check out this Blog about ProtoPie Connect.
Overview
- Step 1. Building a WebGL File in Unity
- Step 2. Uploading to GitHub
- Step 3. Running your game in a web browser
- Step 4. Integrate with ProtoPie Connect
Step 1. Building a WebGL File in Unity.
1. Open your project: Start by opening your existing Unity project.
2. Switch Platform to WebGL
- Go to
File > Build Settings
. - Select
WebGL
from the platform list. - Click
Switch Platform
to change the build target to WebGL.
![Switch Platform to WebGL steps](https://cdn.sanity.io/images/qyzm5ged/blog/81ed6d4df9b787423189cf73b3b3bf14e6e60467-6220x2888.png/webgl1.png)
3. Configure Build Settings
- Go to
Edit > Player Settings
. - Customize settings under
Resolution and Presentation
according to your needs. This tutorial uses thePWA
setting for full-width resolution.
![Configure Build Settings](https://cdn.sanity.io/images/qyzm5ged/blog/1d6c3bd11d6d50762693441ec49fe28806b3b705-7676x3500.png/PlayerSettings.png)
💡 TIP: You might encounter a compression error when running your WebGL project in a browser from your host server, as shown below:
![WebGL file error](https://cdn.sanity.io/images/qyzm5ged/blog/09b2ab72a41a7702974d970ce5300d08feb4e248-797x450.png/Troubleshoot2.png)
If you encounter the above error when trying to run your webGL file, one solution is to change the compression format in Unity.
- Go to
Edit > Player Settings > Player > Publishing Settings > Compression format
. - Adjust the settings to fit your project's needs. This tutorial uses the "Brotli" compression settings to produce no running errors when hosting and running Unity WebGL projects from GitHub.
![Unity WebGL](https://cdn.sanity.io/images/qyzm5ged/blog/b7450fbfd900e2a48ae4d37f49436e90f8da8b83-2960x3728.png/compression-Settings.png)
4. Build the project.
- In the
Build Settings
window, clickBuild
. - Choose a location on your computer to save the build files and wait for Unity to compile the project.
![Build settings](https://cdn.sanity.io/images/qyzm5ged/blog/075365877be695b47a30f0d1c6a25460d72041d5-2604x2536.png/BUild.png)
Step 2. Uploading to GitHub.
1. Prepare your build for upload:
- Ensure that your build folder contains an
index.html
file along with the.js
and.data
files necessary for running the game.
![Uploading to GitHub](https://cdn.sanity.io/images/qyzm5ged/blog/dea961be36216217f3d86b626924b5f0a1d985e4-1108x222.png/Screenshot-2024-04-23-at-3.07.30%E2%80%AFPM.png)
2. Create a new repository:
- Log into your GitHub account.
- Navigate to the Repositories tab and click
New
. - Name your repository and set it to public (if you want anyone to access it).
- Create repository.
![Create a new repository](https://cdn.sanity.io/images/qyzm5ged/blog/a8bce00dd8844121113cd2b1ff65ae6941356af8-3392x3416.png/Group-2.png)
3. Upload files:
- Go to your repository’s main page and click the
uploading an existing file
link.
![Upload files GitHub](https://cdn.sanity.io/images/qyzm5ged/blog/aa5d3a14d27003d9c563647c5216c451f9e55ce9-1284x958.png/upload2.png)
- Drag and drop your build files or use the file navigator to select your WebGL build folder.
- Commit the changes directly to the main branch.
![WebGL build folder.](https://cdn.sanity.io/images/qyzm5ged/blog/c9428aa5212fe97545678dd2dd7ebe1e8fd5f968-3820x1792.png/uploadfile.png)
Step 3. Running your game in a web browser.
1. Enable GitHub pages:
- Go to your repository settings.
![Enable GitHub pages](https://cdn.sanity.io/images/qyzm5ged/blog/a7a7069b963714fcd4557ec17e9f9aa936c79659-4104x2508.png/settings.png)
- Scroll down to the
GitHub Pages
section. - Select the
main
branch and/ (root)
as the source. Save the settings.
![GitHub pages](https://cdn.sanity.io/images/qyzm5ged/blog/f9bc31c7cf4e9279cb9da9ccf28c594049942c19-5104x3828.png/gitHUb.png)
- GitHub will provide a URL where your project is hosted live. It might take a few minutes for the page to become active. Refresh the page after a few minutes to view the URL.
![GitHub pages](https://cdn.sanity.io/images/qyzm5ged/blog/6e3350accf528e42380741ca1ae1964869a2ce44-4856x3060.png/link.png)
2. Access your game:
- Once GitHub Pages is enabled and operational, visit the provided URL.
- Your Unity WebGL game should load directly in the browser.
💡 TIP: If you get an error 404 when you follow the provided URL, don’t panic. This happens if your files are in a sub-folder instead of the root folder.
![404 error](https://cdn.sanity.io/images/qyzm5ged/blog/858d093a5de65e98881b7327e00eb4b36970cc74-4708x2428.png/error.png)
As seen below our files are in subfolder /.._GamePlay/PP_rpg/
the root folder is /.._GamePlay
![Error 2](https://cdn.sanity.io/images/qyzm5ged/blog/d6505ca495906022ce992be489bb16af804340d8-5420x2284.png/error2.png)
To solve this just add the subfolder name to the URL link and the Unity project should run. In this tutorial adding /PP_rpg/
to the URL.
![Error 3](https://cdn.sanity.io/images/qyzm5ged/blog/e62631327305b9c2b5c9998e28da6fd137e5caae-5244x4132.png/ERROR3.png)
Step 4. Integrate with ProtoPie Connect.
1. Open Pie file in ProtoPie Connect
- Launch ProtoPie Connect and import your prototype, selecting either from the Cloud (Enterprise only) or uploading a local Pie file. Check your network settings and permissions to avoid connectivity issues when loading prototypes from the Cloud.
![pie file in ProtoPie Connect](https://cdn.sanity.io/images/qyzm5ged/blog/4519bc919cb57ccc793e149dfb3344ca3feda781-1033x551.webp/Pie-cloud.webp)
2. Create a group and view Pie file
- Create a
Group
, drag and drop to move your Pie file into the group. Click the web browser icon to open the Pie in a browser.
![View pie file](https://cdn.sanity.io/images/qyzm5ged/blog/93f460f402deea678eb1c32021ea17bc2a2ab211-3552x1064.png/connect01.png)
3. Edit group
- Right click on the page to view the ProtoPie Connect top bar menu UI and select
Edit
![Asset](https://cdn.sanity.io/images/qyzm5ged/blog/a942bb7338c40ee3dccc5f046061a3ed8e8e15bc-5580x3104.png/connect2.png)
- In Edit view click the
+Add
menu and select theWeb Embed
. - You can re-arrange layers within the layer window with drag and drop to set up a hierarchy.
- Resize the web view window according to your preference or project requirements.
- Copy the GitHub link from Step 3 and paste it into the Source input. The unity file will load and run.
![Connect embed](https://cdn.sanity.io/images/qyzm5ged/blog/dc9c2c2f96c53085be6021267b847c46732e98ff-5712x3716.png/connect4.png)
4. View Integrated prototype
- Select
View
at the top menu to go back to View mode - You can right click the mouse to hide the ProtoPie Connect top menu UI.
![View integrated prototype](https://cdn.sanity.io/images/qyzm5ged/blog/a3d522d168e972c8da12a5decc19814eeaca035c-5620x3082.png/connect5-(1).png)
Using the web-embed layer, you successfully integrated the Unity WebGL build into ProtoPie Connect. This integration enables an enriched interactive experience, allowing your Unity projects to be seamlessly incorporated within ProtoPie prototypes. As a result, you can now leverage the powerful 3D and game engine capabilities of Unity directly in your UX/UI designs, enhancing the realism and responsiveness of your prototypes.
Moving forward, you can explore further customization and optimization possibilities, ensuring that your prototypes meet and exceed user expectations.