ตัวอย่างต่อไปนี้ เป็นการสร้าง WebGL ด้วย Unity3D เพื่อเชื่อมต่อกับ MetaMask สำหรับแสดงเลขกระเป๋า (wallet address)โดยมีขั้นตอนดังต่อไปนี้

MetaMask

เป็นกระเป๋า Ethereum แบบ open source ที่รองรับ token ที่อยู่บน Ethereum ซึ่งสามารถทำงานร่วมกับ WebBrowser ต่าง ๆ ได้ เช่น Chrome, Firefox หรือ Brave เป็นต้น

ติดตั้ง MetaMask

เริ่มจากการติดตั้ง MetaMask โดยเข้าไปที่ metamask.io > Install MetaMask …

Unity3D

เป็น Game Engine สำหรับพัฒนาเกม 2 มิติ และ 3 มิติ ที่ถูกออกแบบมาให้ใช้งานง่าย และสามารถพัฒนาเกมได้แบบ cross-platform เช่น Web, Windows, iOS และ Android เป็นต้น

ติดตั้ง Unity3D

ติดตั้ง Unity Hub ได้จาก link ต่อไปนี้

https://unity3d.com/get-unity/download

สร้างโปรเจคใหม่

โหลด WebGL template จาก link ต่อไปนี้

https://github.com/underscoredLabs/web3-webgl-template

สามารถศึกษาข้อมูลเพิ่มเติมของ WebGL template จาก Unity Manual จากนั้น

● สร้าง Folder WebGLTemplates ไว้ที่ Assets

● นำ Web3Template ที่ดาวน์โหลดมาวางไว้ที่ WebGLTemplates ดังนี้

มาดูหลักการทำงานนิดนึงนะครับ

● index.html จะมีการ import web3Connect.js ในส่วน head ดังนี้

<script src="TemplateData/web3Connect.js"></script>

● ส่วน TemplateData/web3Connect.js ดังนี้

จากโค้ดข้างต้น จะเป็นการเปิดหน้า popup ของ Metamask และในกรณีไม่ได้ติดตั้ง Metamask จะแสดงข้อความ “Non-Ethereum browser detected. Please connect to a wallet”

เปลี่ยน Platform เป็น WebGL และการตั้งค่าต่างๆ

ไปที่ File > Build Settings…

เลือก WebGL > Switch Platform

จากนั้นกด Player Settings… > ไปที่ Player > ในหัวข้อ Resolution and Presentation เลือก Web3Template ดังรูป

ทดสอบโดยไปที่ File > Build And Run

ตั้งชื่อ เช่น Unity Metamask จากนั้นกด save

จะปรากฎการแสดงผลบน Browser เป็นหน้า popup สำหรับร้องขอการเชื่อมต่อกับ Metamask ดังต่อไปนี้

โดยสามารถกด Next > Connect ได้เลยครับ

แต่ในกรณีที่ไม่ได้ติดตั้ง Metamask จะปรากฎข้อความดังต่อไปนี้

แสดงเลขกระเป๋า

หลังจากสามารุเชื่อมต่อกับ Metamask ได้เรียบร้อยแล้ว ขั้นตอนต่อมาเราจะนำเลขกระเป๋ามาแสดงในเกม ดังนี้

เริ่มจากสร้างปุ่มไปที่ GameObject > UI > Button

จะปรากฎ Canvas ที่มี Button อยู่ จากนั้นตั้งค่า Canvas ดังนี้

● Render Mode : Screen Space — Camera

● Render Camera : ลาก Main Camera มาใส่ในช่อง

แก้ไจ Button ดังนี้

● Pos X : 0

● Pos Y : 0

● Width : 200

● Hight : 100

แก้ไข Text ของ Button ดังนี้

● Text : Get Address

● Best Fit : เลือก

เพิ่ม Text สำหรับใช้ในการแสดงเลขกระเป๋า โดยไปที่ GameObject > UI > Text

ตั้งค่า Text ดังนี้

● Pos Y : 200

● Width : 800

● Height : 100

● Font Size : 25

● Color : yellow

ตั้งค่าได้ตามที่ต้องการครับ

เขียน Script ที่ Button เพื่อแสดงค่าเลขกระเป๋าโดยไปที่ Button จากนั้นใน Inspector > Add Component > New script > จากนั้นแก้ไขเป็นโค้ดดังนี้

จากนั้นสร้างไฟล์ชื่อว่า web3.jslib ไว้ที่ Assets ดังนี้

โดย web3.jslib มีโค้ดดังต่อไปนี้

ไปที่ Button เพื่อเรียกการทำงาน OnClick() เมื่อกดที่ Button ดังนี้

● ไปที่ Button

● ใน Inspector กดเครื่องหมาย + ใน OnClick()

● ลาก Button จาก Hierarchy ไปใส่ไว้ที่ None(Object) ใน OnClick

● เลือกที่ No Function > GetWalletAddress > OnClick()

จากนั้นใน Inspector ส่วนของ Get Wallet Address (Script) ให้ลาก Text (ที่เป็นสีเหลือง)มาวางไว้ที่ Button Text ดังนี้

จากนั้น Build and Run อีกครั้ง และเมื่อกดที่ปุ่มจะเป็นการดึงเลขกระเป๋ามาแสดงดังนี้

เท่านี้เราก็สามารถดึงเลขกระเป๋าจาก Metamask มาแสดงในเกมได้เรียบร้อย เพื่อนๆอาจจะลองนำไปต่อยอดเป็นเกมที่มีความเกี่ยวข้องกับการใช้งาน Ethereum wallet ก็ได้นะครับ

สามารถโหลดทั้งโปรเจคได้ที่นี่ https://gitlab.com/thannob/UnityMetamask.git

สุดท้ายนี้ผมหวังว่าบทความนี้จะเป็นประโยชน์สําหรับเพื่อนๆนะครับ ถ้ามีโอกาสจะหาเวลาว่างมาเขียนเพิ่มเรื่องการเรียกและบันทึกข้อมูลลงใน Blockchain ผ่านทาง Smart Contract ครับ

ขอบคุณมากๆครับที่เข้ามาอ่านครับ

Reference: https://medium.com/coinmonks/unity-engine-metamask-wallet-6797d4699e45

บทความโดย อ.ผศ.ดร.ธรรณพ อารีพรรค

วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต

<<< บทความอื่นๆ