本文へスキップ
このページは英語からの機械翻訳を使用しており、誤りや不明瞭な表現が含まれている可能性があります。最も正確な情報については、オリジナルの英語版をご覧ください。頻繁な更新のため、一部のコンテンツはオリジナルの英語になっている可能性があります。Crowdinでの取り組みに参加して、このページの翻訳改善にご協力ください。 (Crowdin translation page, Contributing guide)

Configuring Build Templates for DApp Portal SDK

In this section, we will ensure the DApp Portal SDK is loaded in our game. To do that, Cocos Creator’s build-templates directory allows customization of how the game is built for the web platform, making it essential for preloading the SDK before the game starts.

By creating a custom template in build-templates/web-desktop, we can automatically include the SDK in every build, streamlining development and deployment.

Step 1: Create the build-templates Directory ​

Open your project in VS Code and run the following command in the terminal:


mkdir -p build-templates/web-desktop

Step 2: Perform an Initial Build in Cocos Creator ​

  1. Go to Menu → Project → Build.

  1. Set Platform to Web Desktop.

  2. Click Build.

Step 3: Copy the index.html file from the Build Directory ​

Once the build is complete, copy the index.html file into the build-templates directory:


cp build/web-desktop/index.html build-templates/web-desktop/

Step 4: Modify index.html to Include the DApp Portal SDK ​

Edit build-templates/web-desktop/index.html and add the following DApp Portal SDK script tag inside the <head> </head> section:


<script src="https://static.kaiawallet.io/js/dapp-portal-sdk.js"></script>

Step 5: Verify the Build Setup ​

  • Rebuild your project in Cocos Creator.
  • Check the generated build/web-desktop/index.html.
  • Confirm that the DApp Portal SDK script is correctly included.

Step 6: Build & Preview the Project ​

After completing the setup, click Play on Device at the top of the Cocos Creator Editor. Your game should open in a new browser tab.

Route Web build to Localhost:3000

For security and development purposes, the DApp Portal SDK currently works on localhost:3000. At the moment, the default Unity WebGL builds use random ports (like 7457) and for our app to work efficiently we need to configure our Unity WebGL build to open on localhost:3000.

To do so, follow the steps below:

  1. Copy and paste the code below in your project terminal

# Install http-server globally
npm install -g http-server

  1. Navigate to build folder

cd build/web-desktop

  1. Start server on port 3000

http-server -p 3000

Testing and running application

Now that we have our project running, let’s test and interact with it.

  • Click on the Connect Wallet button to connect to Dapp Portal Wallet.
  • Once connected, mint a fixed amount to the connected address.

ページを改善してください。