brewInTH.
← บทความทั้งหมด

30/09/2026 · Game, WebGL, คู่มือ

เอาเกม HTML5 / Godot / Unity WebGL ขึ้นเว็บ ให้เพื่อนเล่นได้ทันที

ภาพปก เอาเกม HTML5 Godot และ Unity WebGL ขึ้นเว็บ พร้อมไอคอนจอยเกม ชิปประมวลผล และลูกโลก และพ่อมดของ BrewInTH

วิธี export เกม Unity WebGL, Godot และ Phaser ให้ AI อัปโหลดขึ้น BrewInTH ไฟล์ .wasm/.br ใช้ได้เลย เปิด COOP/COEP สำหรับเกมที่ใช้ thread และประเมินพื้นที่

ทำเกมเสร็จแล้วใน Unity, Godot หรือเขียน HTML5 เองด้วย Phaser อยากส่งลิงก์ให้เพื่อนเล่นได้ทันทีโดยไม่ต้องติดตั้งอะไร แต่พอเอาขึ้นเว็บ มักเจอหน้าจอค้างที่แถบโหลด ขึ้น error เรื่อง .wasm หรือ .br หรือเกม Godot 4 แจ้งว่าต้องใช้ SharedArrayBuffer

บทความนี้อธิบายวิธีนำเกมเว็บขึ้น BrewInTH แบบเว็บ static ตั้งแต่การ export จากแต่ละ engine ไปจนถึงสวิตช์ที่ต้องเปิดสำหรับเกมแบบหลาย thread พร้อม prompt ให้ AI อัปโหลดให้ครบทุกไฟล์ และวิธีประเมินพื้นที่กับ bandwidth ก่อนแชร์ลิงก์

สรุปสั้นก่อนอ่าน
✅ เกมเว็บ (Unity WebGL, Godot, Phaser, HTML5) ใช้โปรเจกต์แบบ เว็บ static อัปโหลดไฟล์ที่ export แล้วทีละไฟล์ โดยมี index.html อยู่ที่ราก
✅ ไฟล์ .wasm, เสียง, ฟอนต์ ได้ content type ที่ถูกต้อง ไฟล์ที่บีบอัดมาแล้ว .br / .gz ของ Unity ใช้ได้เลย ไม่ต้องเปิด Decompression Fallback
✅ ไฟล์ข้อความ .wasm .data .pck ระบบบีบอัด Brotli ให้เองหลังอัปโหลด และคิด bandwidth ตาม byte ที่ส่งจริง
✅ เกมที่ใช้ thread (Godot 4 แบบ Thread Support, Unity multithreading) เปิด cross-origin isolation ใน ตั้งค่าแอป › ส่วนหัวของเว็บ (headers)
✅ ไฟล์เกมนับรวมพื้นที่ของแพ็กเกจ แพ็กเกจฟรีมี 20 MB เกม Unity/Godot มักต้องใช้แพ็กเกจแบบชำระเงิน

เกมแบบไหนขึ้น BrewInTH ได้

เกมที่ export ออกมาเป็นไฟล์เว็บ (HTML, JavaScript, WebAssembly และไฟล์ข้อมูล) เปิดใน browser ได้ทั้งหมด เช่น

  • Unity ที่ build เป็น WebGL
  • Godot 3 และ 4 ที่ export เป็น Web
  • Phaser, PixiJS, Three.js หรือเกม HTML5/JavaScript ที่เขียนเอง
  • เกมจากเครื่องมืออื่นที่ export เป็นหน้าเว็บ เช่น Construct หรือ GDevelop

ถ้าเกมมีระบบฝั่ง server ด้วย เช่น กระดานคะแนนรวมหรือเล่นหลายคนออนไลน์ ส่วนนั้นเป็นแอปอีกโปรเจกต์หนึ่ง (เช่น Node.js + ฐานข้อมูล) ส่วนตัวเกมยังเป็นเว็บ static เหมือนเดิม

export เกมจากแต่ละ engine

วิธี export เกมเว็บก่อนอัปโหลดขึ้น BrewInTH: Unity เลือก platform WebGL และ Compression Format เป็น Brotli หรือ Gzip ไม่ต้องเปิด Decompression Fallback; Godot 4 export เป็น Web ตั้งชื่อไฟล์เป็น index.html ถ้าเปิด Thread Support ต้องเปิด cross-origin isolation; Phaser หรือ HTML5 build แล้วใช้โฟลเดอร์ผลลัพธ์ เช่น dist ทุกแบบต้องมี index.html อยู่ที่ราก

Unity (WebGL)

  1. เปิด Build Settings เลือก platform WebGL
  2. ใน Player Settings › Publishing Settings เลือก Compression Format เป็น Brotli หรือ Gzip ได้ตามปกติ BrewInTH ส่งไฟล์ .br / .gz พร้อม header ที่ browser ต้องใช้ จึง ไม่ต้องเปิด Decompression Fallback
  3. Build ได้โฟลเดอร์ที่มี index.html, Build/ และ TemplateData/ อัปโหลดทั้งโฟลเดอร์นี้โดยคงโครงสร้างไว้

Godot (Web)

  1. Project › Export เพิ่ม preset Web (ติดตั้ง export template ถ้ายังไม่มี)
  2. ตั้งชื่อไฟล์ export เป็น index.html ไฟล์ .js, .wasm, .pck จะได้ชื่อเดียวกันอยู่ข้าง ๆ
  3. Godot 4 มีตัวเลือก Thread Support ถ้าเปิดไว้ ต้องเปิด cross-origin isolation ในหัวข้อถัดไป ถ้าเกมไม่ได้ต้องการ thread การปิดไว้ง่ายกว่า

Phaser / HTML5 ทั่วไป

build ตามปกติของโปรเจกต์ (เช่น npm run build) แล้วใช้โฟลเดอร์ผลลัพธ์อย่าง dist/ ถ้าเป็นไฟล์ HTML/JS ล้วนไม่มีขั้น build ก็ใช้โฟลเดอร์นั้นได้เลย

ทุกแบบต้องมี index.html อยู่ที่รากของโฟลเดอร์ที่อัปโหลด ไม่ซ้อนอยู่ในโฟลเดอร์อื่นอีกชั้น

อัปโหลดด้วย AI ให้ครบทุกไฟล์

เว็บ static บน BrewInTH อัปโหลดเป็นไฟล์ทีละไฟล์ (ไม่ใช่ ZIP) ปุ่ม เลือกไฟล์เพื่ออัปโหลด ในแท็บ ไฟล์ เหมาะกับเว็บที่มีไม่กี่ไฟล์ในโฟลเดอร์เดียว เพราะไม่เก็บโฟลเดอร์ย่อยอย่าง Build/ ให้ เกมส่วนใหญ่จึงควรให้ AI อัปโหลดแทน

สร้างโปรเจกต์ใหม่ เลือกเทคโนโลยีเป็น เว็บ Static (HTML/CSS/JavaScript) กดปุ่ม สร้างลิงก์และ token สำหรับ AI (อัตโนมัติ) แล้วเปิด AI บนคอมพิวเตอร์ในโฟลเดอร์ของเกม

(วางข้อความสำเร็จรูปจาก BrewInTH ตรงนี้)

โฟลเดอร์ build-web/ คือเกมที่ export จาก Unity WebGL (index.html อยู่ในโฟลเดอร์นี้)
ช่วยนำขึ้นโปรเจกต์ static บน BrewInTH
- อัปโหลดทุกไฟล์ใน build-web/ ทีละไฟล์ คง path เดิมไว้ เช่น Build/game.wasm.br
- ไม่ต้องบีบอัดไฟล์เพิ่มเอง และไม่ต้องแก้ไฟล์ที่ Unity สร้าง
- ตรวจพื้นที่ที่เหลือของแพ็กเกจก่อนอัปโหลด ถ้าไม่พอให้บอกฉัน
- เผยแพร่แล้วใช้ site_check ตรวจ / และไฟล์ .wasm ว่าตอบ 200
แล้วส่งลิงก์ให้ฉันเปิดเล่นจริง

เปลี่ยน "Unity WebGL" เป็น engine ที่ใช้ และ build-web/ เป็นชื่อโฟลเดอร์ของคุณ ถ้าถนัดโปรแกรม FTP ใช้ SFTP ในแท็บไฟล์ วางทั้งโฟลเดอร์ แล้วกด เผยแพร่ไฟล์จาก SFTP ก็ได้เช่นกัน

BrewInTH ส่งไฟล์เกมยังไง

สิ่งที่ BrewInTH ทำให้ไฟล์เกมอัตโนมัติ: ส่งไฟล์ด้วย content type จริงของ wasm เสียง วิดีโอ และฟอนต์, ไฟล์ .br และ .gz ของ Unity และ Godot ส่งพร้อม Content-Encoding, บีบอัด Brotli ให้ไฟล์ข้อความ wasm data pck หลังอัปโหลด, ไฟล์ที่ไม่เปลี่ยนตอบ 304 ไม่คิด bandwidth, รองรับ Range request และมีสวิตช์ cross-origin isolation สำหรับเกมที่ใช้ thread

  • content type ถูกต้อง .wasm ได้ application/wasm เสียง วิดีโอ และฟอนต์ได้ชนิดของตัวเอง browser จึงโหลด WebAssembly แบบเร็วได้
  • ไฟล์ที่บีบอัดมาแล้ว ไฟล์ชื่อ x.wasm.br, x.data.gz, x.js.br หรือ .pck ที่บีบอัดไว้ ระบบส่งพร้อม Content-Encoding ให้ browser คลายเอง
  • บีบอัดให้อัตโนมัติ ไฟล์ข้อความ, .wasm, .data, .pck ตั้งแต่ 1 KB ขึ้นไป ระบบทำไฟล์ Brotli เก็บไว้หลังอัปโหลดไม่กี่วินาที ส่งให้ browser ที่รองรับ ไม่นับเป็นพื้นที่ของคุณ และ bandwidth คิดตาม byte ที่ส่งออกไปจริง
  • ผู้เล่นกลับมาเล่นซ้ำ ไฟล์ที่ไม่เปลี่ยนตอบ 304 ไม่คิด bandwidth ส่วนเวอร์ชันใหม่ที่เผยแพร่เห็นทันที
  • Range request เลื่อนเสียง/วิดีโอ หรือโหลดไฟล์ใหญ่ต่อจากที่ค้างได้

เกมที่ใช้ thread: เปิด cross-origin isolation

Godot 4 ที่ export แบบ Thread Support และ Unity ที่เปิด multithreading ต้องใช้ SharedArrayBuffer ซึ่ง browser อนุญาตเฉพาะหน้าเว็บที่ส่ง header สองตัวนี้

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

ใน BrewInTH เปิดได้ที่หน้าโปรเจกต์ › แท็บ ตั้งค่าแอป › ส่วนหัวของเว็บ (headers) › ติ๊ก เปิด cross-origin isolation (COOP/COEP) แล้วกด บันทึก มีผลทันทีโดยไม่ต้องเผยแพร่ใหม่ หรือบอก AI ให้เปิดให้ก็ได้

ข้อควรรู้: เมื่อเปิดแล้ว หน้าเกมจะฝัง iframe สคริปต์ หรือรูปจากโดเมนอื่นไม่ได้ (เช่น YouTube, โฆษณา, Google Fonts) เว้นแต่ปลายทางส่ง header อนุญาตมา เกมที่ export แบบไม่ใช้ thread จึงควรปิดสวิตช์นี้ไว้

พื้นที่และ bandwidth: ประเมินก่อนแชร์ลิงก์

ไฟล์ที่อัปโหลดทุกไฟล์นับรวมกับพื้นที่ของแพ็กเกจ (ใช้ร่วมกันทุกโปรเจกต์) ไฟล์ของเวอร์ชันเก่าที่ยังไม่ลบก็ยังนับอยู่ ตามราคาปัจจุบันใน หน้าแพ็กเกจ

  • Free พื้นที่ 20 MB, bandwidth 1 GB ต่อเดือน
  • Starter (99 บาท/เดือน) พื้นที่ 200 MB, bandwidth 10 GB ต่อเดือน
  • Maker (1,499 บาท/ปี) พื้นที่ 1 GB, bandwidth 50 GB ต่อเดือน
  • Growth (2,899 บาท/ปี) พื้นที่ 10 GB, bandwidth 200 GB ต่อเดือน

เกม HTML5 เล็ก ๆ อยู่ในแพ็กเกจฟรีได้สบาย แต่เกม Unity หรือ Godot มักมีขนาดหลายสิบ MB จึงควรใช้แพ็กเกจแบบชำระเงิน คิดคร่าว ๆ ว่าเกมขนาด 20 MB ที่มีผู้เล่นใหม่ 50 คน ใช้ bandwidth ประมาณ 1 GB (น้อยกว่านั้นถ้าไฟล์ถูกบีบอัด และผู้เล่นที่กลับมาซ้ำแทบไม่นับ) แพ็กเกจฟรีจะหยุดให้บริการเมื่อครบโควตาของเดือน ส่วนแพ็กเกจแบบชำระเงินให้บริการต่อได้ถึง 150% พร้อมแจ้งเตือนทางอีเมล

ดูวิดีโอประกอบ

▶ ตัวอย่างตั้งแต่สร้างโปรเจกต์จนเปิดเว็บ (1:30 นาที)
ดูบน YouTube

คำถามที่พบบ่อย

เกมค้างที่แถบโหลด ดูตรงไหน

เปิด Developer Tools ของ browser (F12) ดูแท็บ Console และ Network ว่าไฟล์ไหนตอบ 404 หรือ error อะไร แล้วส่งให้ AI อ่าน สาเหตุที่พบบ่อยคืออัปโหลดไม่ครบ หรือ path ของโฟลเดอร์ย่อยเปลี่ยน

ต้องตั้ง Decompression Fallback ใน Unity ไหม

ไม่ต้อง BrewInTH ส่งไฟล์ .br และ .gz พร้อม Content-Encoding ให้แล้ว และทุกเว็บเป็น https ซึ่ง Brotli ต้องใช้

ใช้โดเมนของตัวเองกับเกมได้ไหม

ได้ในแพ็กเกจแบบชำระเงิน เชื่อมโดเมนที่มีอยู่หรือจดใหม่ได้จากหน้าโดเมน อ่านขั้นตอนใน บทความเชื่อมโดเมน

เกมเก็บคะแนนสูงสุดได้ไหม

ถ้าเก็บในเครื่องผู้เล่น (localStorage) ทำได้ทันทีในเว็บ static ถ้าต้องการกระดานคะแนนรวมของทุกคน ต้องมีแอปกับฐานข้อมูลเพิ่มอีกโปรเจกต์

อัปเดตเกมเวอร์ชันใหม่ยังไง

export ใหม่แล้วให้ AI อัปโหลดและเผยแพร่อีกครั้งในแชตเดิม ผู้เล่นเห็นเวอร์ชันใหม่ทันที อย่าลืมให้ AI ลบไฟล์เก่าที่ไม่ใช้แล้ว เพื่อไม่ให้กินพื้นที่

สรุป

เกม Unity WebGL, Godot, Phaser และ HTML5 ขึ้น BrewInTH ได้แบบเว็บ static export ให้มี index.html ที่ราก ให้ AI อัปโหลดทุกไฟล์โดยคง path แล้วระบบจัดการ content type การบีบอัด และ cache ให้ เกมที่ใช้ thread เปิด cross-origin isolation เพิ่มอีกสวิตช์เดียว ส่วนเกมขนาดใหญ่ควรเลือกแพ็กเกจที่พื้นที่และ bandwidth พอ

เริ่มโปรเจกต์แรกฟรี →

บทความที่เกี่ยวข้อง