Blockchain Game Development in Unity with the Thirdweb SDK

[00:00:00]hey what's up everyone and welcome back to another video we're going to be going over our Unity SDK and how you can use it to build your very own blockchain and web 3 games in unity we'll first go over the basics of what the unity SDK is and then we'll go through getting started with unity and how to set up your unity game with the unity SDK then we'll go through some of the basic components to get started building your very own blockchain and web 3 game so again third web's Unity SDK makes it easy for you to implement blockchain and web3 functionality to your unity game it makes it easy to do things like connect your wallet interact with smart contract and utilize features like nfts or even marketplaces within your game you can even check out more about our Unity SDK by checking out our docs we'll link that down in the description below but let's actually jump onto the computer here let's set up a unity game and also set up our Unity SDK with it so on my computer here I am on our Unity docs for a third web and we're going to get started now the first thing we need to do is actually download the the unity package so we're gonna come to this GitHub release page we'll link this down in the description below as well and you can download the unity package that you want to use we're going to download the latest version which is version three and you can just click on that to download the file and once you have it downloaded we're then going to jump into Unity so I'm going to open up my Unity Hub here and we're going to create a brand new Unity project so in the top right we're gonna hit a new project and you can choose whether you're making a 2d or a 3D game we're going to get the we're going to name our project here so I'm going to name this Unity SDK and we're going to create that project and it should open us up our Unity editor once it gets started and once your game opens up in your Unity editor you'll be brought to a screen similar like this as if you're building your of your own unity game now we need to import our Unity SDK package so up at the top under assets we're going to come to import package and we're going to select custom package here you'll go and grab the unity SDK that we just downloaded and we'll hit open you'll have your import page here and it'll have all the things that will be imported part of the unity SDK we'll check off everything make sure everything is checked off and hit import and once you have imported all the packages for the udine SDK you can see now you have a third web folder down here within your assets folder and this is going to contain some components that you can use to easily start interacting with your smart contracts within the core folder we do have our prefabs here the most important one that we're going to go over is the third web manager down below that in the examples folder we have more prefabs here and this is going to contain prefabs like your connect wallet button and everything so you can easily Implement just this prefab and have the ability to connect your game to a wallet so let's first go over that prefab within uh sort of core folder within our prefabs we're first going to go over the third web manager I'm going to drag this into my sample scene here and we're going to click on our third web manager and we're going to take a look at it here on the right now the third web manager is going to allow us to customize our third web SDK settings and it's going to make it really easy for us to start implementing the third web SDK to our game now we're going to go through the different areas that we can customize Under required settings this is as it says required settings for you to set up for your third web manager and the most important part is the chain so this is going to be the chain to initialize the SDK with so whatever smart contract you're interacting with you're going to set it to the same chain as that smart contract now I do have an example smart contract that I'm going to be using within this video that is deployed on the Mumbai Network so I'm going to make sure that this is set to Mumbai down here this is going to be your other supported chains that you want to support within your app so you can allow a user to switch networks or chains and you can list down your supported chains here you can also override your RPC with your very own RBC if you have one if not it defaults to third web's rpcs so that is the required settings main thing is just setting the chain to the chain that your game is going to be interacting with then we have app metadata and here you can set your app name description you can even add your app icon and app URL and that is going to be again for your apps metadata below that we have storage options so you can set your own ipfs Gateway URL if you have one if not again it defaults to third webs one but if you do have your own Gateway you can override it right here you just need to paste in your gateway URL next we have open Zeppelin Defender option now if you aren't familiar with open Zeppelin Defender it is a gasless relayer and all you need to do is to set it up which we'll go over in just a bit is to put in your relayer url your forwarder address and this is going to set up open Zeppelin and gasless transactions throughout your game below that we have the magic link option so magical link is an email or mobile phone a wallet option and you can use this as a wallet connect method you just need to put in your magic link API key here a similar thing is going to go for paper option which is down here it's going to require your paper client ID and paper is another email wallet support right above that between it was the wallet connect options so if you have a wallet connect supported wallet and you can just add in your project ID here and you can support that wallet as well and a final wallet support option is going to be the smart wallet option and this is going to be third web smart wallet option which is erc4337 smart contract wallets and you can implement this here you just need to set up your Factory address and your third web API key and you have to just check off if you want to allow gasless transactions and for the paymaster to take care of that so again that does it for the main area of the third web manager you can customize those options will actually go through setting up things like paper wallet and opens up in Defender here that way we can do gasless transactions and allow users to sign in with an email to our game now before we start using our throat manager and creating our script to interact with our smart contracts we're going to add another component to our game here that is very important which is a wallet connect feature so again in order to interact with smart contracts and a user does need a wallet to start interacting with those now we do have many wallet connect options so based on how you want to implement it into your game you can choose from different options and we'll go through it right now so in my sample scene here I'm first going to create a UI and I'm going to create a canvas here and we're just going to call this menu so there's my little menu canvas there and in the third web folder under examples we're going to go to prefabs and within here there's a bunch of prefabs but there's a prefab connect wallet and we're going to get that prefab and drag it right into our menu campus you can see once we dragged it in in the top right of our menu here if I zoom in we now have a connect wallet button and I'm just going to run the game here really quick and if we click the connect wallet button you can see we get popped up this modal here with all the different options to connect a wallet to your game now we do again supports email which is going to be through magic or paper we have injected wallets so your browser wallet metamask coinbase wallet connect smart wallets we even support hyperplay and you can continue as a guest which sets up something called a local wallet which creates a wallet under the hood and generates a wallet automatically for the user now we haven't built out the game or anything so we won't be able to use the wallets up here but we can use local wallet because it's just going to generate it locally on this device here but we can kind of see what it would look like if a user were to connect their wallet so if we continue as guests here a local Wallet requires a password for the wallet and then we just connect and you can see here we now have a connected wallet it shows the wallet address and information how much Matic or crypto is stored within that wallet for that specific chain and you can see here it's set to Mumbai because we had set our chain for our game to Mumbai but here you can see you can switch over to any of the supported chains that we had on our list within our third web manager we'll stop that there if we click on our connect wallet prefab we'll open up our inspector a little bigger here I'll close that and again let's take a look at the connect wallet prefab and see how you can use this within your unity game so first off here we have this little drop down of wallet support so you can support all those different wallets that we just showed you but you can also take away wallets if you only want to support certain ones so let's take away the injected browser wallet uh we'll take away coinbase wallet uh wallet connect will take away hyper play as well and we'll take out smart wallet just for here we'll keep it simple with email wallet with paper which we'll go over on how to set up metamask and then we have a local wallet which we just showed which creates a wallet under the hood and again you can add in another wallet say you want to add in a coinbase wallet back in you can do that as well now one thing to note is if you're using a local wallet and paper wallet you do want to keep your email wallets up top just because in the UI that is where they're placed and then your local wallet down at the bottom because that's where the guests uh continuous guess button is going to be every other wallet you can put in the middle within any order that you want so again that is the supported wallets now down here we have the additional event callbacks so these are callbacks these are function callbacks that you can call once something happens with the connect wallet button so when a connect wallet button connects to your wallet you can also call additional functions that you can put in right over here along with disconnect switching networks and if the connect failed or disconnect failed you can also add your own functions in here as well and we're gonna go through this a little bit once we start building out some simple components for our game now down here you'll see it is the UI elements this is um emphasize as a danger zone and everything in here is controlling the UI elements of the connect wallet button so you have free range to customize the connect wallet button with your own UI if you choose to do so just need to connect your UI components properly to the correct places you can see here depending on the connect wallet button we have Network images we have the drop down panels so everything in here you can click on you can take a look right here in your sample scene where they are and you can create your own custom UI for your connect wallet button so what we'll do now is let's actually just build this game really quick for web and then we can see and go through all the options of connecting wallets and before we build that game it was a little bit I was going outside of the screen so under our menu here under the canvas scaler let's just close this right here uh we're gonna set it to scale with screen size guys and we're gonna set it to 19.20 by 1080. so if we come back to our build settings here make sure we have it set to 1920 by 1080 and let's build it out one more time save that and there you go we now have our connect wallet button so again if we hit our connect wallet button we're brought up with these different options to connect our wallet we don't have our email set up just yet we'll do that in just a moment we'll test our browser wallet here so what this is going to do is choose the injected wallet for your browser you can see here that coinbase pops up as a default wallet for my browser so you can connect it there we'll select metamask you can see it brings up the option to connect metamask I can hit next and connect here and we are now connected to my metamask wallet you can see my wallet address the Matic I have in my wallet here disconnect out of there coinbase wallet so again directly pulling up coinbase wallet if you have that installed we also have wallet connect if you selected that you can connect using wallet connect V2 so any wallet that supports wallet connect you can scan the wallet connect here or you can choose from some of the wallets that they have here including safe as well and you can search the wallets just like you would for any type of wallet connect so we'll close that uh down here we have Smart wallet which we don't have set up uh we're not going to set that up in this tutorial but we do have a link down in the description to the tutorial on how to set up a smart wallet and again in the third web manager you can Implement your factory contract and your third web API to allow smart wallet connects and again you can do continue as guests where you just have to put in a password to create a wallet it'll create and generate a wallet under the hood for us you can see here this is our wallet that we created if we disconnect and we continue back in we can just log in back to the same wallet again using the same password so that does it for our wallets so first we'll start off with setting up our email wallet we'll set up a paper wallet uh in here we're going to head over to paper.xyz we're going to go into our dashboard here once you sign into your dashboard right over here under auth settings we can set up our application name our domain that it's going to be on and then we can get our client ID so we're just going to call this Unity SDK we have to set up our allow listed domain so let me just add a domain here and we're going to get the domain our game is running on I'm gonna paste that there save that and then we can get this uh client ID here so let me copy that and if we head back to our third web manager here and our Unity editor and we go under paper options all we need to do is paste in our paper client ID there and we now have paper wallets set up with our application allowing our users to connect a wallet to our game via email so let me just I'm going to close this guy out here we're going to build and run this game again so right over here we can now connect we can sign in with an email so we'll type in our email there we'll hit connect and you'll be prompted up with this verification so you just gotta check your email I'm just going to check it here on my phone and type this in so and with that you can sign in with an email and you can see here that we are now signed into our paper wallet and we signed in via email and that there is a basic overview of some of the wallets that you can use using the unity SDK next let's start using the SDK to start interacting with our wallet and smart contracts so we'll first start with our wallet and we'll kind of go over a simple way of getting the wallet address of the wallet that is connected so under our menu here we're gonna create a new component and we're going to add a script we're going to call this Unity script and we're going to create this and connect it to our menu component which is our canvas so once that's created we'll just hit the options here and edit our script to open it up in our code editor I'm going to remove this code here and we're gonna add at the top using a third web here uh because we're going to be using the third web SDK and what I'm going to do actually is come back to our Unity editor here and I'm going to add some text up here in the top that will be used to display our wallet address so in my menu here I'm going to right click add a UI component and add a text mesh Pro and we'll just call this a wallet address well actually we'll just call this a status text because we're going to be changing this text uh throughout this video so we're going to put that above uh wallet connect put it at the bottom so that it overlays everything but status text here we're going to have it say um current status and we'll just make this a little larger Center it and then drag it here at the top so we're just going to create a reference to our text mesh Pro so make a public TM Pro dot text mesh Pro ugui we'll call it text we'll save that come back to our Unity editor here we'll select the menu and now under the unity script we have this reference area where we can put our text that we want to reference here so we're going to click and drag our status text right into there and now we can kind of change this text accordingly so we're gonna open up our code editor here and we're going to create a function here so we're going to create a public void and then we're going to call this uh change text to address and what this is going to do is change the text to our connected wallet address now here we're going to create a variable that holds our results here and what we're going to do is get that wallet address and with the third web SDK we can actually do that now to create an instance of the third wave SDK all we need to do is put third web manager dot instance dot SDK and now we can start interacting and using our SDK So within our SDK we have our wallet and we can get the address of a wallet using this now we do need to make this an async function so we're going to add a weight and async here and then we can change the text to our results so we'll change the text text to the results that we get which should be the wallet address of the connected wallet so now we'll have that save and what we'll do here is we will build and run this again and you can see here now with our new bill we have current status so we can connect the wallet so let's connect our metamask wallet here and oh well we didn't set it up to change our text here so coming back to our uh Unity editor here remember on our connect wallet uh connect wallet prefab we have those callbacks that we can call so we have event callbacks so on connect we can actually call a function here so we're going to drag in our menu script here and we're going to select the change text to address here so when a wallet is connected we'll actually call that change text to address function that we created in our script so what we'll do is we'll build this run it one more time we'll save that and this time again when the wallet connects it'll then call the function that we just created so right over here we have our new build we'll hit connect wallet we'll connect to our metamask you can see here we now have the wallet address displaying so if we disconnect and we connect with our email here we can again Connect using paper we just need to put in our code again and there you go you can see the wallet just changed and it now matches our paper wallet so again just a simple way of showing you how you can use the SDK and start actually interacting with things like your wallet so we were able to get our wallet address next let's start interacting with a smart contract so I have a test smart contract here which is an ERC 721 smart contract we have some nfts already cleaned and minted and what we're going to do is start interacting with the smart contract from Reading first some read functions from here like the balance and everything of the contract to see how many nfts from this collection a wallet holds to actually being able to claim an nft from this collection so let's copy that address there and let's head over back to our Unity editor and in our menu here we're going to add a couple buttons so in the UI I'm going to add some buttons here I'm going to add it let me just enlarge this button here we'll make it 300 here 100 and then let's enlarge the text as well this one is going to be a say get balance we're gonna get the nft balance of the connected wallet so let's just take this button and move it a little bit up here uh we're gonna take that button we're just going to duplicate it and then have this one say claim nft so I was going to say claim nft and we're gonna move that button down a bit so we have two buttons here one is gonna perform a read function on our contract the other one will perform a write function and again this is to show how you can start interacting with smart contracts within your unity game so we'll do the read function first which is going to get the balance of how much n of T's is held by the connected wallet so we come back to our code editor here we're first going to create a variable here to hold our contract address which is going to equal that contract address that we had which was our ERC 721 then we're going to create a function so the first one is again going to be a public async void and we're going to call this uh get nft balance so in order to get our nft balance we're first going to set the text to not loading but uh getting balance so we'll just set the text to say that it's performing this function here and then what we're going to need to do is in order to actually start interacting with a contract we have to get our contract so we're going to get our contract stored under contract and in order to get our contract all we need to do is again get an instance of our SDK and what we're going to do is call the get Contract here and pass our contract address that we had stored up at the top now that we have our contract address we can start calling functions within our contract so we're going to save our function on their results here and we're going to await our contract and we can specify if this is a third web pre-built contract we can specify that is an ERC 721 and then with this we can actually run the balance here and get the balance it'll run balance and get the balance of the nfts for the connected wallet then we can set the text to results we don't need to convert that string we'll just set it as results here then coming back to our Unity editor we can then on our button our get balance button we can add a on click function here which will be from our menu or Unity script and we can run the get nft balance function so what we'll do here is build and run again and there we have our new build so we'll connect our wallet and we didn't overlay our connect wallet button so this is what happens when you don't put your connect wallet button at the bottom but we're going to connect to metamask here and you can see we have our wallet address right here now that we're connected and if we hit get balance you can see it's getting the balance and then you can see that the balance that this wallet holds is four now if I disconnect this and we connect with our paper wallet you can see now that we're connected with our paper wallet here and I hit get balance it should be zero because this paper wallet doesn't own any of those nfts again this was a way of reading information from our smart contracts and displaying it within our unity game now let's actually interact and use a write function from our smart contract allowing us to actually claim an nft from it all within our unity game so coming back to our Unity editor here um we're gonna first drop that wallet button below our buttons there so it overlays it and then we're going to open up our code editor here back to our script and we're going to create a function to claim an nft so we're going to create a public async function so void and we're going to call this a claim nft and in here again we'll set the text first to uh claiming nft we'll then have to get our contract again so again just like we did above in our get nft balance we'll get our contract then we'll store our results and what we're going to do here is await our contract specify our contract again which is an ERC 721 and within this we can actually call the claim function here and just put in the number that we want to claim so for this example we'll just say we want to claim one nft and then we'll just say uh change the text text to equal nft claimed so again it'll prompt us saying that claiming nft is happening we'll then get our contract and then call the claim function from our contract and once the nft is claimed it will show that we have claimed the nft and just in case it doesn't let's actually do run a try catch here and we will copy this out of here and paste that in here and if we get an error we'll just uh debug a log that there was an error claiming the nft so coming back to our Unity editor we can then come to that other button which is our claim nft button We'll add it on click drag over our menu here and in our script we'll run the claim nft function so we'll do here is build and run this new build here then with our new build again we can connect the wallet so let's connect our metamask and I'll we'll explain this in just a moment so we have our metamask wallet connected and we'll hit get balance you see we have a balance of four so now let's actually claim an nft so we have claiming nft here we're actually going to get the transaction popping up within our metamask here and we can actually confirm that transaction you can see here it's claiming nft and you can now see nft has been claimed so if we hit get balance again we now have a balance of five now the reason we did our metamask wallet first was because metamask again we have like a browser extension that we can confirm transactions and everything through uh if we were to disconnect and let's connect with our paper wallet again with our email wallet here again getting the balance we have zero we won't be able to claim an nft because we don't have a way of confirming a transaction and even when you're building a blockchain or web3 game you may not want users to interact with signing transactions with wallets and doing all these extra steps some might not be familiar with it so what you can Implement is something like gasless transactions so you can use like we explained before in our third web manager you can use something like open Zeppelin Defender to create a gases relayer to cover the gas fees for transactions so let's actually go over and set up a gas s relayer that way when someone creates a wallet say with an email or something like a paper wallet and they don't have funds within their wallet they can still perform transactions claim nfts and play our web 3 game so we're gonna go to open Zeppelin Defender site here we'll drop the link down in the description as well we're gonna sign in here and once you're signed in we're going to create a gasless relayer so in the left hand navigation we're going to go to relay here uh you can see we have some relayers here but we're going to create a new relayer uh we're going to name this so we'll just call this Unity SDK and we're gonna put the name of the network that we are on so we're on Mumbai so depending on the network you are on um as long as open Zeppelin supports it you can add that Network in here and create a gases relayer for it so hit create here now this is going to create an address that is going to take care of the gas for us so right now you can see this balance is zero so we need to fund this here so we're going to copy our relayers address here and I'm going to head over to my metamask and send over somatic cool so what I'm going to do is I'm going to send over 0.5 Matic we'll confirm that and we'll send over that 0.5 Matic to this address here that is going to take care of our gas for us so we'll give it a moment and then there you can see we now have the 0.5 Matic here and once we have a relay we're going to come on over to Auto task and we're going to create a new auto task we'll name this one Unity SDK we'll make sure it's a web hook and we're going to select the relayer that we're going to be using so we're going to use our Unity SDK relayer down here in the code we can actually remove that code here and we'll link this down in the description as well this is some code here that we have set up for you to set up your gas list relayer you can copy that paste it in here and then create your auto task and once you have that auto task created all you need is your web hook URI right here which will bring back into our Unity editor we'll select the third web manager and under the open Zeppelin Defender option we'll paste that in to the relayer URL there next we need the forwarder address and you can come over to uh let's say here we'll link it down in the description as well but you can just take the forwarder address right over here come back and paste that into the forwarder address and once you have that all set we'll go and build and run this project again and what we can do here uh we'll test this out with metamask so we don't need to sign in with our email really quick uh we'll get balance and you can see here we have five we can hit claim nft and again this will claim an nft we're going to get a transaction with metamask but you can see here it's not a transaction to pay it's just a transaction to sign so we can actually sign here we're not paying anything out of our wallet and once the transaction goes through we would have claimed another nft so again we have claim another nft we can get balance and now we have six so now let's try our paper wallet so we'll sign in with our email here so we have our paper wallet here we can get balance uh should be zero and then we can claim nft with our paper wallet now again we just signed in with an email to create this paper wallet and we set up gasless transactions so now claiming this nft we're not confirming any transactions or anything we're not paying anything and we're able to still claim an nft um by just creating a wallet with their email so you can see here nft is claimed we can get balance and now we have one nft so we'll do one more thing here and we'll connect our wallet and we're actually going to use our local wallet again this is the wallet that is created under the hood we make it as a continuous guest option because all a user needs to do is create a password so no email or anything they just give it a password they'll be connected right over here given a wallet address we'll check the balance zero nfts in here we'll claim an nft with this and again this was just a user continuing as guest a wallet is created under the hood for them they can claim an nft and they can play our game so again an nft is claimed we'll get the balance and now we have one nft claimed to this wallet so we've gone over quite a few things from setting up the unity SDK with our Unity project we've gone over the third web manager which allows us to interact with the third web SDK we've created our connect wallet button and it kind of gone over the different wallets that we support and that you can support within your unity game and we've also gone over how you can start interacting with your smart contracts within your game as well now the next thing we're going to do is go over how to actually build out your game we do support web native and mobile apps with unity so you can build your app across the board and all those platforms right now as you can see we've been doing this on web but you can also build this out on Native and mobile as well so coming back to our Unity editor here what we're going to do first is we'll go over the web build we went over it briefly so we'll go over build settings here so switch over to webgl uh if you go to your player settings the one thing that you need to do is under the other settings is uncheck the auto Graphics API once you have that unchecked you can then build out and run your project just like we did so we'll just run it out one more time save we'll replace that and you can see here that you have your game ready to play on webgl so again our connect wallets and everything and next we can so head back to our game here I'm just gonna get rid of a few wallets here we don't need all our wallets we'll just use the ones that we've been using here so I'll get rid of injected coinbase wallet connect smart wallet and Hyper play so we'll just stick with the paper metamask and local wallet here and next we'll build for Native so we'll go back to our build settings here we'll go to our Windows Mac Linux build here uh we'll switch platforms and I'm running this on a Mac so we're going to do Mac OS here and we're going to make sure that it works on Intel 64 and apple silicon then we'll come to our player settings here and we're gonna go to resolution and presentation and we're gonna set this to windowed and yeah 1080 by 1920 so we'll build and run this so we'll build and run we'll save it as Mac and it's a little bigger here but you can see we now are running this on top of our Mac here as a native game so you need the SDK we can connect a wallet so the cool thing with the metamask is because it isn't connected to a browser you do need to use your Mobile app so I have my phone here we're going to open up the metamask app here and the updated version of metamask here you do have the ability to scan QR so you just scan the QR on top of the game here you can see here that we now have the option to connect on our app so we'll connect here and we are now connected to our app via metamask using the mobile app so I can hit get balance again and this shows the same exact information so we got six and if we wanted to we can claim an nft so we'll do it one more time here you can see on my app I do get the signature that I need to confirm in sign so we'll sign that and now that I have signed that signature there we're claiming the nft again gasless and we should get a claimed nft in just a moment there you go we have claimed nft we'll check the balance one more time now we have seven so now let's try and connect with our paper wallet and do the same so again paper wallet again people are just going to be signing in with an email so we're gonna get our code again but this time we also have to put in a recovery code because it's a brand new app so we're going to paste in the code here and then submit so you can see here we have now connected to our paper wallet um this is again on our native Mac app we can get balance we should have one from our previous claim then we can claim another nft and we claimed another one and we can check the balance here and now we have two so again that did it for our webgl and our native platform apps and there you have it we went over the basics of getting started with the unity SDK with third web we covered how to get it set up with your Unity project we went over a few key features like the third web manager and the connect wallet prefab that you can use which is going to jump start and get you going on creating your very own web3 and blockchain game so I hope you folks enjoyed this video if you did don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more videos just like this and if you aren't part of our Discord Community yet join the community of amazing Builders just like yourself if you have any questions or you need any support on building your web 3 or blockchain game you can drop your questions down in our Discord Channel and our support team will be happy to help you out but again I hope you folks enjoyed this video and until next time see ya [Music] thank you [Music]