As you know, blockchain gaming is revolutionizing the gaming industry with its decentralized nature. So, when developing GameFi or P2E games using platforms such as Unity, a developer must adhere to keeping it decentralized. That involves staying away from uploading and storing assets in a centralized manner. To do so, developers can use IPFS (InterPlanetary File System) – a protocol for storing contents in a decentralized way. However, you might be wondering, “how to upload Unity assets to IPFS?”. Fortunately, this article addresses that exact question. Moving forward, we explore our “upload to IPFS” dapp (decentralized application) that we built using Unity and Moralis. As a result, you’ll know how to upload Unity assets to IPFS quickly and easily!
If you decide to explore our example dapp, you will learn how to use the power of Moralis. While creating your instance of this Web3 app, you will complete the initial Moralis setup. The latter will give you access to the Moralis SDK, which includes IPFS integration. As such, uploading Unity assets to IPFS becomes possible. Of course, it’s up to you to put this “IPFS uploader” dapp to further use. Hopefully, you’ll find it useful when creating your own Web3 games. This is also where Moralis will cover all your Web3-related backend needs. For instance, you’ll easily cover features such as Web3 authentication with this “Firebase for crypto” platform. Also, thanks to Moralis’ cross-chain interoperability, you can target all supported blockchains. As a result, you future-proof your Web3 development progress. So, before moving on, make sure to create your free Moralis account.
Uploading Unity Assets to IPFS – Demo
Before we show how you can use our “uploader” dapp to upload Unity assets to IPFS, we want to ensure you all know what to expect from it. Thus, let’s start with a quick demo of our dapp. Looking at the screenshot below, you can see that in order to use the “uploader” dapp, you need complete Web3 login:
After clicking on the “Connect” button, this Unity dapp asks us to scan the QR code:
We use our favorite Web3 wallet, MetaMask, to scan the code. As such, we will authenticate with MetaMask. Once we scan the code, the interface lets us know that the process is in progress:
Once you confirm the “signing” process in your mobile wallet, you will see the interface designed to upload Unity assets to IPFS:
Uploading a PNG File
Looking at the above screenshot, you can see that our dapp is quite simple and intuitive. Even without our guidance, you’d most likely know how to use it. However, just in case, let’s go through the details together. In the top-right corner, there’s the “Disconnect” button. The latter will sign you out (disconnect your Web3 wallet). Although, as far as uploading Unity assets to IPFS goes, the “select” and “upload” buttons will do the trick. But, as you can see, there’s no file selected yet. As such, we start with that. So, once we click on the “select” button, a pop-up window appears:
Note: For this example, we focused on PNG files; however, you could also use the same dapp to upload other Unity assets to IPFS.
Using the above pop-up window, we select a PNG file and click on the “Open” button. By doing so, our dapp collects the file’s details and creates a preview of the image under the “select” button:
Before we can upload the chosen file, we need to enter its name and description. Once we have our file’s details in place, we can click on the “upload” button, which uploads one of our Unity assets to IPFS. In addition, it creates our file’s metadata (“.JSON file”), which is also stored to IPFS:
- Metadata:
- PNG file:
That’s it for our demo. We hope you like the simplicity and efficiency of our dapp. If so, you must be eager to learn how you can use it to upload your Unity assets to IPFS.
Note: If you’re more of a video person, you can check our dapp’s demo in a video format at the end of this article.
Upload Unity Assets to IPFS Using Our Dapp and Moralis
After going through the demo above, you already know how to use our dapp. So, let’s now help you set it up – this is where we will rely on Moralis. Then, we will also walk you through the scripts. Hence, you’ll learn how our dapp selects image files using the native Windows file browser. Also, you’ll discover how it uploads selected Unity assets to IPFS. That is where you’ll be able to see the power of Moralis. This pinnacle of the current Web3 tech stack helps you avoid dealing with all the limitations of RPC nodes.
Thanks to Moralis’ single workflow, such a high level of simplicity is possible. For instance, Moralis offers a short snippet of code that takes care of authenticating users. Once users are logged in, Moralis establishes a session and creates identity profiles. The information related to that session is then stored in a real-time on-chain database (Moralis’ dashboard). The latter is how Moralis enables you to index the blockchain. In addition, you can take things further – you can sync and index smart contract events. Of course, this ultimate Web3 backend platform also provides you with Web3 SDKs and APIs (Ethereum API, NFT API, etc.) to communicate with that database. Nonetheless, Moralis is also all about cross-chain and cross-platform interoperability. Accordingly, it gives you many options and will future-proof your work. So, if you haven’t done so yet, create your free Moralis account before moving forward.
Get Our Unity IPFS Uploader Dapp
Start by downloading our project – all the files and folders await you on GitHub. Then, open the project in Unity. The first thing you will encounter inside Unity is the Moralis setup panel:
Looking at the screenshot above, you can see that the panel provides you with instructions at the bottom:
- Create your Moralis account or log in to your existing account.
- Create a Moralis dapp, which means you need to create a Moralis server.
- Once your server is up and running, use the “View Details” button to get your dapp URL and ID.
However, to make things even more apparent for you, let’s guide you through the above steps.
Moralis Web3 Setup Guide
Since you already have your Moralis account ready, log in using your credentials:
Once inside your Moralis admin area, you need to create a new server. If this is your first time using Moralis, you will see the following on-screen guide:
After clicking on the “+ Create a new Server” button, a pop-up window offering different types of servers will appear:
For the sake of this example project, select “Testnet Server”. We recommend using testnets for all educational and testing purposes. Aside from Ethereum testnets and its mainnet, you also have other EVM-compatible networks at your disposal. However, before selecting the network, enter your server’s details:
The name of your server can be anything you want. For the region, select the city closest to your location. Then, select the chain you want and finally spin up the server with the “Add Instance” button. With your server up and running, you can access its details. By doing so, you will be able to upload Unity assets to IPFS using our dapp. Use the “View Details” button for the above-created server:
After clicking on the above button, you will see a new window with all the details, including the server URL and application ID. Finally, use the “copy” icons to copy the values to the “Moralis Web3 Setup” panel in Unity:
Once you’ve pasted your dapp URL and ID in the designated entry fields, click on the “Done” button:
Note: Use your server’s details. DON’T use the details displayed above.
Furthermore, we must point out that you can change your dapp URL and dapp ID at any time. You’d need to do that if you created a new server, which you’d want to use to upload Unity assets to IPFS. So, this is how you go about accessing the above panel:
Launch the Unity IPFS Uploader Dapp
With the above setup completed, you are ready to use our dapp as demonstrated previously. To do so, just click on the play icon:
As soon as the reloading is completed, you will see the “Connect” button, which is the starting point of our demo above.
Uploading Unity Assets to IPFS – Code Walkthrough
If you remember the demo, there are two aspects to uploading Unity assets to IPFS using our dapp. First, we need to select a file (in our case, an image). Second, we must upload the selected file to IPFS. So, let’s start with the “select” part.
Code Walkthrough – Selecting Files
As you can see in the screenshot below, we have the “SelectPanel” object, which takes care of selecting an image:
Furthermore, we set things up by using “AuthenticationKit” so that “SelectionPanel” is activated automatically once a user is authenticated.
Let’s also look at the “SelectionPanel” script. The “SelectImage()” function does most of the heavy lifting after clicking on the “select” button (see demo). Using the “OpenFilePanel” method, the function opens the native Windows file browser:
_imagePath = EditorUtility.OpenFilePanel(“Select a PNG”, “”, “png”);
Note: If you want to use our “uploader” dapp for other types of files, you need to change the “png” in the above line of code.
The “SelectImage” function then uses the selected file’s path, reads all the bytes, and returns the image data. Next, it uses “LoadImage” to create a sprite.
Code Walkthrough – Uploading Files
Once we have our sprite ready, we need to upload it. This is where “OnUploadButtonPressed()” (still inside the “SelectionPanel”script) comes into play:
public void OnUploadButtonPressed()
{
if (image.sprite == null || nameInput.text == string.Empty || descriptionInput.text == string.Empty)
{
Debug.Log(“All fields (image, name and description) need to be filled”);
return;
}
UploadButtonPressed?.Invoke(nameInput.text, descriptionInput.text, _imagePath, _imageData);
uploadButton.interactable = false;
}
Looking at the lines of code above, you can see that the “Upload” button won’t work until all three conditions have been met. That is, until we have selected an image (created a sprite), entered our file’s name, and its description. Once all the conditions are met, the “AppManager” script takes things over. Inside that script, “UploadToIpfs” ensures that our dapp properly uploads Unity assets to IPFS. This function takes in the file’s name, description, path, and data (image data in our case). Moreover, “UploadToIpfs” first saves the selected image using “SaveImageToIpfs”. This is where the magic of Moralis enters the picture via the “UploadFolder” method:
List<IpfsFile> resp = await Moralis.GetClient().Web3Api.Storage.UploadFolder(requests);
Essentially, the above single line of code uploads Unity assets to IPFS. Nonetheless, the “AppManager” script also ensures that the metadata for the uploaded file is created using “BuildMetadata”. Then, it uses “SaveToIpfs” to save that metadata to IPFS.
After both the image and metadata have been uploaded and their URLs created, “AppManager” also resets the upload button. It does so using the “ResetUploadButton” function in order to prevent uploading the same file again.
Here’s also a video tutorial of the above-presented dapp:
How to Upload Unity Assets to IPFS – Summary
At this point, you should have your own instance of our “upload Unity assets to IPFS” dapp at your disposal. Using our instructions, you were able to activate it by entering your Moralis server’s details. Thanks to the demo above, you also had a chance to learn how to use this dapp. Nonetheless, we also walked you through the scripts that ensure our dapp runs properly. Furthermore, let’s point out that this dapp is a useful tool, which you will see when you take on Web3 game design with Unity. Although, before you tackle your own ideas, we recommend you complete some of our other Unity tutorials. That way, you will learn how to connect a Unity app to a Web3 wallet (connecting a Unity game with Web3 login), communicate with a Web3 database from Unity, do blockchain game transactions with Unity, and even create a metaverse dapp.
On the other hand, you might be eager to explore other blockchain development topics. If so, make sure to visit the Moralis blog and the Moralis YouTube channel. Both of these outlets offer a ton of valuable content and can serve as your continued free crypto education. For instance, some of the latest articles include a crypto sentiment dapp tutorial, blockend development guide, how to authenticate Solana users with Phantom wallet, an NFT on-chain inventory system, Solidity smart contracts tutorial, and building a decentralized Twitter, and much more. In addition, we encourage you to join Moralis Projects for weekly challenges and a chance to earn some cool NFTs. Nonetheless, if you are serious about becoming a Web3 developer, you should consider enrolling in Moralis Academy.
