Starting with PlayCanvas Toolkit
Learn how to install VIVERSE Chrome Extension for PlayCanvas Editor, create your first world and publish it to VIVERSE for everyone to see
Introduction
PlayCanvas is an open-source game engine designed to advance the development of 3D web games, interactive content and rich multimedia. Unlike similar WebGL engines like Three.js or Babylon, PlayCanvas comes with sophisticated in-browser Editor (inspired by early Unity 2.x - 3.x), which provides its users with a rich set of tools — allowing to assemble scenes from imported assets, setup realtime and baked lighting, write custom scripts, create animation graphs, and much much more.
To make creator experience even smoother, VIVERSE has developed a special Extension for Chrome browsers which extends PlayCanvas Editor functionality with additional set of no-code tools and publishing options. It provides common building blocks like Triggers, Actions and Quests, enables Player locomotion and Avatar system in your project, and allows one-click testing and publishing right from the Editor.
Below is a useful set of tutorials to help you get started with VIVERSE PlayCanvas Extension. We assume you're already familiar with PlayCanvas Editor itself and have PlayCanvas account. If not, please feel free to explore PlayCanvas User Manual first!
Install PlayCanvas Extension
Get the latest Extension from VIVERSE
Download the latest version of Playcanvas Extension
Unzip downloaded file on your computer
Create and publish your first project
Before proceeding any further, we assume you're familiar with the basics of PlayCanvas Editor. If you're looking for a comprehensive introduction to it — please refer to a dedicated PlayCanvas Editor Manual first!
Initialize your new project
Create a new PlayCanvas project or open an already existing one
Make sure VIVERSE Extension is properly initialized — you should see ExtensionEntity in your scene hierarchy and
@viversefolder added to your project. Refresh the page if it's not the caseLogin into VIVERSE via dedicated button in the left toolbar. Once logged in, you should see VIVERSE Scene Settings button there
Setup 3D environment
First, delete default Camera in Scene Hierarchy. The Extension will provide its own Camera system that will be added to your Scene at runtime
Import Ammo physics library and add a Floor plane with Collision component and static Rigidbody. This is crucial because VIVERSE Player system relies on built-in PlayCanvas physics engine for moving around. Without a floor, your player will be simply falling through
Add additional geometry and lights if want!
Create a Spawn Point
In order for a Player to appear in your world, it should be spawned somewhere first. VIVERSE Extension provides a convenient way to control that!
Simply create a new empty Entity in your scene and add
spawn-pointtag to itMake sure it's positioned at the floor level or above. Feel free to rotate it to change the initial orientation of your Player
Preview your project
Once you have a walkable floor and a spawn point, it's time to test your project live!
Go to the Publish / Download menu and open the Builds popup window. In that window, click Publish to Viverse button and wait until your project is successfully uploaded
Once it's uploaded and ready, the Preview button should appear. Clicking it will open your project in a new tab, in preview mode. This preview URL is public and you can share it with your friends and colleagues to test the current version of your work
Return back to PlayCanvas Editor and modify your project as you see fit. Keep publishing and previewing to see your most recent changes live in VIVERSE environment
Final: Create a VIVERSE World for your project
After confirming everything is working correctly in preview mode, you can publish your project to production environment!
In preview mode, click "Create World" button, give your World a name and click the "Create" button to publish it to the VIVERSE Create platform
The resulting URL is the public link to your World. You can return back to your project any time and republish an updated version as you see fit
Feel free to configure your World Settings as well
"Factory Reset" PlayCanvas Extension
Sometimes issues in the installation process can produce persistent bugs that are only fixed by fully resetting the Extension. If you're experiencing these bugs please follow the steps below
Clear Application Storage
Open the Developer Tools in your Chrome brower, go to "Application", select "Storage" in the left hand toolbar and click the "Delete Site Data" button
Last updated
Was this helpful?