Tutorial
Heading
Dec 5, 2023

How to index NFT displays in The Sandbox

Here, we explain you how to index NFT displays in The Sandbox

The mission

After reading this article, I hope you will be able to index any NFT display on your The Sandbox lands. It is a simple but significant task.

Resources

  • VoxEdit
  • MagicaVoxel
  • Game Maker - 0.8.9 -

Workflow resume

Firstly, I will provide you a quick overview of this workflow:

  1. MagicaVoxel modeling: create a frame of any size in MagicaVoxel to showcase the NFT.
  2. VoxEdit: use VoxEdit to select the desire NFT display area. Additionally, set your centre pivot and publish the asset to The Sandbox marketplace.
  3. The SandBox Editor: after pushing our NFT display to The SandBox marketplace, configure it in The Sandbox Editor to make it functional.

MagicaVoxel modeling

MagicaVoxel is a voxel art editor that allows you create your assets. With this in mind, you simply need to create a frame where you will later define your NFT display area. Optionally, you can reserve a space for an aesthetic area within the frame.

NFT display in MagicaVoxel (front)

For the width of the frame, you can use as many voxels as you desire; it is purely a matter of aesthetics. In the bottom picture, you can observe that I have opted for a width of 2 voxels.

NFT display on MagicaVoxel (side)

As evident in the top picture, I used the white colour to designate the NFT frame area, but you are free to choose any color you prefer. On the other hand, I have maintained a border of 2 voxels for the outer frame.

VoxEdit

VoxEdit is an impressive voxel art engine that allows us to create blockouts, animations and adress any errors. Now that you have completed the modeling of your NFT display, it is time to import it into VoxEdit.

Follow this workflow to import your asset from MagicaVoxel to VoxEdit:

  1. Open VoxEdit, in the left column, click on Modeler’.
  2. Choose Import VOX... to open your MagicaVoxel project.

Following this steps, you should observe something similar to the bottom picture:

NFT frame in VoxEdit

It’s crucial to emphasize that selecting the ‘Modeler’ option is essential because, for a correct utilization of the NFT display, you must upload a .vxm format to The Sandbox. I conducted tests with ‘animation’/.vxr, and it proved ineffective.

Now that your asset in VoxEdit, marking the NFT display area is the next step. Follow these instructions:

  1. 'Frame Tool': utilize ‘Frame Tool’ to designate the display area where you will intend to showcase your NFT (indicated by the blue marker on the right picture).
  2. Select the display area with your cursor (as shown in the bottom picture).
NFT display area on VoxEdit

After completing these steps, you must export the asset from VoxEdit to The Sandbox marketplace. Follow this instructions:

  1. Select ‘File’ → ‘Export’ → ‘Export to marketplace'in VoxEdit.
  2. The Sandbox web page will then appear on your computer, allowing you to upload the asset correctly.

The Sandbox marketplace

After importing the asset into The Sandbox, you simply need to enter and configure it.

The workflow is as follows:

  1. Place your asset on the land and select it (as shown in the bottom picture).
NFT display on The Sandbox Editor

The Sandbox Editor NFT component
  1. In the right toolbag, scroll down and choose the ‘Add Component’ option (as seen in the right picture).
  2. A display will appear with many options, and the specific component we need to use is ‘NFTImage’.

Once you have chosen your component, we need to configure it as the following manner (refer to the bottom picture of the workflow).

NFT component configuration in The Sandbox Editor

Initially, select an ‘NFT url’ from OpenSea. After pasting it into the ‘Asset url’ field, validate and apply. To complete the process, choose the ‘Resize’ option under ‘Scale Mode’in the right toolbag. This option enables you to adjust the size of the NFT to fit the frame.

To view the result, enter the land as player; note that the NFT is not visible in editor mode.

Conclusion

The purpose of this article is to guide you through the process of indexing an NFT frame in The Sandbox Editor. We have covered the entire workflow, starting from modelling in MagicaVoxel to configuring in The Sandbox Editor.

Integrating NFTs into land creation is a significant aspect, and I trust you have found this article helpful.

Magica Voxel
The Sandbox
Voxedit
voxel
PJ Martínez
Lead Environmental Artist
Tutorial
How to import Decentraland SkyboxEditor into Unity
Tutorial
Doing a MANA transaction in a Decentraland scene
Tutorial
Canvas (2D UI) Manager in Decentraland