Exibir um NFT Certificado

Aprenda como exibir um NFT certificado que você possui em sua cena

Você pode exibir um NFT 2D (Non-Fungible Token) que você possui nas suas cenas do Decentraland.

A imagem do NFT e outros dados são obtidos de uma API, com base no contrato do token e no id. Qualquer NFT que seja suportado no Você pode obter essa informação no também pode ser exibido em uma moldura de NFT no Decentraland.

💡 Tip: No Scene Editor in Creator Hub, você pode usar um NFT Smart Item para uma maneira sem código de conseguir isso.

A moldura é exibida ajustando-se às dimensões da imagem do NFT. Se as dimensões da imagem forem 512 X 512 pixels, a moldura mantém seu tamanho original. Se a imagem tiver dimensões diferentes, a moldura será redimensionada e esticada para corresponder a essas dimensões.

💡 Tip: Se você quiser esticar ou redimensionar a imagem além do que é gerado por padrão, você pode alterar a scale propriedade no Transform component.

Adicionar um NFT

Adicione um NftShape componente a uma entidade para exibir um token 2D na sua cena.

const nft = engine.addEntity()

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

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

O NftShape o componente deve ser instanciado com um parâmetro que inclua o seguinte:

• urn campo. Este campo recebe uma string que deve seguir esta estrutura:

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

Esta string inclui:

• O network onde este token existe. Veja a lista de valores suportados abaixo.

• O contract standard no qual este token se baseia, por exemplo erc721

• O contract do token (por exemplo, o contrato CryptoKitties)

• O id do token específico a ser exibido

Por exemplo:

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

O exemplo acima busca um NFT com o endereço de contrato 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d, e o identificador específico 558536. O ativo correspondente pode ser encontrado no OpenSea em https://opensea.io/assets/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536.

Os seguintes valores são suportados para network:

• : Atualmente: 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: As imagens devem ter até 6 MB. Se a imagem for maior, ela não será renderizada na cena.

Personalizar a moldura

Por padrão, a imagem terá um fundo roxo e uma moldura com uma textura emissiva pulsante ao redor. Você pode definir as seguintes propriedades para combinar melhor o estilo do NFT e da cena:

• color: Determina o lado de trás do modelo, e também o fundo da imagem caso a imagem do NFT tenha transparência.

• style: Seleciona um modelo de moldura a partir de um enum de várias opções predefinidas. Use um valor do enum NftFrameType, que contém uma lista de todos os estilos disponíveis.

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

Aqui está a lista completa de estilos de moldura suportados:

• 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

Algumas molduras usam mais materiais do que outras. Por exemplo, a moldura padrão adiciona 1 material para o próprio NFT, 1 material para um plano com cor de fundo, e 2 materiais para a moldura (compartilhados com outras molduras do mesmo estilo). Se você precisar reduzir materiais para manter-se dentro das limitações da cena, escolha um estilo que seja mais simples. Por exemplo "none" usa apenas 1 material para o próprio NFT.

💡 Tip: Usando o Visual Studio Code (ou outro IDE), veja a lista completa digitando NftFrameType. e esperando que as sugestões inteligentes exibam a lista de opções. Use NftFrameType.NFT_NONEpara exibir o NFT simples como está, sem moldura ou cor de fundo.

Abrir uma UI de NFT

Abra uma UI pré-construída que exibe o nome, proprietário e descrição de um NFT. Ela também inclui o preço atual do NFT e o preço da última venda, se aplicável, e um botão que liga à página do NFT no OpenSea, onde mais informações estão disponíveis e ele pode ser comprado.

Abra essa UI chamando a função openNftDialog(). Esta função requer um objeto como argumento que contenha um único urn campo. Este campo recebe uma string que deve seguir esta estrutura:

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

Por exemplo:

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

📔 Nota: A UI deve ser aberta como resultado de um evento de botão, para evitar spam abusivo. O evento de botão não precisa necessariamente estar na mesma moldura ou em um NftShape.

Para abrir essa UI como resultado de uma ação de clique, adicione o seguinte:

import { openNftDialog } from '~system/RestrictedActions'

// Adicione um colisor de ponteiro para que possa ser clicado
MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER)

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