Unity NFT Metadata Upload to IPFS with NFT.Storage

[00:00:02]hello everyone welcome to dark crossing devlog um like i said uh in the last video um i mentioned that i built a very cool function where you can like take a screenshot if you avatar right here and then you can upload your customized avatar to ipfs and then after that it will generate a json file containing the fps hash of that image and then eventually you will be able to mint the uh avatar as an snft so um let's just uh do like a quick demo here um so if i go to shop right here and then we'll just do some like a random clothing maybe i'll do this one instead and then um and then if you go to the this button right here you can take a screenshot of your avatar and let's take a look at the console right here to see what happened in the behind the scene so after you take a screenshot you can upload it to like ipfs you just click this button right here as you can see it's likely running and then it will return like a cid hash and then after that you will generate json file and also upload that json file to ipfs and finally you will be minting this avatar snft and just copy this hash and then you can go to the marine tv network and then you just go to just going to paste that hash transaction hash and see if it's already success and it seems like it's already being transacted so we can then just go to um or wallet and then let's see so as you can see it already came through right here um it probably took a while for the image actually showing up so let's just gonna wait that but in the meantime i will show you how to how do i build this frame mint within the unity game one by one um and then uh and then of course in the end you can merge all those functionalities into just one button and you just click on maintenance make the user like right now i'm just using my own private key so i'm just like pay for the guest fee for whatever i mean they do but if you change the contract a little bit you can also just ask the user to pay for the guest fee so that's pretty much it for the demo so let's start with the first button right here where you can take a screenshot and save the image in either your in your local computer or the unity cloud so let's take a look at the function so for that button i use this function where i use the code routine there are a lot of like youtube videos about how to do a co-routing function and then also how to take a screenshot in unity so it's not gonna be my major focus right here uh so i'm just gonna mention couple of the tricks that i put in here so um just give you a better idea so for this couple lines i basically just pick a uh the center point for my avatar and then i um i did like a ratio thing so um i know like people are using different screens and they're gonna be different widths or heights so and you it's not going to work if you use like a fixed um a fixed width or height that you input it from in your gaming object so what i did is i instead i input a ratio um so right here i have like a float where you can identify the ratio to the screen and determine the the width and height of the um of the dimension of the image that you're gonna take so um so since we're gonna take a square so i just uh make that um i make the width equal to the uh height right here and then the rest is just how you take a screenshot there like so many tutorials on that but you can just copy that this parts for for convenience and then it will either if you are using webgl you want to use just uh this function so persistent data path instead of the data bypass because if your application the database pass it will save it to your local computer and it doesn't work on webgl if you're playing like your unity game on uh browser and then it will automatically save to the unity cloud i think it's like they use indexeddb okay let's move on to this line right here so for the image if you um if you want to display like i did right here you can just make an image object and then you can set the image that's right to whatever you just screenshot it and then and then you and the screenshot will be showing up here so that's pretty much it for the screenshot part so you after this button you will have your image either stored in your computer and you're gonna upload that from your computer or you it will be stored um in the web the webgl cloud unity cloud and then they will upload from there instead so let's move on to the next button right here which we will be uploading the image that we stored in either the computer or on the cloud to ipfs so as you know we have ninata or nft storage as the gateway for the those ipfs file and in this case we want we will be using an empty storage and the reason being that they have this really awesome unity interface storage c-sharp file that we can just simply use there the function that they created to upload the image to to ipfs so there is a very awesome tutorial i found online and for some reason they only have eight likes including me where it went through how you sign up for nfv storage how you um how you get the api keys and how you use the function call to upload the image to ipfs um and then it will be reflected on your the netstorage account that you have so with that being said i will not going to go through everything they mentioned in this video but i do want to mention that they also made a very awesome port request so if you are just going to use the default one that the default c sharp the nft storage created you will not be able to upload images so you will only be able to upload text i think to uh nifty storage so what this uh team did is that they uh actually um sorry uh let me go back to it they made a pull request and then they made the changes to the pub require to in the pro requests where they um where they uh add this function um such that um if you're calling this function right here and you will be able to upload images or any types of files to nft storage without a restriction so that's very important i will also put this link in the description um and you can just copy and paste and change whatever they add or subtract from the original c sharp script and then just use that in unity projects but also in addition to what they did i also made some changes to their pro requests so let's take a look at the script i modified in addition to their poll requests so the only line i changed uh is right here i commented on this uh part where it cost a default request headers and add the authorization to the header um the reasons being that um when they uh made that pull request they add this new method right here where you uh also call the exactly the same uh method uh where you add the authorization to a header and i understand they what they made is that they in this if statement uh they trying to remove any duplicated um authorization headers but for some reason that didn't work and then unity is complaining about it so um you cannot access more than one authorization for some reason so i just comment that part out and then and then just leave everything uh as it is right here um so now you will be all set for um use this script in your unity project so if you go back to unity and uh i created like a manager like a screenshot a manager here and i put the screenshots handler that i made before and then also the empty storage clients that we modified right here and then in here if you go to the screenshot handler and if you go to this method like a super simple method i used for the second button uploading to energy storage you can see that i'm using this object in a c and if you look up uh it's actually the name of the storage uh the client nsc so to use that you will need to so drag that entity storage to the manager and then you drag this right here and that's how you use this script in another script and within that script you also need to get your api token uh for your entity storage and then and then and then you'll be offset for uploading um your image to uh your nft storage because uh all you need to do is just to call it that simple method uh in the pub request where it says upload data form sorry upload data from string unity web requests so that's it for the second button right here so someone might be curious about this file right here so it doesn't exist in original c sharp uh file or even in the the pull request so that's something i add in the script because i i want to use this new game object to store the cid being returned from the call because we want to use that cid which pointing to the image and then generate a json file and then upload that into ipfs again in the next step for generating the json file and upload it to ipfs so we need that hash and store it somewhere so that's why i created this game object and if you go to the script i created i mean i copied i also made some modifications so right here in the um post requests so post requests is the new method being added to the poll requests and if you look at this um they only they used to only have this line right here so i add this size to incorporate the response being returned and then i create i created a new data type or sorry the json type called an empty storage custom upload response and the the only reason is that for some reason the response being returned doesn't have like an arrow field whereas the original one they have like an error field so if you go back if you go to the regular one the the original response they have these three failed but for the um the four requests for some reason they only return the first two but not the third one so all i did is just make a new one and then just comment down this part because only that you can correctly mapping the the text response being returned from nfd storage to a correct json file so for these two lines i just use the the game objects and the store uh the city id so if you want to get the cid you just call the parse response.id and then restore that into the text field of the the game object so um that's pretty much it uh for how you upload the nft to uh sorry how you upload the image the avatar to ipfs and we will move on to the next one which is generate json5 actually for the time being i will just record the first two buttons and then i will divide this tutorial into two parts so i will see you in the next tutorial