Exibir um NFT certificado

Aprenda a exibir um NFT certificado que você possui na sua cena

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

A imagem e outros dados do NFT são obtidos de uma API, com base no contract e no id do token. Qualquer NFT compatível com OpenSea também pode ser exibido em uma moldura de imagem NFT no Decentraland.

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

A moldura da imagem é 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 o seu tamanho original. Se a imagem tiver dimensões diferentes, a moldura será redimensionada e esticada para corresponder a essas dimensões.

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

Adicionar um NFT

Adicione um NftShape component a uma entity para exibir um token 2D na sua scene.

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 component deve ser instanciado com um parâmetro que inclua o seguinte:

• urn field. Este field 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 compatíveis abaixo.

• O contract standard com base no qual este token foi criado, por exemplo erc721

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

• O id do token específico a exibir

Por exemplo:

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

O exemplo acima obtém um NFT com o contract address 0x06012c8cf97BEaD5deAe237070F9587f8E7A266d, e o identificador específico 558536. O asset correspondente pode ser encontrado na OpenSea em https://opensea.io/assets/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536.

Os seguintes valores são compatíveis com 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 images devem pesar até 6 MB. Se a imagem for maior, ela não será renderizada na scene.

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 scene:

• color: Determina a parte traseira do model, e também o fundo da imagem caso a imagem do NFT tenha transparência.

• style: Seleciona um model 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 styles 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 compatíveis:

• 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 materials do que outras. Por exemplo, a moldura padrão adiciona 1 material para o próprio NFT, 1 material para um plano de fundo colorido e 2 materials para a moldura (compartilhados com outras picture frames do mesmo style). Se precisar reduzir os materials para ficar dentro das limitações da scene, escolha um style 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 smart suggestions 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 predefinida que exibe o nome, o owner e a description 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 para a página do NFT na OpenSea, onde há mais informações e ele pode ser comprado.

Abra esta UI chamando a função openNftDialog(). Esta função requer um objeto como argumento que contenha uma única urn field. Este field 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 picture frame 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 pointer collider 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',
		})
	}
)