> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/media/display-a-certified-nft.md). # Mostrar un NFT certificado Aprende cómo mostrar en tu scene 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](https://opensea.io/) también puede mostrarse en un marco de imagen NFT en Decentraland. {% hint style="info" %} **💡 Consejo**: En el [Scene Editor en Creator Hub](/creator/content-creator-es/scene-editor/comenzar/about-editor.md), puedes usar un **NFT** [Smart Item](/creator/content-creator-es/scene-editor/interactividad/smart-items.md) para lograr esto sin código. {% endhint %} 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. {% hint style="info" %} **💡 Consejo**: Si quieres estirar o redimensionar la imagen respecto a la generada por defecto, puedes cambiar la `scale` propiedad en la `Transform` component. {% endhint %} ## Agregar un NFT Agrega un `NftShape` componente a una entidad para mostrar un token 2D en tu escena. ```ts 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::::` 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](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 {% hint style="warning" %} **📔 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. {% endhint %} ## 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. ```ts NftShape.create(nftEntity, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, }) ``` ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media) 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](/creator/content-creator-es/scenes-sdk7/optimizing/scene-limitations.md), elige un estilo más simple. Por ejemplo, "none" solo usa 1 material para el NFT en sí. {% hint style="info" %} **💡 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_NONE`para mostrar el NFT simple tal cual, sin marco ni color de fondo. {% endhint %} ## 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. ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media) 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::::` Por ejemplo: `urn:decentraland:ethereum:erc721:0x00...000:123` {% hint style="warning" %} **📔 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`. {% endhint %} Para abrir esta UI como resultado de una acción de clic, añade lo siguiente: ```ts 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', }) } ) ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/media/display-a-certified-nft.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.