Hello! Please choose your
desired language:
Dismiss

In the lead up to our next Game Jam, commencing September 16, participants from our June Hackathon will be taking over the Decentraland blog and revealing their design and building secrets. This week’s guest blogger is community member, @holodot.


Hey, @holodot here, I’ve been part of Decentraland community for a while now, likely since the early days. Being a crypto fan, a tech fan and living in Argentina, it’s hard to not become a devotee of this project. You just need to fall through the rabbit hole! But more about rabbits later…

I’ve been working in product design in Silicon Valley for many years. Decentraland has helped me learn to code better, learn more gaming-related 3D workflows and of course meet really cool people. The challenge of this virtual wonderland – and maybe also beauty of it – is that you need good developers as well as good designers to make something remarkable.

Decentraland Museum District

My group’s pet project is the Museum District, a flexible space where you will find premium curated art, artists and galleries interacting with their audiences and several NFT marketplaces.

We decided to create booths to host invited artists and brands that need a special place to showcase their creations, in a more branded and focused environment.

We currently have interactive pieces, animated models, and other ‘digital happenings’ (like robots that steal art).

Right now we are working on creating NFT browsing experiences and will be integrating MakersPlace, as well as other art markets.

We already have buildings placed in the scene. Most of these we built using Cinema4D, but there are loads of ‘pre-fabricated’ buildings and galleries out there to use for free.

Placing NFT art into a scene

You can use the Builder to easily drag and drop 2D NFT images into your scene as picture frames. Right now, the selection of compatible tokens is limited to options like Cryptokitties or Axie Infinity.

The Decentraland team recently added support for a handful of more interesting art-related tokens, like MakersPlace and Editional. For now those are only supported via the SDK, they’re still not available on the Builder, so we’re going to have to roll up our sleeves and code a little.

The SDK also allows us some more customization, like scaling our pictures to any size we want, or adding a custom background color for images with transparency.

I’ll walk you through how I added one of these NFTs myself, but check out this link if you want more details.

Here’s the NFT we want to embed into our scene: https://makersplace.com/store/museumdistrict/blue-psyco-rabbit-1-of-3-10337/

This token belongs to me, but feel free to try it out yourselves. You can follow the same steps with any other token, as long as it’s in the list of whitelisted tokens by Decentraland (check out the full list here).

If you click on View Proof of Authenticity on the MakersPlace profile page for the asset, you can see the details of the record in the Ethereum blockchain (https://makersplace.com/authenticity/0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756/7224/). We’ll be needing some info from this page to reference our NFT.

There are two numbers that we need to obtain from this page:

  1. The Contract ID, which in this case refers to the Makersplace contract.

  2. The ID field, that is a unique reference to this specific artwork.

Note: For NFTs in Open Sea, you can simply take the Contract ID and ID from the URL of the asset. So for example if you browse to opensea.io/assets/0x05f02507c7134dbae420ab8c0ef56e999b59da03/47335, you can extract:

  • the Contract ID: 80x05f02507c7134dbae420ab8c0ef56e999b59da03

  • the artwork ID: 47335

We’re now going to use these two numbers to construct a URL that Decentraland can use to fetch the data of the artwork. We just add ethereum:// at the start, then paste the Contract ID, a slash,and finally the artwork ID:

ethereum://0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756/7224/

We’ll be using the URL in our scene’s code like this:

const makersNFT = new Entity()
const shapeComponent = new NFTShape('ethereum://0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756/7224/')
makersNFT.addComponent(shapeComponent)
engine.addEntity(makersNFT)

In the snippet above we’re creating an entity and giving it an NFTShape component, that uses the URL we just built to fetch data from our artwork.

By default, our NFT will appear on the 0,0,0 position of our scene. If we want to change this position, rotate it, or change its scale, we just need to add a Transform component to the entity and provide some info there.

makersNFT.addComponent(
 new Transform({
   position: new Vector3(184, 4, 89),
   scale: new Vector3(1,1,1),
   rotation: Quaternion.Euler(0, 120, 0)
})

We’re done! This is what the whole code looks like:

const makersNFT = new Entity()
const shapeComponent = new NFTShape('ethereum://0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756/7224/')
makersNFT.addComponent(shapeComponent)
makersNFT.addComponent(
 new Transform({
   position: new Vector3(184, 4, 89),
   scale: new Vector3(1,1,1),
   rotation: Quaternion.Euler(0, 120, 0)
 })
)
engine.addEntity(makersNFT)

And you’ve embedded an NFT asset in your scene.

Bring some culture to Decentraland Game Jam

We’re not far away from the premier event on the Decentraland calendar. Why not use the steps above to add some artworks to whatever you create in the Game Jam.

If you haven’t already signed up to compete, get involved!

Explore the metaverse in style
Be one of the first to get your own avatar, and gain early access to Decentraland.
Learn More