Skip to content

Commit c0ad3cd

Browse files
authored
Merge pull request #298 from immutable/feature/dx-3321-webgl-quickstart
[DX-3321]webgl quick start guide
2 parents 3bbb2c1 + 86c0e3c commit c0ad3cd

27 files changed

+340
-3
lines changed

.github/workflows/linter.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ jobs:
5757
VALIDATE_ALL_CODEBASE: true
5858
DEFAULT_BRANCH: main
5959
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
60-
FILTER_REGEX_EXCLUDE: (.*src/Packages/Passport/Runtime/ThirdParty/.*|.*src/Packages/Passport/Runtime/Resources/.*|.*Plugins/.*|.*src/Packages/Passport/Runtime/Assets/ImmutableAndroid.androidlib/.*|.*src/Packages/Orderbook|.*sample)
60+
FILTER_REGEX_EXCLUDE: (.*src/Packages/Passport/Runtime/ThirdParty/.*|.*src/Packages/Passport/Runtime/Resources/.*|.*Plugins/.*|.*src/Packages/Passport/Runtime/Assets/ImmutableAndroid.androidlib/.*|.*src/Packages/Orderbook|.*sample|.*src/Packages/Passport/WebGLTemplates)
6161
VALIDATE_MARKDOWN: false
6262
VALIDATE_GITLEAKS: false
6363
VALIDATE_JSCPD: false

WebGL.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Implementing Immutable Unity SDK for WebGL
2+
3+
This guide provides focused instructions for implementing the Unity-Immutable-SDK in WebGL projects.
4+
5+
For general information on the SDK, please refer to
6+
the [Immutable Unity SDK documentation](https://docs.immutable.com/sdks/zkEVM/unity).
7+
8+
Live example can be found at https://immutable.github.io/unity-immutable-sdk/sample/webgl
9+
10+
## WebGL Template Setup
11+
12+
WebGL template is a configuration setting that lets you control the appearance of the HTML page, so that you can: test, demonstrate, and preview your WebGL application in a browser.
13+
14+
A WebGL Template is always needed for creating a WebGL application and it will always be stored within **Assets > WebGL Templates** to be used. You can refer to [Unity: WebGL Templates](https://docs.unity3d.com/Manual/webgl-templates.html) for more information.
15+
16+
A Custom WebGL Template is required to implement the Immutable Unity SDK in WebGL projects. The easiest way to create a new custom WebGL template is to make a copy of the built-in Default or Minimal templates, which are stored in corresponding subfolders under <Unity Installation> > PlaybackEngines > WebGLSupport > BuildTools > WebGLTemplates.
17+
18+
Every Unity Project includes these templates by default. Copy a template and place it in your own **Assets > WebGLTemplates** folder, and rename it to something meaningful so you can identify your template later.
19+
20+
Once you have created your own template, copy the following files from Passport package into the **Assets > WebGLTemplates** folder:
21+
- `Packages/Immutable Passport/WebGLTemplates~/unity-webview.js`
22+
- `Packages/Immutable Passport/WebGLTemplates~/callback.html`
23+
- `Packages/Immutable Passport/WebGLTemplates~/logout.html`
24+
- `Packages/Immutable Passport/Runtime/Resources/index.html` > `Passport/index.html`
25+
26+
3. Add the following script tag to the `index.html` in WebGL Templates:
27+
```html
28+
<script src="unity-webview.js"></script>
29+
```
30+
31+
## PKCE Login and Logout Implementation
32+
> [!IMPORTANT]
33+
> WebGL supports only PKCE flow.
34+
35+
Follow these steps for implementation:
36+
> [!NOTE]
37+
> You can rename `callback.html` and `logout.html` to suit your project needs.
38+
1. Define a deep link scheme for your game:
39+
- Redirect URL: https://game.domain.com/callback.html
40+
- Logout URL: https://game.domain.com/logout.html
41+
42+
2. Configure Immutable Hub:
43+
- Login to [Immutable Hub](https://hub.immutable.com)
44+
- Add these deep links to your client's Redirect URLs and Logout URLs
45+
46+
3. Update Passport initialisation:
47+
```csharp
48+
using System.Collections;
49+
using System.Collections.Generic;
50+
using UnityEngine;
51+
using Immutable.Passport;
52+
53+
public class InitPassport : MonoBehaviour
54+
{
55+
private Passport passport;
56+
57+
async void Start()
58+
{
59+
string clientId = "YOUR_IMMUTABLE_CLIENT_ID";
60+
string environment = Immutable.Passport.Model.Environment.SANDBOX;
61+
string redirectUri = "https://game.domain.com/callback.html";
62+
string logoutRedirectUri = "https://game.domain.com/logout.html";
63+
passport = await Passport.Init(clientId, environment, redirectUri, logoutRedirectUri);
64+
}
65+
}
66+
```
67+
68+
## Building for WebGL
69+
1. Go to File > Build Settings
70+
2. Select WebGL as the target platform
71+
3. Click "Build And Run"
72+
4. Choose a directory for the build output
73+
Your WebGL application will open in your default web browser once the build is complete.
74+
75+
For a complete working example, refer to the sample application in the SDK repository.

sample/Assets/WebGLTemplates.meta

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview.meta

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/Passport.meta

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/Passport/index.html.meta

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/TemplateData.meta

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/TemplateData/MemoryProfiler.png.meta

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/TemplateData/favicon.ico.meta

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

sample/Assets/WebGLTemplates/unity-webview/TemplateData/fullscreen-button.png.meta

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)