🔟NFT Image Display

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

GAME MAKER 0.10 ENHANCEMENT

Now supporting GIFS!

GAME MAKER 0.9 ENHANCEMENT

NFT Image Display now supports the Etherum, Polygon, and Goerli blockchains (previously only Ethereum).

How to display NFTs in your experience

A frame asset will allow you to apply this component to display a still NFT image from the Ethereum, Polygon, and Goerli blockchains using a marketplace URL and other NFT data.

PERFORMANCE TIP In multiplayer Experiences, there are two layers of logic that will not communicate with each other: singleplayer [SP] and multiplayer [MP]. For best performance, only apply [MP] behaviours and components to objects that MUST be synchronised to all players (or communicate on that layer), and maximise use of the [SP] (Client Only) layer.

USAGE TIP This domponent will not communicate with Quests or [SP] behaviours or components. It can be used in singleplayer Experiences.

Common Uses

• Display NFTs on the Ethereum, Polygon, and Goerli blockchains in the Game Maker.

Communications

Inputs: Link to Opensea NFT

Outputs: Display NFT

More Information

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.

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

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

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.

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

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

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

​