Mostrar un NFT certificado

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

Puedes mostrar un NFT 2D (token no fungible) que posees en tus escenas de Decentraland.

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

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

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 conserva su tamaño original. Si la imagen tiene dimensiones diferentes, el marco se redimensionará y se estirará para coincidir con esas dimensiones.

💡 Consejo: Si quieres estirar o redimensionar la imagen respecto a la generada por defecto, puedes cambiar la scale propiedad en la 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. Consulta la lista de valores compatibles a continuación.

• El estándar del contrato en el que se basa este token, por ejemplo erc721

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

• El id del token específico para mostrar

Por ejemplo:

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

El ejemplo anterior obtiene un NFT con la dirección del 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 con 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 tener un tamaño de hasta 6 MB. Si la imagen es más grande, no se renderizará en la escena.

Personaliza el marco

De forma predeterminada, 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 la cara posterior 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.

NftShape.create(nftEntity, {
  urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536',
  color: Color3.Green(),
  style: NftFrameType.NFT_GOLD_EDGES,
})

Aquí tienes 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 predeterminado añade 1 material para el NFT en sí, 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 los materiales para mantenerte dentro de las limitaciones de la escena, elige un estilo más simple. Por ejemplo, "none" solo usa 1 material para el NFT en sí.

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

Abrir una UI de NFT

Abre una UI preconstruida que muestra el nombre, el propietario y la 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 con la página del NFT en OpenSea, donde hay más información disponible y se puede comprar.

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 evitar el spam abusivo. El evento de botón no necesariamente tiene que estar en el mismo marco de imagen ni 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ñade un collider de puntero para que se pueda hacer clic
MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER)

// Añade el evento de devolución de llamada onPointerDown.
pointerEventsSystem.onPointerDown(
	{
		entity: myEntity,
		opts: { button: InputAction.IA_PRIMARY, hoverText: 'Click' },
	},
	function () {
		openNftDialog({
			urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536',
		})
	}
)