NFT Image Display

How to use the NFT Image Component to display static NFTs in your experience.

How to display NFTs in your experience

If you want to display NFTs in your experience then this is the tutorial for you!

We will walk through what assets you need, which Component to use, where to link your NFT from, and what the limitations are.

TL;DR

Add the NFT Image component to a frame-compatible asset. Get the URL from the NFT you wish to use from OpenSea and paste it into the URL section of the component. Validate and then test how it looks by pressing play.

Limitations

You can use the NFT Image Component on an object to link to the URL of an NFT, however, there are some specifications to be aware of.

At this stage, the only platform supported is the OpenSea marketplace.

The component also currently displays static images and doesn’t support video or gif formats.

This process doesn’t import the NFT asset itself, rather the component establishes a hyperlink to the NFT from OpenSea.

Using a Frame

To get started you will need to have an asset with a frame. This is a specific characterisitc of an asset that defines where on the object the NFT will be displayed.

You can create your own frames in VoxEdit by using the Frame Tool, or you can grab some readily available frames from the Marketplace.

In this tutorial, we are using the Billboard Frame, which you can find in the Library.

Using the 'NFT Image' Component

First, you will have to place your frame-compatible asset, like the Billboard Frame, into the scene.

Once the asset is in your scene, click it to open the Properties panel, which will appear on the right-hand side of the screen.

Scroll down to the Behaviours tab where you will find Components.

It’s important to note that the NFT Image component cannot be used simultaneously with the Image Display component.

If you are using an object that has the Image Display component preset, then delete it by clicking the ‘X’.

Once cleared, click Add Component.

This will open the Component library, where you will need to choose NFT Image.

Now we need to set up the URL that the NFT Image Component will link to.

Connecting the URL

To get the URL of your desired NFT head to OpenSea.

Once you have located the appropriate NFT, click on it so that its unique page loads.

After the page has loaded click the Share icon and then select Copy Link from the drop-down menu.

Head back to the Game Maker and under the NFT Image Component click the box next to Asset URL.

This will open a panel titled NFT IMAGE where you can paste the URL.

Once pasted, click Validate, which will make sure the URL is supported. If the link is incorrect or is an unsupported format then an error message will pop up.

If your URL has worked then your NFT will display as a preview in the box below the URL.

You're almost there, click continue and you can check out how your NFT looks in your world!

Make sure that your URL doesn't have a forward slash '/' at the end of the address. As this will lead to an error message.

Testing Your NFT

Your newly added NFT won't display in the edit mode of the Game Maker.

To test how it looks click Play or press Tab to check it out in play mode.

If you find it isn’t displaying the way you would like, then you can use Scale Mode, where you can choose from Original, Resize, Fit to Width, Fit to Height, or Repeat to get the right look.

Once you are happy with the results, you’re done!

Congratulations on setting up your first NFT in The Sandbox Metaverse using a URL.

If you would like to create a custom frame using VoxEdit, you can learn how to get started using the NFT Compatible Frame guide.