Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Filecoin / Hackathon Presentations / 20 Jun 2022
Filecoin / Hackathon Presentations / 20 Jun 2022
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: NFT.Storage & Unity: Match Made in Heaven for NFTs| Part-2| Eric Wander Val-BlockJam 2022| Nervos

Description

No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).

A

Hi everyone, so, let's take a look at using nft storage, the free storage for nfts by ipfs and filecoin so make sure that you've gone ahead and signed up for account. This uses a free magic link. If you don't know what that is you're going to find out real soon, then once that's done you're going to be signed into a page.

A

That looks a little something like this, and this is all your files and you can go ahead and upload a file, and please do that now do an image file, so I suggest using a png and we want to make sure that we copy the cid or the content identifier here, because we're going to use this to download this file into unity so go ahead, upload, something and then copy this cid.

A

So we can find it in unity once that's all done, please jump over to my github repo, so it's github.com backslash eric vanderwaal, it's my name here and we'll try and leave a link for that somewhere.

A

Then you're, going to check the repositories tab and in the repositories you're going to look for one called nft storage, unity. Sdk- and this is used to connect unity and nft storage, you can go ahead to the code, tab and download it as a zip into your computer and then go ahead and unzip the folder.

A

I now have it unzipped, I'm going to open it up here and this basically a whole unity project are sort of the important parts of your project and we don't need much of it. We're just going to go into the assets and we just want the one called nft storage here. This is the actual sdk and in the future I'll try and shrink this down a little bit. um You will need text mesh pro in your project, so I suggest you getting get that through unity.

A

uh You know you don't have any scenes or the date or anything else. You may need to use the webgl copy and paste later if you want to do copy and pasting in webgl. If you don't know what this is, don't worry about it. It's really not important. So we'll just grab the nft storage part and we can go ahead and drag this into unity, unity. It's just going to take a minute to recompile once it has everything in there, but then we can open up nft storage and we have two parts.

A

We have examples and scripts and you can delete the examples. If you don't want any of the examples, but I would suggest keeping them just for now. Until you get pretty familiar with it, it's pretty lightweight it. It just has a two scenes and it actually goes over pretty much what we're going to cover today. So if you're watching this today like go ahead, watch it try and understand it. But you know for the most part, 99 of the same.

A

It's going to be in these two scripts and what we're going to cover here is how to download an image. That's why we needed the cid and the second is to take a screenshot and upload it to nft.storage and create nft metadata for this, so we're going to need when we create any sort of nft through unity or any nfte through anyway. What we need is the image essentially and some metadata for it, and we can talk about that more as we go along, but let's just jump right into it.

A

So in the scene, I'm in I'm just going to create an empty game object and we can give it any kind of name we want and don't give it this name. This is a horrible name, but let's call it uh download nft image again, just call the script whatever you want. It really doesn't matter.

A

This is just for us to have a little sample project to work with once that ready, go ahead and open up in your code editor now, I'm using writer, you might be using visual studio or something similar to that anything that works with unity and c-sharp is the way to go I'll just go ahead and remove the update function because I'm not going to be using it.

A

So, let's see where are we going to start here? Let's start by just declaring a couple variables that we might need, and I like to make everything serialize if, if you've been following with my coding at all, you'll know that so under serialized field, I'm going to try and access the button. So we're going to say private button and I'll just call it button.

A

And uh you're most likely going to get a little error here, saying that you know you're not using the using statement, so we just want to make sure we're using unity, engine dot, ui. So the reason we're going to do this is we're going to access a button in the scene. We want to know when it's been clicked, so that will be super helpful for us.

A

The next thing we want to do is get a place for the image to appear on the screen.

A

And we'll do it this way? Lastly, we want to make sure that we pass in our cid in some way and for now we're just going to do it in the editor so again we're using serialized fields. So we can access a private field just in the editor. Why don't we call this? It's going to be a string, we'll keep it simple, we'll just call it cid.

A

Okay, so when we start the scene, we want to make sure that we get access to this buttons click and you know, there's all different kinds of ways of doing this in unity, but um I think doing it through code is probably the most straightforward way for me. So I'm going to do it like this and we're just going to say button, which is this button variable here on click, we're going to add a listener and then, once that's clicks, it's going to call this function, so we don't have a function even created here.

A

Yet so why don't we make one we'll just private void, download image.

A

And I can't spell apparently, while I'm talking and yep, so okay, this error has disappeared. So when we click this button, this function is going to be called.

A

And to download something actually is we're: gonna use what is called or what's considered a ipf gateway, so it's essentially a gateway. You know that connects ipfs, you know, which is not the internet with the internet and then download it through the internet.

A

So it needs some sort of a way for us to to access through the internet, and there are all kinds of different gateways that are maintained by different companies or individuals and we're going to use the nft storage gateway, which is which is really helpful, and we actually have a helper function built into this sdk to to help us do that. So the first thing we're going to do is just type helper, and you can see this is actually part of nft storage, the sdk.

A

So we can either add a using statement at the top or we could just type it here. So why don't we just type it here? So we know explicitly: nft, storage, dot, helper and we click dot.

A

And it's going to give us a bunch of options here and we can see, take a screenshot, absolute file to bytes and if you click on these, it will tell you what it does right so, but let's just generate a gateway path and it says, generate a path: a url to an ipfs gateway by passing the gateway, type and cid.

A

Let's give this a try, okay, so the first thing we need to do is pass it. The cid we can see here. So, let's just type cid, because we've got it here hopefully, and the next thing we need is to get a gateway, and thankfully I think thankfully I programmed it. Thankfully there's actually a list of gateways that we can use. So, let's just say again: nft storage dot constant.

A

So this is a list of all the constants that we have and we have a list of gateways already here so I'll type it in first and then we'll go check it out and we're going to use the sub domain gateway.

A

And then the next question is going to be type, so it just says here: the type is: is this a subdomain? You can see it right here, and so yes, this is a subdomain. So true.

A

So this will be a string. We can say this is the path and we say this is equal to so we save it now. Let's just go check out our constants for a minute, so we'll just go to the declaration. So it's going to open up the constants here.

A

And from here we can see, we've got two lists here. We have one list of gateways that are essentially subdomains and one list of gateways that are not sub domains, so both of these will work, and what you can see is is right. Here is where your cid would go, so maybe be like a you know: abc dot and then the gateway, the subdomain gateway, or, if you use the non-subdomain gateway, it would be on the opposite side here so it'd be https gateway, dot, blah blah blah blah.

A

Then it would be abc at the end. So both of these are possible. It's just essentially two different types of gateways are there, and so therefore, I've added both options of gateways and we're just going to use this subdomain gateway, which is this one here, so we're going to use the the first one list, so that would be position 0 and it's right there, so we're just using this right here.

A

Okay, so this generate pathway, helper function, basically mashes all this information together for us in the correct way and gives us a path.

A

So now that we have the path we can go ahead and use this to download our image.

A

And in the case of the nft storage, sdk, we're mostly using co-routines so co-routines allow us to do things in order, and you know hopefully without blocking threads here. So in this case we're going to say, start co routine, because this is how we start co-routines in unity. You always have to say start co routine, instead of just calling a function and then we're going to see nft, dot, storage, dot, and these are all of our options and we're going to use the network manager.

A

That's a dot, and we have all the options here again and we're going to use this one. That's just download image.

A

Now we can go ahead and pass in or we need to pass in two variables here. So the first one is a callback function which just means when this is done running its co routine, it will pass.

A

It will call that function for us when it's done so it's like okay, I'm all done downloading, I'm going to call this function. The next thing we need to pass in, of course, is the path. So, let's give this a try, follow the first one download complete it.

A

And then we're just going to give it the path like this and, of course, we're getting an error here, because we haven't actually created this function yet and depending on how smart your id is, it will give you the option to create this method, and so I've done it like this will automatically create one. But if you need to manually create one you can do it. This is private void the same name here and you need to have a download response, and then you can give your download response.

A

Whatever you know, whatever name, you want to call it here right. This is completely optional, so this will be called when it's all done downloading.

A

So we can take a look or go to the definition of download response and we can see it's pretty straightforward. It basically just has a bool that says yes, this was successful. If not it's going to have an error message and if it was successful, it's going to have a texture 2d.

A

So we can just say if download response dot is successful. Right, we could say is equal to true, but we don't need to say to say this in c sharp. We could just say you know.

A

If this is true, then do something else. You know debug log.

A

We can say download has failed.

A

Okay, if not, then debug.log.

A

Download was successful.

A

Okay, now once that's done, we want to make sure that we actually do something with this image, and this is sort of the the tricky part in unity if you're, not um if you're not familiar with it already like this is something I had to look up so don't you know, don't expect to know this off the bat, even if you're a unity developer, that's okay, but.

A

um I'll just call this my texture, and I'm just doing this for clarity's sake, not because you necessarily need to, but then we can say our download response um texture2d now we just saved it in this variable called my texture, but a texture is not an image in unity, so we need to change the texture to an image, so we can display it on the screen and to do that, we need let's see here.

A

Okay, so we already have the image here, let's say: image.sprite we're going to save this as some sprites and unity adds a helper function called sprite create and again I had to look this up, but there's a lot of ways to generate things, but what we want to do is essentially pass it. My texture.

A

And then we're going to need to define the sprite parameters here so to do that it needs erect and the xy position is going to be at 0 0 and then the width and size is just going to be. The texture, width and size.

A

Then we actually need to give it a little more information, which is the pivot point, which is relative to the graphic rectangle, which is like uh brain explode. If you're not super familiar with this, but we basically need to give it a vector, 2 position on on it. So we're just going to say new vector, 2 and we're going to put it right in the middle. Is the pivot point, so we're going to say 0.5 f as the pivot at the x and y. So that's right in the middle.

A

And lastly, we can set the pixels per unit. I don't think you have to do this necessarily, but I'm going to set it to be a hundred, so yay, no red, squiggly layer errors um happening here and- and this should be it right, so we're essentially um creating a new sprite and setting it to this image. Sprite.

A

So I'm going to go ahead and save this and actually try and run it and see.

A

Okay, I lied before I can run this. I actually need to put something here: uh an image for it to show open a button, so we can go ahead and go ui and create a let's start with a button.

A

I'm gonna say button a text mesh pro. It's going to say: do you want to import some essentials for text mesh pro yeah? Let's do that.

A

I can close this out now. We've got to make sure we drag this button in there and we also need to create an empty image here. So we'll just choose image.

A

And I'm going to hold the shift key, I think shift alt y shift alt, so that's going to fill up the whole the whole screen basically, and maybe we can give it a little padding here- am I saying, like I don't know, 40 by 40 at 40 by 40, just so we can see like the screen behind and now this is our image. So again, we need to make sure that we drag and drop our image in there.

A

The last thing you want to do is copy and paste your cid that you got from nft.storage.

A

And there we go so again: I'm gonna save this and hit play. No, I need to put the image uh the button in front of the image. Otherwise we can't click. It then we'll hit play and hope for the best.

A

Yeah, so I actually think that was probably the image it's it's not really the best image. uh Maybe I should try one more here.

A

Okay, I added a different cid here. Actually, the reason that I gave a question mark is because the what I was trying to download was not an image, and then unity didn't really know. So, let's try again and see if this works with a real image.

A

Okay, there we go so it actually downloaded the images it should have so there's a little plug for for build club at nervos. So yeah there. You go. Congratulations and you know in just a couple of minutes: you've basically downloaded an image from ipfs using a gateway and you've got it working in your unity game. Now. What we want to do next is look at how to do the opposite. So let's take a screenshot and upload that and then use that upload to make some metadata.

A

This is a little bit more complicated, but we can still get it done pretty fast. So, let's go ahead and start before. We can go any further with the unity coding to upload an image and metadata. We need to get our api keys first, so it should have a name and an api key. So go ahead and copy out that entire api key and go back to unity.

A

And once you're in unity go to your nft storage, go to your scripts, go to your constants and then go ahead and open up your keys. So it should have a name and a key here. Make sure that you don't accidentally publish this to github.

A

As you know, if you do that, then someone's going to steal your keys, so go ahead and save that that needs to be done. Otherwise it's going to throw some errors.

A

Okay, once we're back in unity, we can just disable this old script, so it doesn't run and create a new one. Let's call this capture image and upload.

A

I like to be very verbose in my my naming. I like it to say exactly what it's doing.

A

We can edit the script again, I'm using writer and I'm going to remove the update function just like before we are not using uh any update function, we're just doing everything in co routines for us so that um you know it does everything step by step. The way it should in order.

A

Okay, so once again, let's just set our variable spur, so I'm going to set a serialized field again private, let's just say button again we're going to use another button.

A

And let's see I'm trying to think off the top of my head? Okay, we want to set some metadata this time and we're just going to set the metadata manually. So we could do this programmatically. You could do it through code to set the metadata, but I think it's easier to see and understand by the editor first. So let's just stick with that and we already have all this set up, so we just need to say, um set metadata and then I'll just call it set metadata.

A

Okay, I think this is a good place to start and then we'll figure out what else we need in the process so just like before I'm gonna say uh we're just gonna add a listener to this button and um you know take a picture when this is clicked.

A

So we'll create a function for this called take picture and we can get a little more fancy. We can say. uh Let's say this button is.

A

Not is uh button, interactable is false, so when it's when it starts, we disable the button so that people can't just you know, keep clicking on it.

A

And why don't we set ourselves a little debug log just for now, just so we know what's going on, we can check it easier.

A

I'll just say button clicked. You know, then we're going to start a co routine, because everything runs in co routines, essentially with this sdk, and we have another helper that we can use here. I'd like to create helpers here, so we don't have to sort of reinvent the wheel. So let's go nft storage dot helpers and we can look at the helpers here so last time we use this generate gateway. So this time we're going to use to take a screenshot and it will just help us to take a screenshot and then pass that back.

A

So to do that, we will need some type of a callback function, so we need a function that will automatically be called when it's done.

A

I'll call this callback on camera.

A

And I'm going to let the ide generate this for me.

A

If you need to manually, create this, it's going to be a private void, nothing needs to come back whatever you name the function and this time it's going to be a byte array.

A

um You know we can call us whatever we want like my bytes, but it will be a byte array.

A

Okay, because that's exactly what we need to upload we're going to upload it as a byte array. So the next thing we want to do is start another code, routine and nft dot storage. Again we could use a using function at the top. I'm just doing this, so we can see exactly what we're doing easier and in this case I'm going to use the network manager and just like last time we have download image. Upload object, get all objects, check objects by cid, delete objects by cid, get object by cid.

A

So again, if you click these, it will tell you what it does, but we want to upload an object.

A

So if we hold our mouse over here, it says we need another callback on finish as well as a byte array. So we already have the byte array. Let's create a callback on finish, so we can just call this. Maybe a call back on uploads and we're going to pass it to my bytes.

A

Okay, so again I auto-generated this, but the type of response you need here is a data response and I think if we hold our mouse over it see here yeah we can actually see the type here. I can't. Oh, I can't move a mess, so you can see here. The type it needs is data response. So that's how you know what to call here.

A

And why don't we look at the data response for a minute so we'll just go to.

A

The declaration here and you can see the data response actually has like a whole bunch of stuff. That's passed back, so this is all the stuff that's passed back by nft, uh dot, storage and a lot of it. You know, probably won't be relevant for what we really need to use, but it's it's all there and pre-set up as a class. So we can go ahead and close that.

A

Okay, so if um this object, which is our data response- maybe we should rename this just so it's easier to understand data response? Okay, so if our data response is successful, then we're going to do something right uh else. We want to do something else and we definitely want to just set like a dbot.log error message saying upload fail and we definitely need to make sure whatever we do at the end. We turn the button back on. So button.interactable is true.

A

So now, at least for sure, our button gets back.

A

Next, we want to see what else we can do with this data response and the data response is going to pass back, essentially a list of values. So this is a list of of all the information for each object we uploaded. So in this case we only uploaded one object, so we only expect one value back, so we want to make sure a few things first, so it was successful, so yay good. We want to say um you know if there's probably better ways to nest this. This is probably a horrible way to do it.

A

Okay, so we should um I'm sorry. We should probably reverse this, maybe here invert the. If so, um if it's not successful, let's just um say it's failed, put the button back and then just return to exit out of this. I think that's good um otherwise, we'll we'll just continue on here. This is probably easiest just to do backwards. Okay, so um we can check. You know if we definitely want to check if the data response is not equal to null.

A

And the uh we should say the data response.value, sorry.

A

It's not equal to null right, just in case there was some sort of an issue, otherwise.

A

Now what we want to do is generate a path again for this, so we uploaded a screenshot, but we need to know sort of where it exists on ipfs or what's what's the cid of it, and you know how can we essentially access it through the internet? So we can do that just like before we used a helper function, so we can say var path is equal to nft.storage dot helper. This is exactly the same held before we're going to generate a gateway path. So again we need to pass the cid and to do that.

A

We're going to use data response, dot values, and so we only are expecting one value back so that we position zero and now we can check it will have like a name, a scope, a type all these sort of things, and really we just need one thing here, which is the cid so then um nft.storage.

A

I should just use a using function: constants dot, a sub domain. We want to get and we're going to use the very first one, and then is this a subdomain? Yes, true, okay, so this is going to generate a path for us and why don't we debug.log.

A

Image found at and then we can say path and then this is where it will be.

A

And uh I guess you know again not super efficient coding here we can fix that later, but we'll make sure that's on okay. Why don't we try from here and then see and make sure this works before we start dealing with the metadata itself.

A

Okay looks like it completed this time. It was a very long process for me here with slow internet, but it went through and finally, at the end we have image found at so we can just go ahead and copy and paste this link.

A

Copy and paste this into your browser and there you should see your screenshots been uploaded to nft dot storage. You should be able to find it in your your files here.

A

So you can see it's right here, it's still in the queuing process. Okay, the next step is creating this into a metadata file which is necessary for nfts and then upload that metadata file. So let's take a quick look at what is a metadata file.

A

And I just personally googled, you know metadata file, nft and there's all kinds of articles about it and I would suggest you go and try and read some of them to get a basic idea, but this is it and a metadata file, essentially is what your actual contract on the blockchain points to it. Points to this file, which you can host an ipfs and it's essentially in json, and it just lists the information about the nft itself, including having a link to where the image is stored on ipfs.

A

So this is an example of a single nft metadata file and so, for example, it has a description of the nft. It has a name of the nft. So maybe, if it's um I don't know, everyone knows about the monkey nft. So you could. You know this is a smoking monkey nft, the name could be monkey nft1 and it can have the image it could have. Potentially an animation url a background.

A

Color youtube some kind of external url, so we can forget about those ones or just focus on having an image as well as we can set some attributes to this, and now this is sort of the interesting part of of where we could work with different things with video games is the attribute could be you give a key value pair.

A

So, for example, maybe all of your nfts have a color and then the value would be red or maybe it would have a stat such as attack, so that the trait type would be attack and the value would be like. You know one two, three four: it could be like super massive or awesome or whatever it is so these attributes are not fixed and how they are interpreted by your game is completely up to you.

A

So when you read this nft later down the line, you can say: okay, this nft has, you know massive attack and it's red. So again, these are are only defined by you in in how you create your nfts or interpret other people's nfts.

A

So let's go back into unity and to see how to create this metadata.

A

Okay, so we're back at the code, part of things and what we've done is uploaded our image. We got a path for it, we have a cid for it and it's been uploaded yay successfully, so we'll go back up to the top, and I actually made a little mistake here. I I shouldn't have said set made a metadata here. You can basically ignore this. um We're going to do this now.

A

So how to add the metadata field to your editor is again I'm going to create a serialized field and again we're going to use nft.storage this time, we're going to use dot and the standard that we're going to be using for this metadata is the erc 721 standard.

A

So if you've been following along with some of the other talks- and you know you may have forgotten- because it was a ways back now- the erc 721 is an nft standard that you know most stores or games or whatever else you're going to understand it's a fixed way of storing the data. So we want to use this erc721 metadata and so we're going to use that one and then say um two options here: we're gonna use metadata and then, let's just call it nft metadata.

A

So I'm gonna save this and go back to the editor just so we can look at it for a minute, okay, and we can see it right here. If I drag this over a bit, we can set some different fields and you know, maybe the order of this should be changed. They're not really super logical, but the description could be. This is a simple screenshot that could be the name of this right. We don't need an external url.

A

You can look up what all these means, but let's just focus on the important ones, so the image one we want to set by code because we haven't taken we're going to take a screenshot and set it up. I mean we could just copy and paste this one in as the image and deal with it that way, but we want to set it. You know by code the minute that we take a photo and the name of this I'm just going to call it screenshot.

A

um I don't know we'll just call it screenshot like one or something will be very verbose. um Now the attributes itself. We can set some attributes to this and we are just going to deal here with the um well. Why don't we not set any attributes for now? It's really not necessary, but you could go ahead and play with and set some different attributes in there.

A

So again we could set this data by code, such as a name and a description, all these kind of things, but just for simplicity's sake, we're going to set it in the editor.

A

Okay, we're way back down here when the button is is interactable again and the upload has happened.

A

You know, let's, let's set some more information. Okay, so we have this nft metadata now and we have.

A

um We want to set the ipfs we're going to set the the path right, so we could either pass in a path and set it manually or I could just set the cid, so I'm going to just pass it to cid, and it's going to do this for me. um So it's data response, dot values, value zero, dot cid, so we don't have to go through this whole process of creating a path here.

A

If we don't want to right, we could comment this out because it's going to be done here- and we should probably include this in here-.

A

Okay, so we set the path.

A

The next thing we want to do is change this to this metadata to a byte array, because we can only upload byte arrays and before last time we took a screenshot and it passed us back a byte array. So we need to make this into a byte array and thankfully created a helper function for this to make it easier. So why don't we say uh bytes?

A

I think it's! uh No s right so byte because it bytes is equal to because that's you know the end result we want so we're going to say nft.storage.

A

Dot and we're going to use the helper function again and let's see here, we have one called erc721 metadata. Two bytes.

A

We can go ahead and pass the information in there. What are we gonna pass in as we are just gonna pass in this nft metadata right so that we have saved nfg metadata and it's going to give us the bytes. Now we can go ahead and upload those bytes and we've already uploaded something before right. Right here, upload objects, so we can just copy and paste this there's going to be no difference, we're going to start and call a co-routine use.

A

The network manager upload an object, have some sort of a callback, and we want to upload these bytes here, and maybe we should rename this. It's called like. um I don't know data the bytes or something now we're going to need a different callback. We don't want to use the exact same callback um because, where we'd be calling back itself here which which gets really confusing so uh let's call back on um metadata upload.

A

Cool and create a method for that right, so it's just gonna have like a data response just like before and just like here, let's just copy this out, because it's going to be the same, so fancy data response. So if the data response is not successful, upload fail of metadata- if it is successful, then we're going to do something with it and you know in this case, essentially the process is done. We just want to make sure that we know that it is done so uploaded metadata successfully.

A

I still can't spell and type- and the last thing we're going to need, though, is we still need a path to this metadata that we've uploaded, and why is that? It's because we need to use that metadata that we uploaded and we need to pass it into our smart contract when we mint this nft, so we're minting our new monkey nft through unity or we're minting our new game item or whatever. It is, for example, when we mint that item we need to pass it the metadata, so it knows essentially what it's minting.

A

It needs the picture, the data, the name and everything else. So we need to make sure that we get that and to do that again, it's pretty straightforward. We just need to essentially generate a path- and we've already done this up here. So let's just steal this code again put it down here and just like before.

A

We need the data response and we only uploaded one object so we're only respecting expecting one response, so that'll be at position zero and we just need to see id from that and we're going to use the subdomain blah blah blah.

A

Let's copy this paste here and we're just going to debug the path here, so we can just see it because okay.

A

Save this and go back to unity.

A

And let's do something to make sure this is unique, so we'll just change the color here to be red.

A

Save it and hit play and and hope for the best.

A

Okay, all done so, we know the image is uploaded to here and we've uploaded the metadata successfully. So let's go ahead and grab this link and copy and paste this into firefox or whatever browser you're using here, and hopefully we should knock on wood. Yay, see a json file, so firefox automatically recognizes this as a json file and and gives us information about it if you're using different browser, it might not.

A

So it might look a little bit different, but you can see that this is our metadata, that we can just pass this into to our smart contract.

A

So there you go you've gone through the whole process of both downloading something from nft.storage, as well as taking a screenshot uploading, the images creating a metadata and then having the cid. For that.