PlayCanvas Extension Setup

This tutorial guides you through the process of setting up a PlayCanvas account and installing the VIVERSE Playcanvas Extension...

---

Pre-Requisites

• A VIVERSE Account

• Google Chrome

Create Your PlayCanvas Account

PlayCanvas is an open-source game engine that we have implemented in the frontend of VIVERSE. Creators will use the PlayCanvas Editor to publish fully-functional worlds to VIVERSE. PlayCanvas has options for both free and paid accounts. Paid accounts allow for extra storage and private projects.

Be sure to use the same email address to create your PlayCanvas account as you used for your VIVERSE account.

1

Begin PlayCanvas Account Setup

Navigate to PlayCanvas.com and click the Sign Up button to begin account creation.

2

Sign Up For A PlayCanvas Account

Fill out the Playcanvas Account form with the same email address that was used to create the VIVERSE Account to ensure integration, then click Sign Up.

3

Create A New Project

After logging into Playcanvas, click the New button to create a new Playcanvas project.

Install The PlayCanvas Extension

This guide is a walkthrough for adding Playcanvas Extension to the Chrome browser and will allow creation and publishing Scene of Playcanvas projects to VIVERSE.

1

Download The Extension

Download the latest version of the Playcanvas Extension.

2

Unzip The Downloaded File

3

Open Your Chrome Extensions

Click "Extensions" in the browser toolbar.

4

Open The Extension Editor

Click "Manage extensions" in the menu.

5

Enable Developer Mode

Enable Developer mode on the Extensions tab.

6

Load The Extension

Click Load unpacked on the Extensions tab.

7

Select The Unzipped Extension

Navigate to the folder where the extension was extracted. Click Select Folder.

8

Verify The Extension Set Up

Confirm the extension is enabled on the Extensions tab.

"Factory Reset" the VIVERSE Extension

At times, issues in the installation process can produce persistent bugs that are only fixed by fully resetting the VIVERSE extension.

1

Sign in & out of VIVERSE

Sign out of your account on viverse.com and then sign back in. MAKE SURE you are using the same email account as the one associated with your PlayCanvas account.

2

Delete VIVERSE entities from PlayCanvas project

Go back to your PlayCanvas project and delete: a. The Extension Entity from your scene hierarchy b. The @viverse folder from your project assets c. The extension-image folder from your project assets d. The extension-script folder from your project assets

3

Clear storage

Open the developer tools in Google Chrome, go to "Application", select "Storage" in the left hand toolbar and click the "Delete Site Data" button.

4

Refresh

Refresh your PlayCanvas project with the VIVERSE extension enabled

5

Sign in to PlayCanvas

Sign in to PlayCanvas when prompted. MAKE SURE you are using the same email account as the one associated with your VIVERSE account.

6

Sign in to VIVERSE sso

Sign in to VIVERSE from within your PlayCanvas project using the VIVERSE Scene Settings

Video Walkthrough

PlayCanvas Extension Download

Download the latest extension version

Change Log

Release Date	Version	Release Notes
4/29/2025	3.48.0	Add SDK support to functions IXrService -Methods: start -Methods: end Re-enable debugging in the browser -Align game_script.js behavior with esm.js to allow setting breakpoints Enable custom loading screen
4/16/2025	3.46.1	Add 'Enable Flying' option in VIVERSE scene settings Fixed turnToward method
4/9/2025	3.45.3	Add SDK support to functions IQuest -Methods: addCheckTask -Methods: addProgressBarTask -Methods: fire -Methods: getTaskById -Methods: off -Methods: on -Methods: reset -Methods: start IQuestService -Methods: addQuest -Methods: fire -Methods: getQuestById -Methods: getQuestByName -Methods: off -Methods: on -Methods: resetAllQuests ITask -Methods: fire -Methods: off -Methods: on IProgressBarTask -Methods: addProgress -Methods: fire -Methods: off -Methods: on
3/27/2025	3.45.0	Add SDK support to functions ILocalPlayer -Methods: resetToViverseAvatar IPlayer -Properties: avatar -Properties: network -Properties: nametag -Properties: profile IPlayerService -Properties: localPlayer -Properties: remotePlayers -Properties: playerCount Add enable/disable toggle of microphone and microphone permission function in “Player Config > Disable Microphone”
3/12/2025	3.44.12	Add SDK support to functions IXrController -Properties: handedness -Properties: inputSource -Properties: modelEntity -Methods: resetModelAsset -Methods: setModelAsset IXrControllerEvents -Properties: add -Properties: remove IXrService -Properties: controllers IXrServiceEvents -Properties: controller:addInput -Properties: controller:removeInput CameraService -Properties: canRotate -Properties: canZoom -ILocalPlayer -Methods: scaleAvatar
2/26/2025	3.44.7	Adding switchPov methods to change 1st & 3rd person POV through code
2/6/2025	3.43.1	Add 3 features in Trigger & Action - EntityAssetUnload, EntityAssetReload, EntityAssetDestroy
1/7/2025	3.40.7	Add post effects settings Add scene ownership check on publish tab
12/3/2024	3.38.0	Handle response err message from PlayCanvas server job api Fix service worker error
12/27/2024	3.36.4	Error handling when publishing the scene
10/21/2024	3.35.19	Support latest Chrome version

We created a PlayCanvas sample project based on Playcanvas extension 3.40.7, which contains several demos that you can try on your own.

Next Steps

Now that you have successfully set up your PlayCanvas account and installed the VIVERSE PlayCanvas extension, see the first steps of creating a project here.