본문으로 건너뛰기
This page uses machine translation from English, which may contain errors or unclear language. For the most accurate information, please see the original English version. Some content may be in the original English due to frequent updates. Help us improve this page's translation by joining our effort on Crowdin. (Crowdin translation page, Contributing guide)

Converting Your Unity Build to a LINE LIFF App

Now for the exciting part - turning your Unity WebGL build into a mini dApp that can be accessed through LINE!

Step 1: Create Your LIFF App ​

First, let's set up your app in the LINE ecosystem:

  1. LINE Developers Console Setup:

    • Visit LINE Developers Console.
    • Create a Provider (skip if you already have one).

    • Create a new LINE Login channel.

    • Navigate to the LIFF tab
    • Click "Add LIFF app"

  2. Configure LIFF Settings:


Size: Choose one of:
├── Full (entire screen)
├── Tall (75% of screen)
└── Compact (50% of screen)
Endpoint URL: https://example.com (temporary)
Permissions: Enable as needed

노트

Save your LIFF ID - you'll need it in the next step!

Step 2: Modify Your WebGL Template ​

The index.html file helps us to check web3 availability, set up LINE integration (LIFF), proceed to load our Unity game and connect everything together.


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Unity WebGL - Mini dApp</title>
<!-- Add Web3.js BEFORE other scripts -->
<script src="./scripts/web3.min.js"></script>
<!-- LIFF SDK -->
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<!-- Unity Loader -->
<script src="Build/minidapp.loader.js"></script>
<script>
// Allow paste anywhere on the page
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'v') {
// Trigger paste event
navigator.clipboard.readText().then(function(text) {
var pasteEvent = new ClipboardEvent('paste', {
clipboardData: new DataTransfer()
});
pasteEvent.clipboardData.setData('text', text);
document.dispatchEvent(pasteEvent);
});
}
});
</script>
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="loading">Loading...</div>
<canvas id="unity-canvas"></canvas>
<script>
var myGameInstance = null;
// Add this function to check Web3 availability
function checkWeb3() {
if (typeof Web3 !== 'undefined') {
console.log("Web3 is available");
return true;
}
console.error("Web3 is not available");
return false;
}
async function initializeLiff() {
try {
// Check Web3 first
if (!checkWeb3()) {
throw new Error("Web3 is not loaded");
}
await liff.init({
liffId: "2006555499-b4Z6DegW"
});
console.log("LIFF initialized");
initializeUnity();
} catch (error) {
console.error("Initialization failed:", error);
document.getElementById('loading').textContent = 'Error: ' + error.message;
}
}
function initializeUnity() {
createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "Build/minidapp.data.unityweb",
frameworkUrl: "Build/minidapp.framework.js.unityweb",
codeUrl: "Build/minidapp.wasm.unityweb",
}).then((unityInstance) => {
console.log("Unity initialized");
myGameInstance = unityInstance;
document.getElementById('loading').style.display = 'none';
});
}
// Wait for page to load completely before initializing
window.addEventListener('load', function() {
// Give a small delay to ensure Web3 is loaded
setTimeout(initializeLiff, 500);
});
</script>
</body>
</html>

Make sure to change your LIFF-ID in the code snippet above.

Step 3: Deploy Your WebGL Build ​

  • Build your Unity project for WebGL
  • Upload all build files to a web server. For this guide, I have uploaded the WebGL build on Netlify and its available here.

Your deployment folder structure should look like this:


Minidapp/
├── Build/
│ ├── minidapp.data.unityweb
│ ├── minidapp.framework.js.unityweb
│ ├── mini.loader.js
│ └── minidapp.wasm.unityweb
├── scripts/
│ └── web3.min.js
└── index.html

Step 4: Final Configuration & Testing ​

  1. Update your LIFF endpoint:

Now your mini dApp should be readily available at https://liff.line.me/2006555499-b4Z6DegW

Summing Up ​

Congratulations! You've successfully created your first LINE mini dApp with Unity! By completing this guide, you've implemented a mini dApp with token minting functionalities. Building a LINE mini dApp transcends traditional app development - it's about creating seamless Web3 experiences within an ecosystem that users already trust and use daily.

Through Kaia's integration, you've unlocked the ability to bring blockchain functionality directly to users' fingertips, eliminating the usual barriers to Web3 adoption. This combination of LINE's extensive reach and Web3 capabilities creates a unique opportunity to innovate in ways that were previously impossible.

The power of LINE mini dApps lies in their versatility and accessibility. Whether you're a developer exploring new blockchain implementations, a business looking to enhance customer engagement, or an innovator seeking to create novel digital experiences, the platform provides all the tools needed to bring your vision to life.

For more detailed information on developing LINE mini dApps, explore these comprehensive resources:

Appendix ​

Appendix A ​

KaiaPlugin.jslib source code

Appendix B ​

Web3Manager.cs source code

페이지를 개선해 주세요