Quick Start Guide

This guide describes the features of the Prysm integration in Unity3D. A basic understanding of the Unity3D engine, as well as HTML/JavaScript is assumed.

Brief overview

Prysm is a modern user interface middleware solution that allows you to integrate HTML pages built with CSS and JavaScript in your game. The communication between your game and the HTML engine is done through the CohtmlUISystem component. Each HTML page is called a CohtmlView. The CohtmlView component allows you to perform operations on the page, such as resizing, navigating to a different URL, sending input events and so on.

Installation

Prysm for Unity3D is distributed as an archive for the Unity3D package manager You can import the archive into your project by following these steps:

  1. Open your project in Unity3D Editor.
  2. Extract the Prysm archive in your preferred location.
  3. From the menu bar choose Window -> Package Manager -> Plus sign -> Add package from disk…
  4. Use the file chooser dialog to navigate to the folder you extracted the archive in.
  5. Double click on the package.json file, located in the extracted Prysm archive.
  6. The Unity3D importing process should start automatically

Trial versus Pro versions

The trial version includes a 30-day trial license key. After the key expires you won’t be able to initialize Prysm and an error message will be logged in the console.

The pro version requires entering your license key first. The license key is located at Standard Assets/Cohtml/Detail/License.cs. You should’ve received this file already prefilled with your license key when you purchased the pro version. Replacing the existing empty License.cs file from the package with the provided one will activate Prysm.

Package contents and structure

The UPM package has the following structure:

The root folder of your package should be located in the Packages/Cohtml folder of your project.

  • Editor - contains the editor scripts for Prysm. It will be ignored when building.
  • Plugins - contains the Cohtml libraries. These are automatically copied when building.
  • Runtime - contains the Prysm integration classes. You’ll find a Detail folder inside which contains classes that are internal for the implementation and are used by the “public” classes. The interface you should be using is in the Components folder:
  • CohtmlView.cs - component used for displaying html pages.
  • CohtmlUISystem.cs- component used to initialize and manage the UI.
  • StreamingAssets/Cohtml/UIResources - contains the UI resources for Prysm.
    • These are automatically copied when building.
    • You can also load resources from your custom locations
  • Documentation - Offline content for Prysm documentation.
  • Native Player~ - The folder contains the native Player and Player Overrides project.

Mac OS damaged bundle

When starting a project on Mac OS, you may have bundle importation problems. This issue was caused when downloading the Prysm package from the web, in Mac version 11 (Big Sur) and above.

If you have that issue with Prysm, you can solve it when ignoring the bundles manually from Mac quarantine. Execute the line below in the terminal:

xattr -dr com.apple.quarantine <bundles_directory>

Add a view to your scene

In Prysm there are two types of views - Screen and World views, the first is generally used for HUDs and menus, while the latter can be used for in-game UI elements (i.e., interactions between the player and the game) positioned in the 3D world.. Let’s start by creating and displaying a simple HTML page named HelloHTML.html

Create an HTML file and place it in the UIResources folder (By default, this is the Assets/Streaming Assets/Cohtml folder.). The page will be displayed instead of a HUD, so click on the MainCamera (it will be the GameObject on which the HTML will be attached), open Prysm (in the main menu) and choose Add Screen View. Go to the Page property of the view and set the relative URL of the HelloHTML page here, for example, coui://uiresources/HelloHTML.html. Click Play and you’ll see the result.

Samples

Prysm comes with several predefined example scenes, showcasing some of the features and capabilities of the product. To preview them, you need to install them manually, as shown below.

  • Open the Package Manager menu and select the Prysm package. On the right panel click Import.
  • Navigate to Assets/Samples/Cohtml/[Version]/[SampleFolder]/[SampleName].unity. This step will import the UI resources for the CohtmlView automatically inside the Assets/StreamingAssets/Cohtml/UIResources/[SampleScene] folder and will import the scene inside build settings.
  • You can use the HelloSample to browse all scenes provided by Prysm. Start the game from that scene.
  • You can add all samples by clicking on ContextMenu -> Prysm -> Samples -> Import All.
  • If you want to delete the Prysm example scenes navigate to ContextMenu -> Prysm -> Samples -> Remove All. That action will remove the samples:
    • From Assets/Samples
    • From Assets/StreamingAssets/Cohtml/UIResources
    • From Build settings.
  • In the package, you can also find the uiresources folder in the Samples~ folder, where you can discover numerous sample web pages to help you speed up the UI development process. To import them automatically, you can use the button from ContextMenu -> Prysm -> Samples -> Import Frontend Samples. This operation will move the folder to your project at the location Assets/StreamingAssets/Cohtml/UIResources/. From there, you can then attach each page to the desired CohtmlView in your scenes.

Remove samples from UPM package

If you want to remove the samples entirely from the UPM package, you need to do it by navigating to the sample specific locations and deleting all files

  • UPMPackage/Samples~ - Contains Unity assets and HTML resources for all samples.
  • UPMPackage/Resources/Cohtml/SharedImages/ - Preloaded images location. Remove all files in the folder, except for the ones you have placed there.
  • UPMPackage/Resources/Fonts - Preloaded fonts location. Remove all files in the folder, except for the ones you have placed there.
  • UPMPackage/Editor/ResourcesImporter.cs. - Script that automatically imports the samples after being added via UPM.
  • UPMPackage/package.json - Contains a list of JSON samples in an array, which uses the UPM API to import each sample individually. To avoid displaying them at all, you can delete only the sample array key in the JSON.