Getting started building a marketplace in Unreal

Because this tutorial series uses our Unreal Sample Game there is some setup required to get it working using your own Immutable Hub account and NFTs.

If you follow these steps you will be able to run the sample game and log in with Passport to start using your NFTs in the in-game marketplace.

💡Prerequisite step

Before continuing with this step, ensure you have completed the prerequisites for building a marketplace in Unreal step.

Setting Up the Development Environment:

• Install git-lfs since some large game assets are stored on Git Large File Storage.

• Clone the sample-unreal-game repository.

  git clone git@github.com:immutable/sample-unreal-game.git

Registering the Game on Immutable Hub:

To easily onboard players onto the sample game, you can use Immutable Passport for authentication and a web3 wallet. However, you must register the game in the Immutable Hub before using Passport.

1. Go to the Immutable Hub and follow the instructions to log in.
2. Once logged in, in the Projects tab, click Add Project.
3. Enter the project’s name, select Immutable zkEVM and click Save.
4. Enter the environment’s name, select Testnet and click Save.
5. In the Passport tab, click Add Client.
6. Choose Native (e.g. Mobile App, Desktop Game) as the Application Type.
7. Enter the game’s name in the Application Name field.
8. The Redirect URLs and Logout URLs are mandatory fields. However, you won’t be using them right now. For now, enter https://localhost:3000/ into both fields.
9. Add file:// to the list of Web Origins URL. This is required for the BLUI plugin which is a dependency of the unreal-immutable-sdk.
10. Click Save Changes.
11. When you return to Passport Configuration, you will find a Passport client and Client ID ready for integration into the sample game.

To learn more about each field, please refer to this link.

Create and Deploy NFTs and Tokens:

The Unreal Engine sample game uses the same ERC721 NFT and ERC20 token contracts from the Build a game with Unity tutorial.

Work through the following steps from the Build a game with Unity tutorial to setup the NFT metadata, and deploy the contracts required for the sample game:

• Step 6: Create NFT metadata
• Step 7: Create and deploy NFT (ERC721) contracts
• Step 8: Create and deploy ERC20 contract
• Step 9: Setup the minting backend

Note: for the last step Setup the minting backend the Unreal sample game has a copy of the mint-backend server in the /Backend folder of the sample-unreal-game repository.

Configure the Unreal SDK plugin

If running the sample game with Unreal Engine version 4.6.2 to 5.0.3, the Immutable Unreal SDK needs to have the have the WebBrowserWidget disabled as the Unreal SDK requires the BLUI plugin for those versions.

• Open the /Plugins/unreal-immutable-sdk/Immutable.uplugin file.

• Ensure the WebBrowserWidget plugin is disabled in the Plugins list:

  "Plugins": [
      {
          "Name": "WebBrowserWidget",
          "Enabled": false // disabled for BLUI plugin to work
      },
      {
          "Name": "BLUI",
          "Enabled": true,
          "Optional": true
      }
  ]

Configure the Sample Game

1. Project settings

To configure the sample game, follow these steps:

1. Open the project settings in the Unreal Engine Editor.
2. Enter the data you have set up in Immutable Hub.

This includes:

Config Setting	Value
ClientID	Passport Client ID from Registering the Game on Immutable Hub.
RedirectURI	Required if you are using the PKCE login flow.
LogoutURI	Required if you are using the PKCE login flow.
Environment	sandbox or production if your contracts are on Mainnet.

Ensure all required fields are correctly filled to enable seamless integration with the Immutable services.

Immutable Sample Game project settings:

💡Note

These settings are used to log the player into the Passport wallet and access its data. This data is essential for enabling the in-game marketplace functionalities, such as displaying inventory NFTs, buying NFTs, listing NFTs for sale, and canceling NFT listings.

2. Marketplace policy

Next, configure the marketplace policy asset located at sample-unreal-game/Content/UI/BP_MarketplacePolicy.uasset.

This includes:

Config Setting	Value
Immutable APIURL	The endpoint URL for the Immutable zkEVM API.
Ts Sdk APIURL	The endpoint URL for the Orderbook API.
Search APIChain Name	Chain name.
Retry Limit Count	The maximum number of attempts to send HTTP requests to APIs.
Retry Timeout Relative Seconds	The timeout duration in seconds for HTTP requests to APIs.
Balance Contract Address	The contract address for the cryptocurrency balance token.
Stack Contract Address	An array of NFT contract addresses used for Marketplace and Inventory search queries.
Number Fractional Digits	The number of fractional digits displayed for prices or fees in Marketplace and Inventory widgets.

💡Note

Ensure that the marketplace policy settings align with your project's requirements to enable seamless integration with the Immutable services.

Run the sample game

1. Login page

After opening PIE, ensure the default map is set to sample-unreal-game/Content/Maps/FrontEnd.umap. When you start the game, you should see the following screen:

2. Successfully Login

Enter your credentials to log in. Once logged in, you will be directed to the main interface of the sample game:

3. Marketplace Filter page

This widget allows users to refine their search for purchasable NFTs by specifying criteria such as NFT metadata and keywords for NFT names.

4. Marketplace Search Results page

The search results will be displayed as NFT cards. Each card represents an individual NFT and includes essential details such as the NFT's image, name, and price. Users can interact with these cards to view more information or execute buy functionality.

NFT Cards

The NFT cards are designed to provide a quick overview of each NFT available in the marketplace. They include:

• Image: A visual representation of the NFT.
• Name: The name of the NFT.
• Price: The listed price of the NFT.

Selecting an NFT

Users can select an NFT card to view more detailed information. Upon selection, the NFT card will be highlighted, indicating that it is currently selected.

Moving to the Information Page

Once an NFT card is selected, users can navigate to the information page. This page provides comprehensive details about the selected NFT, including its metadata and any additional attributes.

5. Marketplace NFT Information page

On the information page, users can execute the buy functionality. This involves:

1. Reviewing Details: Users can review all relevant details about the listed NFTs before making a purchase.
2. Initiating Purchase: Users can initiate the purchase process by clicking the "Buy" button.
3. Confirming Transaction: Users will be prompted to confirm the transaction, ensuring they are aware of the purchase details and associated costs.

By following these steps, users can seamlessly browse, select, and purchase NFTs within the marketplace.

6. Inventory page

The inventory page displays all the NFTs and assets owned by the player. These assets can also be viewed on the Passport portal page. On this page, users can list and cancel the listing of their NFTs. Unlisted items can be selected to be listed, prompting a dialog to enter the desired price. Listed NFTs are highlighted, and the cancel functionality can be used on them.

Next steps

Once you've follwed these setup steps, you are now ready to start learning how to create, fill and cancel listings. Click next below to continue the tutorial series.