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 posees en tus escenas de Decentraland.

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

💡 Tip: 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 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.

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

Agregar un NFT

Agrega 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 compatibles abajo.

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

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

• El id del identificador específico del token 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 activo correspondiente se puede encontrar 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

• atributo 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 morado y un marco con una textura emisiva pulsante alrededor. Puedes establecer las siguientes propiedades para que coincidan mejor con el estilo del NFT y de la escena:

• color: Determina el reverso 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 con 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 compatibles:

• 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 más simple. Por ejemplo "none" usa solo 1 material para el propio NFT.

💡 Tip: 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 único 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 prevenir el spam abusivo. El evento de 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 hacerse clic
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',
		})
	}
)