Sure, you learn that proper. ?
For this week’s undertaking, we cloned a boss struggle in Elden Ring utilizing Unity and Moralis!
You’re going to learn to add Web3 components to the gameplay, turning that candy boss loot into ERC-721 and ERC-20 tokens.
First, we’ll learn to create the loot system. Subsequent, we’ll cowl learn how to remodel these loot objects to ERC tokens, and lastly, take a look at learn how to retrieve the now on-chain information to visualise it within the sport menu.
As all the time, undergo the stipulations to be sure to’re prepared to begin. Let’s do it!
PREREQUISITES
GET STARTED
Clone the undertaking GitHub repository:
git clone https://github.com/MoralisWeb3/unity-web3-sample-elden-ring
Or obtain it as a ZIP file:
As soon as cloned/downloaded, open the unity-web3-sample-elden-ring folder utilizing Unity Hub. By default, it’s all the time really useful to make use of the identical Unity model as used initially (2021.3.2f1 LTS).
With the undertaking open in Unity, we’re prepared to begin!
1. Setup Moralis Dapp
When you open the Unity undertaking, the very first thing you’ll discover is the Moralis Web3 Setup panel:
Let’s comply with the directions detailed under the enter fields. First, go to https://admin.moralis.io/login and log in (join in case you are not already registered). Now click on on Create a brand new Server:
Subsequent, click on on Testnet Server:
Select a reputation on your server and your closest area. Then choose Polygon (Mumbai), as we’re going to be deploying the good contract to this chain. Lastly, click on on Add Occasion:
The server (Dapp) will now be created, and if you happen to click on on View Particulars you’ll discover the Server URL and the Utility ID. Begin by copying the Server URL, adopted by the Utility ID:
Subsequent, paste them to the Moralis Web3 Setup panel enter fields right here:
When you closed the panel for any purpose, yow will discover it once more within the high toolbar underneath Window → Moralis → Web3 Unity SDK → Open Web3 Setup.
Hit Achieved and you’ll have the Moralis Server arrange. Good!
There’s one other choice to fill the server (Dapp) info too: within the Belongings undertaking tab go to Moralis Web3 Unity SDK → Sources and choose MoralisServerSettings:
2. Loot system setup
Earlier than we dive into the loot system setup, head to Belongings → _Project. Right here, you’ll discover all of the property I created for this explicit undertaking, together with the scripts and the Sport scene. Go to that scene if you happen to’re not already there, and we will check out the Hierarchy:
As you may see, we’re utilizing the brand new AuthenticationKit that’s now accessible because of my colleague Sam and the Moralis Unity SDK crew. You could find a selected scene displaying its performance underneath Samples → Moralis Web3 Unity SDK → Demos → Introduction → Introduction (scene):
It’s a super-powerful device that may deal with the authentication on any platform we selected to construct our unity undertaking on. If you wish to know precisely the way it works, check out this video from my colleague Sam:
For this tutorial, the principle factor you must know is that the AuthenticationKit has occasions you may subscribe to. So, for instance, when it connects or disconnects we’re going to execute this:
As you may see, we’re calling some features from GameManager.cs. This script is the StateMachine of the undertaking and will probably be controlling small States, each with its personal performance. The one which handles the loot system is named Victory:
The victory state will likely be activated after the boss dies via this perform within the Combating state:
non-public void OnCreatureDamaged(float harm){ creatureCurrentHeath.fillAmount -= harm; if (creatureCurrentHeath.fillAmount <= 0) { creature.Dying(); hud.gameObject.SetActive(false); ChangeState("Victory"); }}As we will see on the Begin() methodology of Victory state, we name PopulateItemFromDB and PopulateRunes():
non-public async void Begin()
{ _gameManager = GetComponentInParent<GameManager>(); //Assuming that is underneath GameManager _audioSource = GetComponent<AudioSource>(); _populatePosition = creature.remodel.place; _gameItemsQuery = await Moralis.GetClient().Question<DatabaseItem>(); PopulateItemsFromDB(); PopulateRunes();}If we go and test PopulateItemsFromDB() we’ll see that we’re executing a question to the Moralis Database to get DatabaseItem objects:
non-public async void PopulateItemsFromDB(){ IEnumerable<DatabaseItem> databaseItems = await _gameItemsQuery.FindAsync(); var databaseItemsList = databaseItems.ToList(); if (!databaseItemsList.Any()) return; foreach (var databaseItem in databaseItemsList) { // databaseItem.metadata factors to a JSON URL. We have to get the results of that URL first StartCoroutine(GetMetadataObject(databaseItem.metadata)); }}We have to go to the highest of the GameManager script to see what a DatabaseItem is:
public class DatabaseItem : MoralisObject
{ public string metadata { get; set; } public DatabaseItem() : base("DatabaseItem") {}}It’s a customized MoralisObject that has a string metadata subject. What we’re going to do right here is add some DatabaseItem objects to the Moralis Database, each with an IPFS URL because the metadata subject. Every URL will include the identify, the outline, and the URL of a picture.
You should utilize this undertaking to load picture information to IPFS utilizing Unity, however we already did it for you! When you go to Belongings → _Project → IPFS → ItemsURLs you’ll discover these:
Elven Helmet:
https://ipfs.moralis.io:2053/ipfs/QmUEPzw3pkxptNQd7as3JgUhiJPg6ZabQm6dC2y28WhCXN/ElvenHelmet_637905029204254360.json
Carlin Sword:
https://ipfs.moralis.io:2053/ipfs/QmVUXZ5dRVyKTLeiFVCUpp45iMqw9eTQjnuKWruVVJiGsL/CarlinSword_637905030139390627.json
Iron Ingot:
https://ipfs.moralis.io:2053/ipfs/QmUydnyXg7AL26jyztuVjGAzVa8sKx9mSwvuii2gm6QRpg/IronIngot_637905030867477762.json
So time to go to the Moralis Admin Panel and go to the dashboard of your server:
As soon as there, click on on the + button to create a brand new class:
Title the category DatabaseItem and click on on Add columns. Title the brand new column metadata and click on on Add column:
It’s best to now see the newly created desk/class with empty rows:
Now it’s time so as to add some rows, including an IPFS url to every of them. Simply click on on Add a row and fill the metadata column with the IPFS url you need:
Lastly, click on on Add. You may create as many rows as you need. These would be the objects that may present up while you kill the boss.
Now, to grasp how that occurs, we have to return to the Victory script and test once more on the PopulateItemsFromDB() methodology:
non-public async void PopulateItemsFromDB(){ IEnumerable<DatabaseItem> databaseItems = await _gameItemsQuery.FindAsync(); var databaseItemsList = databaseItems.ToList(); if (!databaseItemsList.Any()) return; foreach (var databaseItem in databaseItemsList) { // databaseItem.metadata factors to a JSON URL. We have to get the results of that URL first StartCoroutine(GetMetadataObject(databaseItem.metadata)); }}As you may see, now that we created the DatabaseItem class within the DB and added some rows, we are going to get these objects utilizing gameItemsQuery.FindAsync().
We’ll listing them, and remodel the metadata for each, which is an IPFS URL, to a MetadataObject declared within the Unity undertaking. If we take a fast take a look at the highest of the GameManager script, we’ll see this object:
public class MetadataObject{ public string identify; public string description; public string picture;}Now let’s get again to the Victory script. GetMetadataObject() is the strategy that takes care of this conversion. Utilizing a UnityWebRequest after which the JsonUtility.FromJson methodology we obtain the metadata object:
non-public IEnumerator GetMetadataObject(string metadataUrl){ // We create a GET UWR passing that JSON URL utilizing UnityWebRequest uwr = UnityWebRequest.Get(metadataUrl); yield return uwr.SendWebRequest(); if (uwr.end result != UnityWebRequest.Consequence.Success) { Debug.Log(uwr.error); uwr.Dispose(); } else { // If profitable, we get the JSON content material as a string var uwrContent = DownloadHandlerBuffer.GetContent(uwr); // Lastly we have to convert that string to a MetadataObject MetadataObject metadataObject = JsonUtility.FromJson<MetadataObject>(uwrContent); // And voilà! We populate a brand new GameItem passing the metadataObject PopulateGameItem(metadataObject, metadataUrl); uwr.Dispose(); }}After that, we name PopulateGameItem() passing each the not too long ago created metadataObject and the unique metadataUrl.
Then, PopulateGameItem() is the perform that lastly takes care of instantiating new GameItem objects to the sport world:
non-public void PopulateGameItem(MetadataObject metadataObject, string metadataUrl){ GameItem newItem = Instantiate(gameItemPrefab, _populatePosition, Quaternion.id); newItem.Init(metadataObject, metadataUrl);}If we now go to the GameItem script we’ll see that it makes use of the knowledge acquired to set the identify and the outline, and to retrieve the feel via a UnityWebRequestTexture (in addition to changing it to a Sprite afterwards):
public void Init(MetadataObject mdObject, string mdUrl){ metadataObject = mdObject; metadataUrl = mdUrl; // We get the feel from the picture URL within the metadata StartCoroutine(GetTexture(metadataObject.picture));}non-public IEnumerator GetTexture(string imageUrl){ utilizing UnityWebRequest uwr = UnityWebRequestTexture.GetTexture(imageUrl); yield return uwr.SendWebRequest(); if (uwr.end result != UnityWebRequest.Consequence.Success) { Debug.Log(uwr.error); uwr.Dispose(); } else { var tex = DownloadHandlerTexture.GetContent(uwr); // After getting the feel, we create a brand new sprite utilizing the feel peak (or width) to set the sprite's pixels for unit spriteRenderer.sprite = Sprite.Create(tex, new Rect(0.0f, 0.0f, tex.width, tex.peak), new Vector2(0.5f, 0.5f), tex.peak); uwr.Dispose(); }}Now go to Unity and hit Play. After authenticating together with your MetaMask pockets and killing the boss, it is best to see all of the objects you added within the DB as loot:
The orange one isn’t a GameItem, it’s a Rune, and can all the time drop because it’s not database-dependent. If we return to the Victory script, we are going to see that PopulateRunes() is a a lot easier perform, immediately instantiating a runePrefab which is a Rune object:
non-public void PopulateRunes(){ Instantiate(runePrefab, _populatePosition, Quaternion.id);}Good! Now we all know how the loot system works. ?
3. Deploying Sensible Contracts (Hardhat)
Now that the boss drops objects when it dies, we have to decide them up. Choosing them up means changing these “native” objects to ERC tokens, and to do this we have to deploy two good contracts first. One ERC-721 contract for the Sport Objects and one ERC-20 for the Rune.
Earlier than persevering with, keep in mind you must have MetaMask put in in your browser with the Mumbai Testnet imported and with some check MATIC in it. Examine this hyperlink:
You’ll additionally have to have put in Node.js earlier than persevering with: https://nodejs.org/en/obtain/
Alright, let’s get into it! Create a folder in your desktop and identify it as you want. I’m going to call it hardhat-elden-ring. Open Visible Studio Code and open the folder that we simply created:
Now we’re going to execute some hardhat instructions. It’ll be simple as a result of I’ve already ready the directions.
Go to Unity and underneath Belongings → _Project → SmartContracts you’ll discover the directions and the contract information that we’ll want later.
The INSTRUCTIONS.txt are there for you if you happen to want them later, however now let’s comply with them in right here:
Open the terminal in VS Code and be sure to are underneath the hardhat-elden-ring folder. If not, you may transfer to the specified folder via the cd command. Now let’s set up hardhat by executing these two instructions, one after the opposite:
npm i -D hardhatnpx hardhatWhen executing the second you have to to pick out Create a fundamental pattern undertaking and hit enter a number of occasions:
After doing so, you’ll have Hardhat put in and may have created a fundamental pattern undertaking:
Nice! Now it’s time to put in the dependencies. Execute all these instructions one after one other:
npm i -D @openzeppelin/contracts npm i -D @nomiclabs/hardhat-waffle npm i -D @nomiclabs/hardhat-etherscanAs soon as the dependencies are put in, go to Unity and duplicate the code underneath Belongings → _Project → SmartContracts → ERC-721 → GameItem:
// SPDX-License-Identifier: MITpragma solidity ^0.8.7;import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";import "@openzeppelin/contracts/utils/Counters.sol";contract GameItem is ERC721URIStorage { // Auto generates tokenIds utilizing Counters for Counters.Counter; Counters.Counter non-public _tokenIds; tackle proprietor; constructor() ERC721("GameItem", "ITM") { proprietor = msg.sender; } perform getItem(string reminiscence tokenURI) public returns (uint256) { //DISCLAIMER -- NOT PRODUCTION READY CONTRACT //require(msg.sender == proprietor); uint256 newItemId = _tokenIds.present(); _mint(msg.sender, newItemId); _setTokenURI(newItemId, tokenURI); _tokenIds.increment(); return newItemId; }}Return to VSCode, and underneath the folder contracts, rename the prevailing Greeter.sol to GameItem.sol and exchange the prevailing code for the copied code:
DISCLAIMER – This isn’t a production-ready contract because it doesn’t have any possession safety, so the getItem() perform may very well be known as from anybody with entry to the contract tackle.
As you may see, getItem() is the perform that we’ll name from Unity, as soon as the contract is deployed to mint the merchandise and switch it to the participant tackle. It wants a tokenURI which would be the IPFS url that we bought from the Moralis DB.
Now, underneath the folder scripts, rename the prevailing sample-script.js to deployGameItem.js:
That is the script that we’ll execute via a command later to deploy the GameItem.sol however to ensure that this to occur, we have to rename some current fields in it named Greeter and greeter to GameItem and gameitem (respecting case). Within the deployGameItem.sol file, press Ctrl + F and exchange all fields as mentioned. It’s essential to pick out the AB choice to respect the case:
After this, additionally ensure that the deploy() methodology name doesn’t include any parameter because the GameItem.sol constructor doesn’t want any:
To finish configuring deployGameItem.sol, add this code simply after the console.log():
await gameitem.deployTransaction.wait(5); // We confirm the contract await hre.run("confirm:confirm", { tackle: gameitem.tackle, constructorArguments: [], });So it appears to be like like this:
We’re accomplished with deployGameItem.js so now open hardhat.config.js and we are going to transfer this requirement to the highest:
require("@nomiclabs/hardhat-etherscan");So it appears to be like like this:
Now we are going to add these fields simply earlier than the module.exports half:
const PRIVATE_KEY = "";const MUMBAI_NETWORK_URL = "";const POLYGONSCAN_API_KEY = "";So it appears to be like like this:
We’ll begin by filling MUMBAI_NETWORK_URL which must be the RPC Node URL of the Mumbai Testnet. Go to the Moralis Admin Panel (https://admin.moralis.io/servers), the place we created the server, go to Speedy Nodes → Polygon Community Endpoints and duplicate the Mumbai one:
Paste it on MUMBAI_NETWORK_URL:
Now let’s fill POLYGONSCAN_API_KEY which must be crammed with a PolygonScan API Key. Head to PolygonScan, create an account if you happen to don’t have one and underneath “YourAccountName” → API Keys it is possible for you to to create one:
Do this and duplicate it again to POLYGONSCAN_API_KEY:
Lastly we have to fill PRIVATE_KEY which is the non-public key of your browser MetaMask pockets.
REMEMBER – By no means give your non-public key to anyone!
You may comply with this weblog on learn how to get your non-public key so after getting it, paste it on PRIVATE_KEY:
Alright! The very last thing we have to do earlier than deploying the contract is to switch the module.exports half with this one:
module.exports = { solidity: "0.8.7", networks: { mumbai: { url: MUMBAI_NETWORK_URL, accounts: [PRIVATE_KEY] } }, etherscan: { apiKey: POLYGONSCAN_API_KEY } };So hardhat.config.js ought to appear to be this in the long run:
Now it’s lastly time to deploy the contract. We simply have to run these instructions one after one other:
npm hardhat clearnpm hardhat compilenpx hardhat run scripts/deployGameItem.js –-network mumbaiAnd voilà! After a minute or so, we have now our GameItem.sol contract deployed and verified! If we copy the contract tackle that seems as a log within the terminal and paste it on PolygonScan we should always see the contract there:
Now go to GameManager script in Unity and paste it underneath GameItemContractAddress:
For the GameItemContractAbi, return to PolygonScan and underneath Contract → Code scroll down till you discover Contract ABI. Copy it:
Earlier than pasting the worth in GameManager.cs, we have to format it. Go to https://jsonformatter.org/ and paste the ABI on the left facet. Then click on on Minify/Compact:
After this, click on on the best facet, press to Ctrl + F and seek for “
We have to exchange “ for ”
Click on on All to switch it in all of the textual content:
Copy the formatted ABI, return to GameManager.cs and paste it on GameItemContractAbi:
Nice! We deployed the ERC-721 contract and configured GameManager.cs with its information. Now we have to do the identical for the ERC-20, the Rune.sol contract. It’s going to be a lot a lot simpler and sooner now that we have now the Hardhat undertaking configured.
Return to VSCode and underneath contracts, duplicate the GameItem.sol file. Title the copy Rune.sol:
Now go to Unity, and duplicate the code underneath Belongings → _Project → SmartContracts → ERC-20 → Rune.sol:
// SPDX-License-Identifier: MITpragma solidity ^0.8.7;import "@openzeppelin/contracts/token/ERC20/ERC20.sol";contract Rune is ERC20 { tackle proprietor; constructor() ERC20("Rune", "RUNE") { proprietor = msg.sender; } perform getExperience(uint256 quantity) public { //DISCLAIMER -- NOT PRODUCTION READY CONTRACT //require(msg.sender == proprietor); _mint(msg.sender, quantity); }}Return to VSCode and paste it underneath the newly created Rune.sol contract:
DISCLAIMER – This isn’t a production-ready contract because it doesn’t have any possession safety so getExperience() perform may very well be known as from anybody with entry to the contract tackle.
This contract is even easier than the ERC-721 one. We’re creating a brand new token known as Rune (RUNE) and we are going to name getExperience() from Unity to mint an quantity of tokens to the participant tackle, which is able to signify the quantity of expertise factors.
Now underneath scripts, duplicate deployGameItem.js and rename it to deployRune.js:
Then repeat what we did earlier than; exchange some unique fields for brand spanking new ones. On this case, exchange GameItem for Rune:
After this we simply have to run these instructions to run this script and deploy our Rune.sol contract:
npm hardhat clearnpm hardhat compilenpx hardhat run scripts/deployRune.js --network mumbai
Nice! After succeeding, copy the contract tackle and the contract abi the identical approach we did after deploying GameItem.sol and duplicate the info to GameManager.cs:
Good! We’ve got now accomplished the deployment of the good contracts and we’re able to learn to name them from Unity!
4. Mint objects as ERC tokens
As we all know, after defeating the boss, the objects and the rune will drop and we will likely be within the Victory state. In that state, if we collide with an merchandise and press P we are going to activate the PickingUpItem state. If we do the identical whereas colliding with a rune, we are going to activate the PickingUpRune state. We are able to see that trying on the OnPickUp() perform from Victory.cs:
non-public void OnPickUp(InputAction.CallbackContext obj){ if (itemPanel.isActiveAndEnabled) { ChangeState("PickingUpItem"); return; } if (runePanel.isActiveAndEnabled) { ChangeState("PickingUpRune"); }}As you may think about, these states will handle calling the getItem() perform in GameItem.sol and the getExperience() perform in Rune.sol respectively. Let’s begin with PickingUpItem:
Opening the script we will see that we name PickUp() on the OnEnable() handler, passing the metadata url of the present GameItem that we’re colliding with:
non-public void OnEnable(){ _gameManager = GetComponentInParent<GameManager>(); // We assume we're underneath GameManager _gameInput = new GameInput(); _gameInput.PickingUp.Allow(); _gameInput.PickingUp.Cancel.carried out += CancelTransaction; participant.enter.EnableInput(false); PickUp(_gameManager.currentGameItem.metadataUrl);}However PickUp() is only a supervisor for the principle perform answerable for calling the good contract which is GetItem(). Passing the metadata url and the GameItem.sol deployed contract information, we name the getItem() perform within the contract:
non-public async UniTask<string> GetItem(string metadataUrl){ object[] parameters = { metadataUrl }; // Set gasoline estimate HexBigInteger worth = new HexBigInteger(0); HexBigInteger gasoline = new HexBigInteger(0); HexBigInteger gasPrice = new HexBigInteger(0); string resp = await Moralis.ExecuteContractFunction(GameManager.GameItemContractAddress, GameManager.GameItemContractAbi, "getItem", parameters, worth, gasoline, gasPrice); return resp;}Utilizing Moralis.ExecuteContractFunction(), is so simple as that! Pure magic. If we now check out the PickingUpRune.cs, we’ll see that it’s nearly the identical. Nevertheless, this time we name GetExperience() and we cross the Rune.sol deployed contract information. Additionally an quantity as an alternative of the metadataUrl:
non-public async UniTask<string> GetExperience(int quantity){ BigInteger amountValue = new BigInteger(quantity); object[] parameters = { amountValue.ToString("x") }; // Set gasoline estimate HexBigInteger worth = new HexBigInteger(0); HexBigInteger gasoline = new HexBigInteger(0); HexBigInteger gasPrice = new HexBigInteger(0); string resp = await Moralis.ExecuteContractFunction(GameManager.RuneContractAddress, GameManager.RuneContractAbi, "getExperience", parameters, worth, gasoline, gasPrice); return resp;}That is how simple it’s to name a contract perform from Unity utilizing Moralis! If we affirm the transaction in our pockets we are going to now have minted the objects to our tackle. Let’s strive that by hitting Play, defeating the boss and selecting up an merchandise and the rune:
5. Retrieve on-chain information
Now that we have now one merchandise and the expertise, we will test they’re there by urgent M and opening the sport menu. Attempt ready a minimum of 1 minute earlier than doing so, and they need to be seem.
The best way we do that is via the Menu state, which prompts when being within the Victory state and urgent M. To get the expertise, on the OnEnable() handler we name Moralis.Web3Api.Account.GetTokenBalances() and if a few of them have the identical contract tackle as RuneContractAddress, which means it’s the proper token, we get the steadiness via token.steadiness:
Record<Erc20TokenBalance> listOfTokens = await Moralis.Web3Api.Account.GetTokenBalances(_walletAddress, Moralis.CurrentChain.EnumValue);if (!listOfTokens.Any()) return;foreach (var token in listOfTokens){ // We make the certain that's the token that we deployed if (token.TokenAddress == GameManager.RuneContractAddress.ToLower()) { runeAmountText.textual content = token.Stability; Debug.Log($"We've got {token.Stability} runes (XP)"); }}For the objects we don’t do it immediately in Menu.cs – we use the Stock class to handle that calling:
stock.LoadItems(_walletAddress, GameManager.GameItemContractAddress, Moralis.CurrentChain.EnumValue);So LoadItems() is the perform that retrieves the minted objects info by calling the Moralis.GetClient().Web3Api.Account.GetNFTsForContract(), passing the participant tackle, the GameItemContractAddress and the deployed chain (mumbai):
public async void LoadItems(string playerAddress, string contractAddress, ChainList contractChain){ strive { NftOwnerCollection noc = await Moralis.GetClient().Web3Api.Account.GetNFTsForContract(playerAddress.ToLower(), contractAddress, contractChain); Record<NftOwner> nftOwners = noc.Consequence; // We solely proceed if we discover some if (!nftOwners.Any()) { Debug.Log("You do not personal objects"); return; } if (nftOwners.Rely == _currentItemsCount) { Debug.Log("There are not any new objects to load"); return; } ClearAllItems(); // We clear the grid earlier than including new objects foreach (var nftOwner in nftOwners) { var metadata = nftOwner.Metadata; MetadataObject metadataObject = JsonUtility.FromJson<MetadataObject>(metadata); PopulatePlayerItem(nftOwner.TokenId, metadataObject); } } catch (Exception exp) { Debug.LogError(exp.Message); }}We lastly remodel the metadata to a MetadataObject and we name PopulatePlayerItem(), which is able to use the MetadataObject to instantiate the objects within the stock:
Good!! Now by clicking on the merchandise it is possible for you to to navigate to OpenSea and to PolygonScan by clicking on the Rune (expertise).
Congratulations! You accomplished the Web3 Elden Ring Clone Tutorial. You’re greater than able to turn out to be a Moralis Mage ?
