Exibir um NFT Certificado

Aprenda a exibir na sua scene um NFT certificado que lhe pertença

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

A imagem do NFT e outros dados são obtidos de uma API, com base no contrato e no id do token. Quaisquer NFTs que sejam compatíveis com OpenSea também podem ser exibidos em uma moldura de imagem NFT no Decentraland.

💡 Dica: No Scene Editor no Creator Hub, você pode usar um NFT Smart Item como uma forma sem código de conseguir isso.

A moldura é exibida se ajustando à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.

💡 Dica: Se você quiser esticar ou redimensionar a imagem em relação ao que é gerado por padrão, você pode alterar a scale propriedade no Transform componente.

Adicionar um NFT

Adicione um NftShape componente a uma entity para exibir um token em 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 em que 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:

• 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: As imagens devem ter no máximo 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 com o estilo do NFT e da cena:

• color: Determina a parte traseira 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 com 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 colorido de fundo e 2 materiais para a moldura (compartilhados com outras molduras do mesmo estilo). Se você precisar reduzir os materiais para ficar dentro das limitações da cena, escolha um estilo mais simples. Por exemplo, "none" usa apenas 1 material para o próprio NFT.

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

Abrir uma UI de NFT

Abra uma UI pré-construída que exibe o nome, o proprietário e a 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, além de um botão que leva à página do NFT no OpenSea, onde há mais informações e ele pode ser comprado.

Abra esta UI chamando a função openNftDialog(). Essa função requer um objeto como argumento que contém 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 do botão não precisa necessariamente estar na mesma moldura ou em um NftShape.

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

import { openNftDialog } from '~system/RestrictedActions'

// Adicione um collider de pointer 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',
		})
	}
)