Creating an NFT Compatible Frame

Use VoxEdit to create a custom NFT Display Component compatible frame.

Creating an NFT Frame

In this guide, we will be looking at how to create a custom NFT frame then bring it into the Game Maker to use with the NFT Display Component in your experience.

Creating a New Project

Open VoxEdit, and select ‘Modeler’ from the options on the left of the screen. On the next screen select ‘Create New Asset’ and save the project to your desired location.

Build the Frame

When your project opens you will see the X (red), Y (green), and Z (blue) Axis displayed as lines in your viewport. You can control the display of these lines by editing the values in the correlating boxes at the top of the screen.

For an NFT frame to work it needs to be at least two (2) voxels deep or more, so the first step is to change the depth of our space.

Click the box at the top of the screen for the Z-axis and change it from 32 (the default) to the number 2. You will notice this will shorten the blue line indicating that the depth has been adjusted.

An NFT Frame will not work if it is only one (1) voxel deep. It needs to be at least 2 or more voxels deep.

Frame Size

For this example, we will be making a large NFT Frame.

To set the largest frame possible you will see that if you type 300 into the X-axis you’ll get an error message letting you know that 256 is the maximum value you can input.

So in this instance, we will set the X and Y axis to 256. This will leave a defined workspace of 256x256x2.

If you're making a frame for a specific NFT with unique dimensions, it would be useful to keep this in mind when defining the size of the custom frame.

Fill the Space

While the values set so far define the work area, the space doesn’t have any voxels yet. To fill the defined area with voxels you need to make sure you are in Create Mode (Hotkey 2) and either add the voxels manually using the Box Tool (R key) or do it the quick way and use the Bucket Tool (Y Key).

Select the Bucket Tool from the left panel and then right-click in the viewport, which will fill the area we defined previously with voxels.

Change your camera position by rotating to the side to make sure the frame is two voxels deep. If all looks in order, move on to the next step.

You can adjust the dimensions of the defined area at any time by changing the values at the top of the screen.

Setting the Pivot Point

The Pivot Point defines the origin of the Asset, which will be the point it pivots around when rotating, and ultimately makes it easier to position in-game.

Click on Pivot Tool in the left toolbar, or click the hotkey (P) to get started. Now move the Pivot Point to the desired location, which we want to set along the bottom edge, at the midpoint of the Asset.

In this instance, because the width (X-Axis) is 256, we will adjust the pivot point so that it lines up along the bottom of the voxels (Y, 0) at the midway point (X, 128).

Defining the Frame

Next, we need to set the area that correlates with the frame of the NFT.

To do this, select the Frame Tool from the left toolbar (it’s just below the Pivot Tool)

Once selected you’ll need to click and drag to create your frame.

Depending on the result you are after you can use the whole surface or just the area where you want to display the NFT.

You can only have one Frame area defined per Asset.

We're going to make the whole surface the area for our frame, so in this case, we select the right corner and drag it all the way down to the left corner on the opposite side.

Once you let go after dragging the mouse from corner to corner, you will see the selection turns from pink to green.

Exporting Your Frame

So we don’t lose any of the work so far, click Save before continuing.

Now we're going to export the Asset to the Sandbox Marketplace by clicking 'File' in the top left-hand corner of the interface then > 'Export' > and then ‘Export to Marketplace’

You will get a pop-up asking you to select the picture you want to set as the thumbnail for the Asset, and then confirm the selection by clicking 'Export'.

When you click on ‘Export’ it will open up your browser for The Sandbox Dashboard, so make sure you're logged into your Sandbox account.

On the Upload Asset Screen, you will be asked if you want to create a ‘New Asset’ or ‘Replace Asset’. In this instance, we’ll click 'New Asset'.

On the next page, you can set the name of the asset, as well as add a description.

Once done, click Continue.

At this point, your Asset will have been created, and the following two pages - Categories and Summary - won't have a dramatic effect on how the Frame will operate in your experience.

Accessing Your Frame in the Game Maker

If you already had the Game Maker open, you will need to make sure you reload the experience before any newly added Assets will show up in the library.

Once refreshed, press 'L' to open the Library and search for your asset using the name you gave it.

And there you have it! You have successfully created your own frame and brought it into the Game Maker.

Now all that’s left to do is drag it into your experience and add your NFT to it. To learn more check out the NFT Image Component guide.