Mostrar un NFT certificado

Aprende cómo mostrar un NFT certificado que posees en tu escena

Puedes mostrar un NFT 2D (Non-Fungible Token) que poseas en tus escenas de Decentraland.

La imagen del NFT y otros datos se obtienen de una API, basándose en el contrato y el id del token. Cualquier NFT que sea compatible con OpenSea también puede mostrarse en un marco de imagen NFT en Decentraland.

💡 Consejo: En el Scene Editor in Creator Hub, puedes usar un NFT Smart Item para una forma sin código de lograr esto.

El marco de la imagen se muestra ajustándose a las dimensiones de la imagen del NFT. Si las dimensiones de la imagen son 512 X 512 píxeles, el marco mantiene su tamaño original. Si la imagen tiene dimensiones diferentes, el marco se redimensionará y estirará para coincidir con esas dimensiones.

💡 Consejo: Si deseas estirar o redimensionar la imagen respecto a lo que se genera por defecto, puedes cambiar la scale propiedad en el Transform componente.

Agregar un NFT

Agregar un NftShape componente a una entidad para mostrar un token 2D en tu escena.

const nft = engine.addEntity()

Transform.create(nft, {
	position: Vector3.create(8, 1, 8),
})

NftShape.create(nft, {
	urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536',
})

El NftShape el componente debe instanciarse con un parámetro que incluya lo siguiente:

• urn campo. Este campo toma una cadena que debe seguir esta estructura:

urn:decentraland:<CHAIN>:<CONTRACT_STANDARD>:<CONTRACT_ADDRESS>:<TOKEN_ID>

Esta cadena incluye:

• El network donde existe este token. Ver la lista de valores soportados más abajo.

• El contract standard en el que se basa este token, por ejemplo erc721

• El contract del token (por ejemplo, el contrato de CryptoKitties)

• El id del token específico a mostrar

Por ejemplo:

urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536

El ejemplo anterior obtiene un NFT con la dirección de contrato 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d, y el identificador específico 558536. El asset correspondiente puede encontrarse en OpenSea en https://opensea.io/assets/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536.

Los siguientes valores son compatibles para network:

• ethereum: Ethereum Mainnet

• matic: Polygon Matic

• klaytn: Klaytn

• bsc: BNB Chain

• arbitrum: Arbitrum

• arbitrum_nova: Arbitrum Nova

• avalanche: Avalanche

• optimism: Optimism

• solana: Solana

• base: Base

• blast: Blast

• zora: Zora

📔 Nota: Las imágenes deben pesar hasta 6 MB. Si la imagen es más grande, no se renderizará en la escena.

Personalizar el marco

Por defecto, la imagen tendrá un fondo púrpura y un marco con una textura emisiva pulsante alrededor. Puedes configurar las siguientes propiedades para que coincidan mejor con el estilo del NFT y la escena:

• color: Determina la parte trasera del modelo y también el fondo de la imagen en caso de que la imagen del NFT tenga transparencia.

• style: Selecciona un modelo de marco de un enum de varias opciones predeterminadas. Usa un valor del enum NftFrameType, que contiene una lista de todos los estilos disponibles.

const shapeComponent = new NftShape(
  urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536',
  {
    color: Color3.Green(),
    style: NftFrameType.NFT_GOLD_EDGES,
  }
)

Aquí está la lista completa de estilos de marco soportados:

• NFT_CLASSIC

• NFT_BAROQUE_ORNAMENT

• NFT_DIAMOND_ORNAMENT

• NFT_MINIMAL_WIDE

• NFT_MINIMAL_GREY

• NFT_BLOCKY

• NFT_GOLD_EDGES

• NFT_GOLD_CARVED

• NFT_GOLD_WIDE

• NFT_GOLD_ROUNDED

• NFT_METAL_MEDIUM

• NFT_METAL_WIDE

• NFT_METAL_SLIM

• NFT_METAL_ROUNDED

• NFT_PINS

• NFT_MINIMAL_BLACK

• NFT_MINIMAL_WHITE

• NFT_TAPE

• NFT_WOOD_SLIM

• NFT_WOOD_WIDE

• NFT_WOOD_TWIGS

• NFT_CANVAS

• NFT_NONE

Algunos marcos usan más materiales que otros. Por ejemplo, el marco por defecto añade 1 material para el propio NFT, 1 material para un plano de fondo coloreado y 2 materiales para el marco (compartidos con otros marcos de imagen del mismo estilo). Si necesitas reducir materiales para mantenerte dentro de las limitaciones de la escena, elige un estilo que sea más simple. Por ejemplo "none" usa solo 1 material para el propio NFT.

💡 Consejo: Usando Visual Studio Code (u otro IDE), ve la lista completa escribiendo NftFrameType. y esperando a que las sugerencias inteligentes muestren la lista de opciones. Usa NftFrameType.NFT_NONEpara mostrar el NFT tal cual, sin marco ni color de fondo.

Abrir una UI de NFT

Abre una UI preconstruida que muestra el nombre, propietario y descripción de un NFT. También incluye el precio actual del NFT y el precio de la última venta si corresponde, y un botón que enlaza a la página del NFT en OpenSea, donde hay más información y puede comprarse.

Abre esta UI llamando a la función openNftDialog(). Esta función requiere un objeto como argumento que contenga un solo urn campo. Este campo toma una cadena que debe seguir esta estructura:

urn:decentraland:<CHAIN>:<CONTRACT_STANDARD>:<CONTRACT_ADDRESS>:<TOKEN_ID>

Por ejemplo:

urn:decentraland:ethereum:erc721:0x00...000:123

📔 Nota: La UI debe abrirse como resultado de un evento de botón, para evitar el abuso de spam. El evento del botón no necesita estar necesariamente en el mismo marco de imagen o en un NftShape.

Para abrir esta UI como resultado de una acción de clic, añade lo siguiente:

import { openNftDialog } from '~system/RestrictedActions'

// Añadir collider de puntero para que pueda ser clicado
MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER)

// Añadir evento callback onPointerDown.
pointerEventsSystem.onPointerDown(
	{
		entity: myEntity,
		opts: { button: InputAction.IA_PRIMARY, hoverText: 'Click' },
	},
	function () {
		openNftDialog({
			urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536',
		})
	}
)