Canvases

This page goes over the topic of canvases

Canvases Video Tutorial

A Canvas can display a linked image from a public URL. It is also possible to display a live stream as well. The space owner can update these links after the space has been minted.

On top of displaying content, an external website can also be linked when you click on the canvas in the Mona Space.

The supported files are as follows :

Images	Streaming
.png	.m3u8
.jpg
.gif (inc. animated gifs)

At the moment there have been reported issues using animated Gifs. If your space crashes when loading and it has a number of gifs in the space, try reducing or removing them to see if that fixes the issue.

Currently, the Canvas has two methods of applying the image to the canvas :

Fit Media inside Canvas

This option will crop the Image to the canvas, cutting off the left and right for a Landscape image, or top and bottom for a portrait image.

Scale Canvas down to Media Size

This option will reduce the canvas model vertically or horizontally to the image that it is linked to. The bounds of the Canvas will be the maximum size of the Canvas in the Mona space.

A Frame is the optional object that houses the canvas. The frame does not scale due to the potential skewing of the object and its textures.

Spaces currently load every image at once before the space is loaded, so it is important to keep canvas count and image filesize as low as possible.

It is recommended to have no more than 50 canvases in a space. Images should be less than 2000x2000 pixels in size and less than 2-5 MB, especially if you have a lot of canvases. Of course, less is better for load times, but this is a good guide to keep under.

Depending on the optimization of the space, the number and size of the canvases do play a part in how well it runs.

Adding a canvas

• Drag the 'CanvasPrefab' asset found under '_MonaAssets' in the Project window under the Artifacts gameobject in the Artifacts scene.

• Rename the 'UniqueCanvasName_1' asset to something that represents the canvas, eg. location.

• If you want to scale your Canvas, make sure to scale the 'UniqueCanvasName' object. Do not scale the parent CanvasPrefab asset in order to reduce issues.

If you change the Unique Name object of a Portal, Artifact, or Canvas, there is a chance all of these links will be reset. Keep that in mind when setting up your space.

For more information on linking the canvas once it has been added to the space and uploaded onto your wallet, go to Add Images to a Canvas.

This tutorial is in the 'Own a Space' section, as both builders or owners of spaces can update the links to a space.

Canvas Hierarch

The Canvas Prefab has a similar object structure to other artifacts.

Artifact and Canvas Hierarchy

Canvas Requirements:

• The Artifacts scene has an 'Artifacts' Gameobject/layer with the ArtifactLayer tag applied. This is the only object in the scene with that tag. Do NOT delete or move this scene or object. Do not rename or remove the tag.

• All Artifacts/Canvases need to be under, or a child of, the Artifacts GameObject.

• The 'UniqueCanvasName_#' under the CanvasPrefab object must have a unique name in your Space and have the 'Canvas' tag applied. All other objects in each Canvas prefab should have the 'Untagged' tag.

• The Canvas tagged object needs to have a mesh collider for the Canvas to be 'seen' by the avatar. It will throw an error if it is anything else or missing.

• Each Canvas needs a Spawnpoint included. This will be used in future functionality.

• Each Canvas is its own Prefab object. Do not add multiple Canvases under one CanvasPrefab.

• Do not cover the Canvas tagged objects mesh collider with other colliders. The user cannot interact with the Canvas if there is another collider in front of it.

• Scale the Unique name Gameobject with the Canvas tag (not the parent CanvasPrefab object) to the desired boundaries of your dynamic image.

• The naming convention for naming should be "PascalCase" (i.e., Portal1 or TestPortal)