Setting up Canvases
In this tutorial, we will go over adding canvases to your Mona Space.
Last updated
In this tutorial, we will go over adding canvases to your Mona Space.
Last updated
Canvases allow you to add 2D media such as images or live streams in the space, even after the space has been minted. Canvases can also link to external websites once interacted with.
Mona currently supports .jpg, .png, and public .m3u8 links for streaming on platforms like LivePeer.
Canvases can have an Artist, title, and a description applied to them. Canvases also allow a link to an external website. This could be linked to the page to buy an NFT if displaying an NFT, but could be any website such as your portfolio, an online store, or a company website.
The Canvas model can automatically scale down to the image vertically or horizontally, or the image will be cropped to the canvas model vertically or horizontally. The bounds of the Canvas will always be the maximum size of the canvas regardless of which type you use.
It is possible to add a frame asset to your canvas, but at the moment, frames will not scale. So make sure that the canvas doesn’t scale to the image.
A Canvas asset has very specific requirements for Mona to know that it is a canvas.
Under the _MonaAssets folder in the project window. There is one Canvas asset available.
Drag the CanvasPrefab onto the Artifacts asset in the Artifacts scene. This Artifacts object also has an ‘ArtifactsLayer’ tag. If this asset is deleted, renamed, or the tag is removed, the space will not work correctly.
If your canvas is not under the Artifacts gameobject, your space will not work correctly. The best way to test this, alongside the other scenes in the space, is to collapse all the parent gameobjects to make sure nothing is outside of them.
The Canvas asset, or 'CanvasPrefab' gameobject, does not require a tag. It can be renamed as you see fit.
The Canvas Asset named ‘UniqueCanvasAsset_1’ requires the ‘Canvas’ Tag. This also must be named differently from other canvas tagged assets.
The Spawnpoint asset requires the Spawn Point tag.
The FrameAssets gameobject and all assets within it should not have tags.
The Canvas object itself, sometimes called the Canvas Prefab, can have any name, but of course, having it named in a useful way will make things easier for you.
The ‘UniqueCanvasName_1’ asset is the key asset for Canvas. If you are using more than one canvas the name of this asset must be unique; otherwise, the QA tool will throw an error. This name will also be used to reference which Canvas you apply the media to, so it’s good to use something descriptive. You will note that this asset also has the ‘Canvas’ tag.
This asset also requires a mesh collider. Other colliders do not work. This collider is what the player recognizes as the Canvas to click on.
Make sure that no other colliders are covering this asset, otherwise, the player will not be able to interact with it.
This collider is also a physical collider, but as it is a mesh collider it only applies from one side.
Make sure that the canvas polygon doesn’t align exactly on another surface otherwise you will get z-fighting, or the effect of polygons fighting to be in front.
Make sure the Spawnpoint is in a position that makes sense, such as not within a collider and has a collider to land on.
The FrameAssets folder is where you can put your assets that represent the frame of the Canvas. This is completely optional.
As a reminder, Frame assets do not scale, so if you have a Scale to Canvas approach on the Mona Wallet, it will not look correct.
If you are adding colliders to your frame assets, make sure that they do not cover the Canvas asset itself, otherwise, the Canvas will not be able to be interacted with.
It is best to scale the canvas tagged asset, or the UniqueCanvasName_1 asset, itself. Do not scale the parent, as this will reduce potential issues.
Select the Canvas tagged asset and scale as needed.
Make sure to keep the canvas away from the polygons behind it otherwise you might get Z-Fighting, or polygons fighting to be in front. Just move the canvas tagged asset a little in front of the polygons behind it.
When you build to the playground your canvas should change to the Mona Coming Soon image. If not then make sure to jump into the Mona Discord support channel to help you out.