Unity - Load NFT from OpenSea

Date: 2021-12-23T00:12:08+00:00 - (Skid Vis)

In this tutorial, I’ll show you how to integrate NFTs from OpenSea into your Unity game. Whether you want to display a player’s NFT collection or incorporate NFT artwork into your virtual world, this step-by-step guide will walk you through the process of fetching NFT data from the OpenSea API and displaying it in your Unity project.

Introduction

NFTs (Non-Fungible Tokens) have become increasingly popular in the digital space, and many game developers are looking for ways to incorporate them into their projects. By connecting to the OpenSea API, you can access a vast marketplace of digital assets and display them within your Unity game.

In this tutorial, we’ll:

1. Explore the OpenSea API
2. Convert JSON responses to C# classes
3. Create Unity scripts to fetch and display NFT images
4. Set up a simple scene to showcase the NFT

Prerequisites

To follow along with this tutorial, you’ll need:

• Unity 2019 or newer
• Basic understanding of C# and Unity
• Internet connection to access the OpenSea API

Step 1: Understanding the OpenSea API

First, let’s explore the OpenSea API to understand what data we can access. Visit the OpenSea API documentation to see the available endpoints.

For this tutorial, we’ll focus on the “Retrieving Assets” endpoint, which allows us to fetch NFT data including images. The endpoint URL looks like this:

https://api.opensea.io/api/v1/assets

You can test this endpoint directly in the documentation by clicking the “Try it” button. This will show you the JSON response structure, which includes an array of assets with properties like ID, image URL, and metadata.

Step 2: Converting JSON to C# Classes

To work with the JSON response in Unity, we need to convert it to C# classes. Here’s how:

1. Copy a sample JSON response from the OpenSea API documentation
2. Visit JSON to C# converter
3. Paste the JSON and convert it to C# classes

When copying the JSON, make sure to include the complete structure with proper closing brackets. The converter will generate C# classes that match the JSON structure, which we’ll use in our Unity project.

Step 3: Creating the C# Classes in Unity

Now, let’s create our first script in Unity:

1. Create a new C# script named OpenSea.cs
2. Replace the default code with the converted C# classes
3. Make the following modifications to make it compatible with Unity:

// Add these using statements
using System;
using System.Collections.Generic;

// Add [Serializable] attribute to all classes
[Serializable]
public class Asset
{
    public string id;
    public string image_url;
    // Other properties...
}

[Serializable]
public class OpenSea
{
    public List<Asset> assets;
}

Important modifications to make:

• Replace property getters/setters with simple fields (e.g., change public string id { get; set; } to public string id;)
• Add the [Serializable] attribute to all classes to make them compatible with Unity’s serialization system
• Rename the root class from Root to OpenSea to match our file name

Step 4: Creating the API Handler Script

Next, we’ll create a script to handle the API requests:

1. Create a new C# script named OpenSeaAPI.cs
2. Add the following code:

using System.Collections;
using System.IO;
using System.Net;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

public class OpenSeaAPI : MonoBehaviour
{
    [SerializeField] private RawImage img;
    
    void Start()
    {
        FetchNFT();
    }
    
    void FetchNFT()
    {
        string url = "https://api.opensea.io/api/v1/assets";
        
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
        HttpWebResponse response = (HttpWebResponse)request.GetResponse();
        
        StreamReader reader = new StreamReader(response.GetResponseStream());
        string json = reader.ReadToEnd();
        
        OpenSea openSea = JsonUtility.FromJson<OpenSea>(json);
        
        StartCoroutine(DownloadImage(openSea.assets[1].image_url));
    }
    
    IEnumerator DownloadImage(string url)
    {
        UnityWebRequest request = UnityWebRequestTexture.GetTexture(url);
        yield return request.SendWebRequest();
        
        Texture2D texture = DownloadHandlerTexture.GetContent(request);
        img.texture = texture;
    }
}

This script does the following:

1. Makes a web request to the OpenSea API
2. Reads the JSON response
3. Converts the JSON to our C# classes
4. Starts a coroutine to download the image from the NFT’s image URL
5. Assigns the downloaded image to a RawImage component

Note: We’re using assets[1] to get the second asset in the array, as the first one might not always have an image. In a production environment, you’d want to add error checking and handle cases where images might be missing.

Step 5: Setting Up the Unity Scene

Now, let’s set up our Unity scene to display the NFT:

1. Create an empty GameObject and attach the OpenSeaAPI script to it
2. Create a Canvas (set to World Space for 3D projects)
3. Add a RawImage component to the Canvas
4. Adjust the Canvas scale to make it visible in your scene (e.g., 0.01 for a 3D scene)
5. Drag the RawImage component into the img field of the OpenSeaAPI script in the Inspector

Step 6: Testing the Implementation

When you run the game, the script will:

1. Fetch NFT data from OpenSea
2. Extract the image URL from the second asset in the response
3. Download the image
4. Display it on the RawImage component

If everything is set up correctly, you should see an NFT image displayed in your game!

Customizing the Implementation

This basic implementation can be extended in several ways:

• Fetch specific NFTs: Modify the API URL to fetch NFTs from a specific wallet or collection
• Display multiple NFTs: Create a grid or gallery of images to showcase multiple NFTs
• Add interactivity: Allow players to interact with the NFTs in your game
• Use NFT metadata: Incorporate other NFT properties like name, description, or attributes

Conclusion

By following this tutorial, you’ve learned how to integrate OpenSea NFTs into your Unity game. This opens up possibilities for creating NFT galleries, allowing players to showcase their collections, or incorporating NFT artwork into your virtual worlds.

While this example focuses on displaying images, the same approach can be used to access any API data, making it a valuable technique for connecting your Unity games to external services.

If you’d like to discuss this topic further or have questions, I invite you to join my Discord server where we can chat about Unity, NFTs, and game development.

For those interested in supporting my work, consider becoming a Patreon member.

The background music in the video tutorial is by Flawed Human Being, who you can find on Spotify.

Check out the full tutorial here on YouTube.