Aetheria คือโปรเจกต์เกม MMORPG แบบ 3D ที่รันบนเบราว์เซอร์ได้ 100% โดยไม่ต้องโหลด Asset ภายนอก พัฒนาด้วย TypeScript ทั้งหมด เหมาะสำหรับนักพัฒนาที่ต้องการศึกษาการสร้างเกม Multiplayer แบบ Real-time ที่มีระบบครบวงจร ทั้งระบบ Server-side authoritative และการเรนเดอร์กราฟิกด้วย Three.js
หากคุณกำลังมองหาตัวอย่างการสร้างเกมบนเว็บที่ใช้เทคโนโลยีสมัยใหม่แบบ Full-stack นี่คือโปรเจกต์ที่น่าสนใจมากสำหรับการศึกษาโครงสร้างการจัดการ State และการสื่อสารข้อมูลผ่าน Network
สารบัญ
- ภาพรวมโปรเจกต์
- โปรเจกต์นี้เหมาะกับใคร
- จุดเด่นทางเทคนิค
- สถาปัตยกรรมและ Tech Stack
- วิธีเริ่มต้น
- ข้อดีและข้อจำกัด
- FAQ
- สรุป
ภาพรวมโปรเจกต์
Aetheria เป็นเกม MMORPG สไตล์อนิเมะที่สร้างขึ้นโดยใช้แนวคิด Procedural Generation ทั้งหมด ตั้งแต่โมเดล 3D, เสียง, ไปจนถึงแอนิเมชัน ไม่มีการโหลดไฟล์ Asset ภายนอก ทำให้ตัวเกมมีขนาดเล็กและโหลดได้รวดเร็วผ่านเบราว์เซอร์
โปรเจกต์นี้ถูกสร้างขึ้นโดยเน้นการทำงานแบบ Solo Development โดยใช้ TypeScript เป็นภาษาหลักในการเขียนทั้งฝั่ง Client และ Server ทำให้การจัดการ Type และ Data Structure ทำได้ง่ายและปลอดภัยยิ่งขึ้น
โปรเจกต์นี้เหมาะกับใคร
โปรเจกต์นี้ไม่ได้มีไว้สำหรับผู้เล่นทั่วไปเท่านั้น แต่เป็นแหล่งเรียนรู้ชั้นดีสำหรับ:
- Game Developers: ผู้ที่สนใจการสร้างเกมบนเว็บโดยใช้ Three.js และต้องการเรียนรู้การทำระบบ Multiplayer
- Web Developers: ที่ต้องการศึกษาการใช้ React 19 ร่วมกับ Vite และการจัดการ State ด้วย Zustand
- Backend Engineers: ที่สนใจการทำ Real-time Server ด้วย Colyseus และการจัดการฐานข้อมูลด้วย Prisma/SQLite
- Open Source Contributors: ผู้ที่ต้องการศึกษา Codebase ของโปรเจกต์เกมที่เขียนด้วย TypeScript ทั้งระบบ
จุดเด่นทางเทคนิค
Aetheria มีฟีเจอร์ที่น่าสนใจมากมายที่ถูกออกแบบมาให้ทำงานประสานกันอย่างลงตัว:
| ฟีเจอร์ | รายละเอียด |
|---|---|
| World | Open world 200×200 พร้อม 9 Biomes และระบบกลางวัน/กลางคืน |
| Combat | ระบบ Server authoritative tick ที่ 20 Hz พร้อมสกิลและสถานะผิดปกติ |
| Social | ระบบแชท, ปาร์ตี้, จดหมาย, และการเยี่ยมบ้านผู้เล่นอื่น |
| Economy | ระบบ Crafting, ตลาดซื้อขาย, และ Gacha box |
| Platform | รองรับทั้ง Desktop และ Mobile (PWA) พร้อมระบบควบคุมแบบสัมผัส |
สถาปัตยกรรมและ Tech Stack
โปรเจกต์นี้ใช้โครงสร้างแบบ Monorepo โดยแบ่งส่วนการทำงานอย่างชัดเจน:
- Language: TypeScript ทั้งฝั่ง Client และ Server
- Server: Node.js, Colyseus 0.16 (Real-time), Express, Prisma, SQLite
- Client: Vite, React 19, Three.js (@react-three/fiber), Zustand
- Styling: Tailwind CSS
- Audio: Web Audio API (Procedural)
การที่ Server ทำหน้าที่เป็น Authoritative หมายความว่าทุกการเคลื่อนไหวและการกระทำของผู้เล่นจะถูกตรวจสอบโดย Server เพื่อป้องกันการโกง และ Client จะทำหน้าที่เพียงแค่ Interpolate ตำแหน่งและเรนเดอร์ภาพเท่านั้น
วิธีเริ่มต้น
สำหรับการเริ่มต้นพัฒนาหรือทดสอบโปรเจกต์ในเครื่อง คุณต้องเตรียม Environment ดังนี้:
- ติดตั้ง Node.js (แนะนำ v20+) และ pnpm (v10+)
- Clone repository จาก GitHub: mositron/Aetheria
- ติดตั้ง Dependencies:
pnpm install - รันโปรเจกต์:
pnpm dev - เปิดเบราว์เซอร์ไปที่
http://localhost:5173เพื่อเริ่มเล่น
หมายเหตุ: ตรวจสอบให้แน่ใจว่า Server รันอยู่ที่พอร์ต 2567 หากพอร์ตถูกใช้งาน ให้ปรับเปลี่ยนค่า PORT ในไฟล์ .env ของ packages/server
ข้อดีและข้อจำกัด
เพื่อให้เห็นภาพรวมของการนำไปใช้งานจริง นี่คือการเปรียบเทียบเบื้องต้น:
| ข้อดี | ข้อจำกัด |
|---|---|
| ไม่ต้องโหลด Asset ภายนอก (เร็วมาก) | เป็นโปรเจกต์เดี่ยว (Solo project) อาจมีบั๊กแฝง |
| ใช้ TypeScript ทั้งระบบ (Type Safety) | ต้องการความเข้าใจเรื่อง Colyseus และ Three.js |
| รองรับ Mobile/PWA | การขยายตัว (Scalability) ต้องทดสอบเพิ่มเติม |
| สถาปัตยกรรมชัดเจน | เอกสารอาจยังไม่ครอบคลุมทุกเคสการใช้งาน |
FAQ
เกมนี้ต้องติดตั้งโปรแกรมอะไรเพิ่มไหม?
ไม่จำเป็น เกมทำงานบนเบราว์เซอร์สมัยใหม่ (Chrome, Edge, Firefox, Safari) ได้ทันที
สามารถเล่นบนมือถือได้หรือไม่?
ได้ Aetheria ออกแบบมาแบบ Mobile-first มีระบบ Virtual joystick และ UI ที่ปรับแต่งให้เหมาะกับการสัมผัส
ทำไมถึงไม่มีไฟล์เสียงหรือโมเดล 3D ในโฟลเดอร์?
เพราะโปรเจกต์นี้ใช้เทคนิค Procedural Generation ทั้งหมด ทุกอย่างถูกสร้างขึ้นด้วย Code ในขณะรันเกม ไม่ได้โหลดไฟล์ .glb หรือ .mp3 มาจากภายนอก
สรุป
Aetheria เป็นโปรเจกต์ที่น่าประทับใจสำหรับนักพัฒนาที่ต้องการเห็นการประยุกต์ใช้ TypeScript ในการสร้างเกม MMORPG บนเว็บ การเลือกใช้ Tech Stack ที่ทันสมัยและการออกแบบระบบแบบ Procedural ทำให้โปรเจกต์นี้มีความโดดเด่นและเป็นกรณีศึกษาที่ดีเยี่ยม
หากคุณสนใจที่จะศึกษาโค้ดหรือมีส่วนร่วมในการพัฒนา สามารถเข้าไปดูรายละเอียดเพิ่มเติมและ Source code ได้ที่ GitHub: mositron/Aetheria
